原生http请求封装
满血复活,今天开始开始更新博客。
随着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;
原生http请求封装的更多相关文章
- 原生AJAX请求教程
ajax 即 Asynchronous Javascript And XML,AJAX 不是一门的新的语言,而是对现有持术的综合利用.本质是在 HTTP 协议的基础上以异步的方式与服务器进行通信. 异 ...
- 原生 ajax 请求
ajax 即 Asynchronous Javascript And XML,AJAX 不是一门的新的语言,而是对现有持术的综合利用.本质是在 HTTP 协议的基础上以异步的方式与服务器进行通信. 异 ...
- iOS开发——post异步网络请求封装
IOS中有许多网络请求的函数,同步的,异步的,通过delegate异步回调的. 在做一个项目的时候,上网看了很多别人的例子,发现都没有一个简单的,方便的异步请求的封装例子.我这里要给出的封装代码,是异 ...
- 原生ajax与封装的ajax使用方法
当我们不会写后端接口来测试ajax时,我们可以使用node环境创建一个本地服务器. 1.创建一个本地服务器可参考http://www.cnblogs.com/heyujun-/p/6793900.ht ...
- drf复习(一)--原生djangoCBV请求生命周期源码分析、drf自定义配置文件、drf请求生命周期dispatch源码分析
admin后台注册model 一.原生djangoCBV请求生命周期源码分析 原生view的源码路径(django/views/generic/base.py) 1.从urls.py中as_view ...
- Flutter 实际开发常用工具类(全局提示,请求封装,token缓存,验证码倒计时、常用窗帘动画及布局)
介绍: 一星期从入门到实际开发经验分享及总结 代码传送门github Flutter是谷歌的移动UI框架,可以快速在iOS和Android上构建高质量的原生用户界面.未来App开发 ...
- 基于 fetch 的请求封装
原生 fetch 请求失败后(如无网络)状态会变成 reject 走 .catch .绝大多数情况下业务场景只需要给个 toast 等简单处理.每个请求都 .catch 会显得格外繁琐,并且如果不 . ...
- flutter dio网络请求封装实现
flutter dio网络请求封装实现 文章友情链接: https://juejin.im/post/6844904098643312648 在Flutter项目中使用网络请求的方式大致可分为两种 ...
- WebApi系列~基于单请求封装多请求的设计
回到目录 怎么说,单请求封装多请求,这句话确实有点绕了,但还是要看清楚,想明白这到底是怎么一回事,单请求即一次请求(get,post,put,delete),封闭多请求,即在客户端发送的一个请求中可能 ...
随机推荐
- jmeter 前置处理器提取用户cookie信息 比如jsessionid
一般登录过程分成两步,一步是打开登录页面, 一步是输入用户名和密码登录 现在B/S架构的系统好多时候都只在客户端的cookie信息保留一个jsessionId,然后每次请求的时候在请求的头信息的coo ...
- 修改GeoJson的网址
http://geojson.io 可以打开自己的json 然后修改
- 蓝桥杯java历年真题及答案整理1~20.md
蓝桥杯java历年真题及答案整理(闭关一个月,呕心沥血整理出来的) 1 算法是这样的,如果给定N个不同字符,将这N个字符全排列,最终的结果将会是N!种.如:给定 A.B.C三个不同的字符,则结果为:A ...
- java 中的JDK封装的数据结构和算法解析(集合类)----顺序表 List 之 ArrayList
1. 数据结构之List (java:接口)[由于是分析原理,这里多用截图说明] List是集合类中的容器之一,其定义如下:(无序可重复) An ordered collection (also kn ...
- Java之排序
1.插入排序 假设第一个数已经是排好序的,把第二个根据大小关系插到第一个前面或维持不动,把第三个根据前面两个的大小关系插到对应位置,依次往后. public class InsertSort { pu ...
- python clock装饰器 计算函数执行时间,执行结果及传入的参数
import time import functools def clock(func): @functools.wraps(func)#还原被装饰函数的__name__和__doc__属性 def ...
- bzoj千题计划271:bzoj4869: [六省联考2017]相逢是问候
http://www.lydsy.com/JudgeOnline/problem.php?id=4869 欧拉降幂+线段树,每个数最多降log次,模数就会降为1 #include<cmath&g ...
- BAT齐聚阿里安全-ASRC生态大会:呼吁联合共建网络安全白色产业链
图说:近日,阿里安全-ASRC生态大会在杭州举行,包括BAT在内的20余家国内知名互联网企业代表,回顾过去一年网络安全面临的问题与挑战,共谋生态安全治理思路. "123456.111111. ...
- JAVA_SE基础——54.异常
异常的体系: ----------| Throwable 所以异常或者错误类的超类 --------------|Error 错误 错误一般是用于jvm或者是硬件引发的问题,所以我们一般不会通 ...
- JAVA_SE基础——26.[深入解析]局部变量与成员变量的区别
黑马程序员入学blog ... 如果这章节很难懂的话应该返回去先看 JAVA_SE基础--10.变量的作用域 定义的位置上区别: 1. 成员变量是定义在方法之外,类之内的. 2. 局部变量是定义在方 ...