如何使用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