如何使用promise封装 原生ajax，$.ajax(),以及fetch？

如何使用promise封装原生ajax

// Promise 封装 ajax
        //url:请求的API
        //method：请求方式
        function myAjax(url, method) {
            method = method.toLowerCase(); //toLowerCase() 方法用于把字符串转换为小写。
            return new Promise(
                (res, rej) => {
                    var xhr = new XMLHttpRequest(); //创建XMLHttpRequest的实例化对象
                    //判断请求方式
                    if (method === "get") { //get请求
                        xhr.open(method, `${url}`)
                        xhr.send()
                    } else if (method === "post") { //post请求
                        // console.log(url)
                        xhr.open(method, `${url}`)
                        // 设置的header头必须要放到open()后面
                        xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded"); //设置请求头
                        xhr.send()
                    } else if (method == "put") { //put请求
                        xhr.open(method, `${url}`)
                    }
                    // onreadystatechange 事件
                    // 当请求被发送到服务器时， 我们需要执行一些基于响应的任务。
                    // 每当 readyState 改变时， 就会触发 onreadystatechange 事件。
                    // readyState 属性存有 XMLHttpRequest 的状态信息。
                    xhr.onreadystatechange = function () {
                        // console.log(xhr.readyState, xhr.status)
                        if (xhr.readyState === 4 && xhr.status === 200) {
                            var responseObj = {
                                response: xhr.response,
                                status: xhr.status,
                                statusText: xhr.statusText
                            }
                            res(responseObj.statusText);
                        }
                        setTimeout(function () {
                            if (xhr.readyState != 4 || xhr.status != 200) {
                                rej("ajax请求发送失败!")
                            }
                        }, 5000)
                    }
                }
            )
        }

        // 使用
        myAjax("https://api.it120.cc/small4/banner/list", "GET").then(res => {
            console.log(res);
        }).catch(err => {
            console.log(err);
        })
    </script>

$.ajax()

 //$.ajax的格式
 //有下面常用的一些参数：
  //url:要求为String类型的参数，（默认为当前页地址）发送请求的地址。
  //type:要求为String类型的参数，请求方式（post或get）默认为get。注意其他http请求方法，例如put和delete也可以使用，但仅部分浏览器支持。
  //async:要求为Boolean类型的参数，默认设置为true，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为false。注意，同步请求将锁住浏览器，用户其他操作必须等待请求完成才可以执行。
  //success:要求为Function类型的参数，请求成功后调用的回调函数，有两个参数。
         //(1)由服务器返回，并根据dataType参数进行处理后的数据。
         //(2)描述状态的字符串。

  //error:要求为Function类型的参数，请求失败时被调用的函数。该函数有3个参数，即XMLHttpRequest对象、错误信息、捕获的错误对象(可选)。  


//timeout:要求为Number类型的参数，设置请求超时时间（毫秒）。此设置将覆盖$.ajaxSetup()方法的全局设置。
//data:要求为Object或String类型的参数，发送到服务器的数据。如果已经不是字符串，将自动转换为字符串格式。get请求中将附加在url后。防止这种自动转换,对象必须为key/value格式

$.ajax({
     type: "GET",//请求的类型
     url: "xxxxx",//请求的api地址
     data:{},//带到后台的值，以键值对的形式
     async:true,//当async等于true时，默认是异步请求。当async等于false时，是同步请求
     success: function(data){},//请求成功的回调
     error:function(err){console.log('请求失败')}//请求失败的回调函数
    });

fetch

fetch是一种HTTP数据请求的方式，是XMLHttpRequest的一种替代方案。fetch不是ajax的进一步封装，而是原生js。Fetch函数就是原生js，没有使用XMLHttpRequest对象。

特点：

1. 第一个参数是URL
2. 第二个是可选参数，可以控制不同配置的 init 对象
3. 使用了 JavaScript Promises 来处理结果/回调:

//fetch请求
fetch(url).then(response => response.json())
  .then(data => console.log(data))
  .catch(e => console.log("Oops, error", e))

fetch和ajax 的主要区别：

• fetch()返回的promise将不会拒绝http的错误状态，即使响应是一个HTTP 404或者500
• 在默认情况下 fetch不会接受或者发送cookies