满血复活,今天开始开始更新博客。
随着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请求封装的更多相关文章

  1. 原生AJAX请求教程

    ajax 即 Asynchronous Javascript And XML,AJAX 不是一门的新的语言,而是对现有持术的综合利用.本质是在 HTTP 协议的基础上以异步的方式与服务器进行通信. 异 ...

  2. 原生 ajax 请求

    ajax 即 Asynchronous Javascript And XML,AJAX 不是一门的新的语言,而是对现有持术的综合利用.本质是在 HTTP 协议的基础上以异步的方式与服务器进行通信. 异 ...

  3. iOS开发——post异步网络请求封装

    IOS中有许多网络请求的函数,同步的,异步的,通过delegate异步回调的. 在做一个项目的时候,上网看了很多别人的例子,发现都没有一个简单的,方便的异步请求的封装例子.我这里要给出的封装代码,是异 ...

  4. 原生ajax与封装的ajax使用方法

    当我们不会写后端接口来测试ajax时,我们可以使用node环境创建一个本地服务器. 1.创建一个本地服务器可参考http://www.cnblogs.com/heyujun-/p/6793900.ht ...

  5. drf复习(一)--原生djangoCBV请求生命周期源码分析、drf自定义配置文件、drf请求生命周期dispatch源码分析

    admin后台注册model  一.原生djangoCBV请求生命周期源码分析 原生view的源码路径(django/views/generic/base.py) 1.从urls.py中as_view ...

  6. Flutter 实际开发常用工具类(全局提示,请求封装,token缓存,验证码倒计时、常用窗帘动画及布局)

    介绍: 一星期从入门到实际开发经验分享及总结           代码传送门github Flutter是谷歌的移动UI框架,可以快速在iOS和Android上构建高质量的原生用户界面.未来App开发 ...

  7. 基于 fetch 的请求封装

    原生 fetch 请求失败后(如无网络)状态会变成 reject 走 .catch .绝大多数情况下业务场景只需要给个 toast 等简单处理.每个请求都 .catch 会显得格外繁琐,并且如果不 . ...

  8. flutter dio网络请求封装实现

    flutter dio网络请求封装实现 文章友情链接:   https://juejin.im/post/6844904098643312648 在Flutter项目中使用网络请求的方式大致可分为两种 ...

  9. WebApi系列~基于单请求封装多请求的设计

    回到目录 怎么说,单请求封装多请求,这句话确实有点绕了,但还是要看清楚,想明白这到底是怎么一回事,单请求即一次请求(get,post,put,delete),封闭多请求,即在客户端发送的一个请求中可能 ...

随机推荐

  1. C#中的String类

    一.String类的方法 1. Trim():清除字符串两端的空格 2. ToLower():将字符串转换为小写 3. Equals():比较两个字符串的值,bool 4. IndexOf(value ...

  2. java基础笔记(4)----数组

    介绍: 数组是一种数据类型,是引用类型,是一块连续的内存空间,用于存储和管理相同类型的多个数据. 定义:-- > 数组的声明方式 先声明,在开辟内存空间--> int [] a; a=ne ...

  3. beta冲刺用户测评-咸鱼

    测评人:庄加鑫-咸鱼 测评结果  一.使用体验数据加载响应很快!页面切换丝滑流畅!UI有点偏暗,有些字被覆盖了.页面布局过于居中,两侧空白范围较大.总体功能完善.二.登录.注册.忘记密码界面管理员登录 ...

  4. 实验三《Java面向对象程序设计》实验报告

    20162308 实验三<Java面向对象程序设计>实验报告 实验内容 XP基础 XP核心实践 IDEA工具学习 密码学算法基础 实验步骤 (一)Refactor/Reformat使用 p ...

  5. 课堂测试ch06

    课堂测试ch06 下面代码中,对数组x填充后,采用直接映射高速缓存,所有对x和y引用的命中率为(D) A. 1 B. 1/4 C. 1/2 D. 3/4 解析:在填充了之后,对于x和y数组,只有在引用 ...

  6. 《Effective Objective-C 2.0》摘要

    前一段时间将<Effective Objective-C 2.0>这本书浏览了一遍,说一下几个觉得比较有意思的知识点. 感觉这本书是ios开发必看的一本书,最基础的,以及稍微高阶一点的oc ...

  7. Python处理图片缩略图

    CPU 密集型任务和 IO 密集型任务分别选择多进程multiprocessing.Pool.map 和多线程库multiprocessing.dummy.Pool.map import os imp ...

  8. Flask Markup 上下文,request

    在模板渲染中,使用Markup转换变量中的特殊字符 from flask import Markup Markup函数对字符串进行转移处理再传递给render_template()函数 在浏览器中显示 ...

  9. 201421123042 《Java程序设计》第3周学习总结

    #Week03-面向对象入门 1. 本周学习总结 1.1写出你认为本周学习中比较重要的知识点关键词,如类.对象.封装等 本周学习关键词:类,对象,封装,关键词:final,this,statis. 1 ...

  10. day-6 机器学习概念及应用

    学习玩Python基础语法,今天开始进行机器学习,首先了解下机器学习和深度学习的一些基本概念和术语: 1.  机器学习概念及应用 2.  深度学习概念及应用 3.  机器学习基本术语及举例 4.  机 ...