基于Promise手动封装ajax

这篇具有很好参考价值的文章主要介绍了基于Promise手动封装ajax。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

promise-ajax.js

function ajax({url='xxx', type="get", dataType="json"}) {
  return new Promise((resolve, reject) => {
    let xhr = new XMLHttpRequest();
    xhr.open(type, url, true);
    xhr.responseType = dataType;
    xhr.onload = function () { // xhr.readState=4 xhr.status=200
      if(xhr.status == 200){
        resolve(xhr.response) //成功调用成功的方法
      }else{
        reject('not found');
      }
    };
    xhr.onerror = function (err) {
        reject(err) // 失败调用失败的方法
    };
    xhr.send();
  })
}

使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
<body>
  <div id="app"></div>
  <script src="node_modules/vue/dist/vue.js"></script>
  <script src="promise-ajax.js"></script>
  <script>
    let vm = new Vue({
      el: '#app',
      created(){
        ajax({url: './carts.json'}).then((res)=>{
          console.log(res)
        }, (err)=>{
          console.log(err)
        })
      },
      data: {
        products: []
      }
    })
  </script>
</body>
</html>

文章来源地址https://www.toymoban.com/news/detail-663430.html

到了这里,关于基于Promise手动封装ajax的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 基于jQuery的三种AJAX请求

    get请求 通常用于 获取服务端资源 (向服务器要资源) ​例如:根据URL地址,从服务器获取HTML文件、CSS文件、JS文件、图片文件、数据资源等。 post请求 通常用于 向服务器提交数据 (往服务器发送资源) ​例如:登录时向服务器提交的登录信息、注册是向服务器提交的注册

    2024年01月20日
    浏览(38)
  • 微信小程序基于Promise封装发起网络请求

         

    2024年02月17日
    浏览(56)
  • Vue 封装ajax请求[接口]函数

             在Vue项目开发当中,当有了后端提供的数据接口之后呢,就需要来为接口定义接口的请求函数,那么在去定义接口函数之前可以先来封装一个ajax请求函数;可能有的初学者在之前的一些篇目当中看到这个vue发起数据请求的不是使用axios的吗?这个确实没有问题,在

    2024年02月08日
    浏览(39)
  • 微信小程序 基于Promise 对 wx.request 封装处理

    当我们进行微信小程序开发的时候,会经常涉及到发送网络请求来进行后台数据交互,而在微信小程序中,用来 发送请求的方法是 wx.request() , 但是由于 wx.request() 方法 不支持 Promise 风格的调用,所以导致 wx.request() 用来发送异步请求的时候,会触发成 回调地狱 的表现, 以及

    2024年02月04日
    浏览(47)
  • jquery ajax 缓存

    在 jQuery 中使用 AJAX 请求时,浏览器和服务器共同决定是否缓存响应。默认情况下,对于 GET 请求,现代浏览器通常会遵循 HTTP 缓存策略(例如根据 Cache-Control 、 Expires 和 ETag 等头部信息)。然而,jQuery 的 $.ajax() 函数提供了一个可选参数 cache 来控制 AJAX 请求的缓存行为。 c

    2024年01月21日
    浏览(54)
  • jquery发送ajax练习

    HBuilder X

    2024年02月12日
    浏览(46)
  • Ajax与jQuery

    Ajax是一种异步 无刷新 的技术         可以理解为:在网页中 利用 XMLHttpRequest 对象和服务器进行数据交互的方式就是Ajax,它可以帮助我们轻松实现网页与服 务器之间的数据交互。 Ajax的优点: 可以无需刷新页面与服务器端进行通信 允许根据用户事件来更新部分页面内容

    2024年02月10日
    浏览(39)
  • jQuery中ajax如何使用

    在现代Web开发中,使用Ajax进行异步数据交互变得非常普遍。而在jQuery中,提供了便捷的方法来实现Ajax请求,简化了开发过程。本文将介绍jQuery中如何使用Ajax以及通过代码详解其使用方法。 Ajax(Asynchronous JavaScript and XML)是一种用于创建交互式Web应用程序的技术。它结合了

    2024年02月08日
    浏览(36)
  • jQuery中ajax的使用

    $ .ajax()方法概述 在jQuery中也为大家封装好了一些ajax方法。内部会自动将data对象转换成x-www-form-urlencoded的形式,data中我们也可以传递字符串。如果要传递json格式数据,需要设置contentType和将data写成json字符串的形式(可以用JSON.stringify方法转换) 作用:发送Ajax请求。   1.jQ

    2024年02月07日
    浏览(36)
  • NodeJs使用jQuery中$Ajax

    gitee地址: https://gitee.com/studyCodingEx/studys/

    2024年02月07日
    浏览(41)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包