本篇文章,关于ajax中的promise封装, 以下是关于ajax实现promise封装:
function ajax(options) {
let baseUrl = 'http://192.168.217.178:9527'
return new Promise((resolve, reject) => { // 返回一个promise
let { url = '/', method, data } = options;
url = baseUrl + url;
method method.toUpperCase();
let query = '';
for (let k in data) {
query += k + '=' + data[k] + '&'
}
query = query.slice(0, query.length - 1);
let xhr = new XMLHttpRequest()
// 区分get和post请求,
if (method === 'GET') {
url = query == '' ? url : url + '?' + query; // GET请求,参数拼接在url上
xhr.open(method, url, true);
xhr.send();
}
if (method === 'POST') {
xhr.open(method, url, true);
xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded") // 设置请求头
xhr.send(query); // post请求的参数在send中
}
xhr.onreadystatechange = () => {
if (xhr.readyState === 4 && xhr.status === 200) {
let res = JSON.parse(xhr.responseText)
resolve(res) // 如果成功则调用resolve 成功函数
}
}
})
}
封装好了的ajax如何调用:
let p = ajax({
url: "/api/goodList",
method: "get",
data: {
page: 1
}
})
此时的p的返回值为一个promise对象,如何获取值呢
p.then(res =>{
console.log(res)
})