15、使用Promise封装AJAX请求
promise就有reject和resolve了,就不必写成功和失败的回调函数了
const BASEURL = './手写ajax/test.json'
function promiseAjax() {
return new Promise((resolve, reject) => {
const xhr = new XMLHttpRequest();
xhr.open("get", BASEURL, true);
// 设置请求头
xhr.setRequestHeader("accept", "application/json");
// 设置超时时间\
const timeout = 1000;
xhr.timeout = timeout;
// 监听状态:箭头函数没有this
xhr.onreadystatechange = () => {
// 监听ajax
if (xhr.readyState !== 4) {
return;
}
// 监听http
if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
resolve(xhr.response)
} else {
reject(new Error(xhr.statusText))
}
}
// 处理错误情况
xhr.onerror = () => {
reject(new Error(xhr.statusText))
}
xhr.ontimeout = () => {
reject(new Error(xhr.statusText))
}
// 设置格式\
xhr.responseType = "json"
// 发送请求
xhr.send(null);
})
}
// 测试调用
promiseAjax().then(
res => console.log("成功:", res),
err => console.error("失败:", err)
);