2020-02-11 20:07:52 卢浮宫 版权声明:本文为站长原创文章,转载请写明出处
每次看到自己的项目中一堆的$.ajax...就觉得很臃肿。
于是:封装起来吧。
class HttpClient {
get({url}) {
return new Promise((resolve, reject) => {
fetch(url, {
method: 'GET',
}).then(res => res.json())
.then(data => resolve(data))
.catch(error => reject(error));
})
}
post({url, data}) {
return new Promise((resolve, reject) => {
fetch(url, {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(data),
}).then(res => res.json())
.then(res => {
this._toggle(res);
resolve(res);
})
.catch(error => {
this._error();
console.log(error);
reject(error);
});
})
}
put({url, data}) {
return new Promise((resolve, reject) => {
fetch(url, {
method: 'PUT',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(data),
}).then(res => res.json())
.then(res => {
this._toggle(res);
resolve(res);
})
.catch(error => {
this._error();
console.log(error);
reject(error);
});
})
}
delete({url}) {
return new Promise((resolve, reject) => {
fetch(url, {
method: 'DELETE'
}).then(res => res.json())
.then(res => {
this._toggle(res);
resolve(res);
})
.catch(error => {
this._error();
console.log(error);
reject(error);
});
})
}
download({url, data}) {
return new Promise((resolve, reject) => {
fetch(url, {
method: 'post',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(data)
}).then(res => {
res.blob().then(blob => {
var filename = decodeURI(res.headers.get('Content-Disposition').replace("attachment;filename=", ""));
if (window.navigator.msSaveOrOpenBlob) {
navigator.msSaveBlob(blob, filename);
} else {
const a = document.createElement('a');
const url = window.URL.createObjectURL(blob);
// 获取 blob 本地文件连接 (blob 为纯二进制对象,不能够直接保存到磁盘上)
a.href = url;
a.download = filename;
a.click();
window.URL.revokeObjectURL(url);
parent.layer.msg('导出成功', {icon: 1});
}
resolve(res);
})
}).catch(() => {
parent.layer.msg('导出失败', {icon: 2});
reject(error);
});
});
}
_toggle(res) {
if (res.code === 0) {
this._success();
} else {
console.log(res);
this._error();
}
}
_success() {
// parent.layer.msg('操作成功', {icon: 1});
}
_error() {
// parent.layer.msg('操作失败', {icon: 2});
}
}
1、引入该工具
const httpClient = new HttpClient();
普通get请求如下(使用箭头函数可以有效的解决this指向问题)
httpClient.get({url: '/XXX.com?artiXX=XXX'}).then(res => {
if (res.code === 0) {
// doSomething...
} else {
// doSomething...
}
});
2、post请求如下
httpClient.post({url: "/guangmuhXXX",
data: reqParams
}).then(res => {
if (res.code === 0) {// doSomething...
} else {
// doSomething...
}});