大家好，欢迎来到IT知识分享网。

一、为什么会有这个？

每次看到自己的项目中一堆的$.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}); } }

Java

三、使用方法

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... } });