原生http请求封装
2024-10-20 05:25:09
满血复活，今天开始开始更新博客。
随着es6的普遍应用，promise属性也随之用之普遍，我们在一些项目中，为了避免引入一些http库，节省空间，就简单将原生http请求做了封装处理，封装代码如下：
（其中应用到了fetch，不懂得同学可以去mdn了解一下）
import http from './http';
let Http = {
/**
* @example
* ```js
* Http.get('http://xxx.com/some_api', {
* headers: 'Instance of Header',
* mode: '请求模式 cors、 no-cors 或者 same-origin',
* })```
*
* @param {String} url
* @param {Object} opt
*/
get(url, opt) {
opt = opt || {};
opt.method = 'GET';
return fetch(url, opt);
},
/**
*
* @example
* ```js
* Http.post('http://xxx.com/some_api', {
* headers: 'Instance of Header',
* mode: '请求模式 cors、 no-cors 或者 same-origin',
* body: '字符串 查询字符串 FormData实例 Blob 或者 BufferSource(2进制数组)'
* })```
* @param {String} url
* @param {String | URLSearchParams | FormData | Blob | ArrayBuffer} data
* @param {Object} opt
*/
post(url, data, opt) {
opt = opt || {};
opt.method = 'POST';
let param;
if (data instanceof FormData || data instanceof URLSearchParams || typeof(data) === 'string') {
param = data;
} else {
param = new URLSearchParams();
for (let k in data) {
param.append(k, data[k]);
}
}
opt.body = param;
return fetch(url, opt);
},
/**
* @example
* ```js
* Http.upload('http://xxx.com/some_api', {
* progress: (loaded, total)=>{
* console.log(loaded, total);
* }
* })```
*
*
* @param {String} url
* @param {FormData | Blob | ArrayBuffer} data
* @param {Object} opt
*/
upload(url, data, opt) {
return new Promise((resolve, reject) => {
let xhr = new XMLHttpRequest();
xhr.open('POST', url, true);
xhr.onprogress = opt.progress;
xhr.onerror = reject;
xhr.timeout = reject;
xhr.onload = function(evt) {
resolve({ body: evt.target.response, ok: evt.target.status >= 200 && evt.target.status < 300 });
};
xhr.send(data);
});
},
/**
* @example
* ```js
* Http.download('http://xxx.com/some_api', {
* type: 'arraybuffer',
* progress: (loaded, total)=>{
* console.log(loaded, total);
* }
* })```
*
*
* @param {String} url
* @param {Object} opt
*/
download(url, opt) {
return new Promise((resolve, reject) => {
let xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.responseType = opt.type || '';
xhr.onprogress = opt.progress;
xhr.onerror = reject;
xhr.timeout = reject;
xhr.onload = function(evt) {
resolve({ body: evt.target.response, ok: evt.target.status >= 200 && evt.target.status < 300 });
};
xhr.send(null);
});
}
};
export default Http;
最新文章
- ArcGIS属性选择器筛选
- AC日记——C’s problem(c) TYVJ P4746 （清北学堂2017冬令营入学测试第三题）
- SQL语句学习手册实例版
- 记一个同时支持模糊匹配和静态推导的Atom语法补全插件的开发过程: 序
- QT5 动态链接库的创建和使用
- Linux学习笔记(23) Linux备份
- PCL常见编程问题
- iOS-UIView category
- ntpdate公司测试
- .NET的语法优化
- Python基础 第二天
- 使用xshell链接本地虚拟机中的Linux
- SQL生成一柱双色球
- Babelfish
- jQuery checkbox 全选
- 关于PHP单双引号解析变量的问题
- feed 流数据请求时机的两个思路
- iOS-Mac配置Tomcat【Mac环境配置Tomcat】
- SpringBoot中跨域问题
- Codeforces Round #539 (Div. 2) - D. Sasha and One More Name（思维）