使用promise封装原生ajax，$.ajax(),以及fetch。_promise封装原生的ajax-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_51110899/article/details/109654276

本文探讨了如何使用Promise封装原生AJAX和jQuery的$.ajax()，并介绍了Fetch API的优势。Fetch提供了一种比XMLHttpRequest更简洁的异步获取资源的方式，其返回的Response对象可以通过arrayBuffer、blob、json、text和formData等方法处理数据。总结指出，Promise封装简化了数据请求，而Fetch使得操作更为简便。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、promise封装原生ajax

     let request = function (method="GET", url, data = "") {
            return new Promise((resolve, reject) => {

        var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : ActiveXObject("microsoft.XMLHttp")
        xhr.open(method,url,true);
        xhr.send();
        xhr.onreadystatechange = () =>{
            if(xhr.readyState == 4){
                if(xhr.status == 200){
                    resolve(JSON.parse(xhr.response))
                }
            }
        }    
        })
        }
//请求数据
//链式结构可以获取多个接口地址
    request("GET",url).then((res)=>{
            console.log(res)
            return request("GET",url)
        }).then((res)=>{
            console.log(res)
        })

二、promise封装原生$ajax

function fetch(url){
    return new Promise((res,rej)=>{
        $.ajax({
            url: url,
            type:"GET",
            // 允许异步
            async:true,
            // json数据格式
            dataType:"json",
            // 延迟时间
            timeout: 4000,
            // 成功回调
            success: function(data){
                res(data);
            },
            // 失败回调
            error: function(XMLHttpRequest){
                rej(XMLHttpRequest);
            },
            complete:function (XMLHttpRequest) {
                rej(XMLHttpRequest);
            }
        });
    })
}

// 获取数据
fetch(url).then((res)=>{
            console.log(res)
        })

三、fetch

Fetch API 提供了一个 JavaScript 接口，用于访问和操纵 HTTP 管道的一些具体部分，例如请求和响应。它还提供了一个全局
fetch() 方法，该方法提供了一种简单，合理的方式来跨网络异步获取资源。这种功能以前是使用 XMLHttpRequest
实现的。Fetch 提供了一个更理想的替代方案，可以很容易地被其他技术使用

fetch(url, {
  // get 请求可以省略不写 默认的是GET 
  method: 'get'
})
  .then(function(data) {
  return data.json();
}).then(function(data) {
  console.log(data)
});