JS手写代码篇----使用Promise封装AJAX请求
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;// 监听状态:箭头函数没有thisxhr.onreadystatechange = () => {// 监听ajaxif (xhr.readyState !== 4) {return;}// 监听httpif ((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));