分享一个http请求工具类(JS向)

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

});




更多精彩请关注guangmuhua.com


最新评论: