使用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对象。

特点：
第一个参数是URL
第二个是可选参数，可以控制不同配置的 init 对象
使用了 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