介绍:结合Promise封装ajax,fetch请求库
话不多说直接贴代码
/**
* @description 请求库封装
* @author panpeng
* @param {object} obj 请求参数
*/
function request( obj ){
const { method, url, data, header} = obj || {};
return new Promise( async (resolve,rejects) => {
let HttpRequest = null;
if(window.fetch){
const response = await fetch(url, {
method: method,
body: method.toLocaleUpperCase() === 'post' ? j(data) : null,
headers: header || {}
});
if(response.status == 200){
const result = await response.text();
resolve(result);
}else{
rejects(response);
}
}else{
if(window.XMLHttpRequest){
HttpRequest = new XMLHttpRequest();
}else{
HttpRequest = new ActiveXObject('Microsoft.XMLHTTP');
}
if(HttpRequest){
HttpRequest.open(method || 'get', url, true);
HttpRequest.onreadystatechange = (e) => {
if(e.currentTarget.readyState === 4){
if(e.currentTarget.status === 200){
resolve(e.currentTarget.response);
}else{
rejects(e.currentTarget.response);
}
}
}
header?HttpRequest.setRequestHeader(
...Object.keys(header),
...Object.values(header)
):void(0);
HttpRequest.send(j(data));
}else{
rejects('此浏览器不支持ajax');
}
}
})
}
function j(data){
let json = data;
json = (function(obj){
let str = "";
for(let prop in obj){
str += prop + "=" + obj[prop] + "&"
}
return str;
})(json);
return json;
}
使用示例
request({
method:'get',
url:'http://xxxxx.com/api',
data:{
datalist:somedata
}
}).then( res => {
console.log('数据返回',res);
}).catch( err => {
console.log('错误信息',err);
})
至此便完成了一个基础请求库封装