ES6 promise 封装http请求
今天研究了一下同事封装的http请求,用的是promise。
大结构是:
const __fetch = (url, data = {}, config = {}) => {
let params = Object.assign({}, data);
config.headers = Object.assign({}, config.headers, { "Content-Type": "application/json", "Access-Control-Allow-Origin": "*" });
config.body = JSON.stringify(params)
return Promise.race([
fetch(url, config),
new Promise((resolve, reject) => {
setTimeout(() => reject({ code: '504', msg: '请求超时' }), config.timeout || 20000)
})
]).then(response => {
if (response.status != 200) {
return Promise.reject({ code: response.status, msg: '请求失败' })
}
return response.json()
}, error => {
if (error && error.code) {
return Promise.reject(error)
}
}).then(response => new Promise((resolve, reject) => {
if (response & response.code && response.code === '000') {
resolve(response.data)
} else {
reject(response)
}
})).catch((e) => {
if (!e || !e.code) return Promise.reject({ code: '999' })
if (parseInt(e.code) === 998) return Promise.reject(e)
return Promise.reject({ code: e.code })
})
}
} const post=(url,data={},config={})=>{
config.method='POST'
return __fetch(url,data,config)
}
知识点:
1.fetch()
此处可与axios做一个对比
axios需要npm install 本质上是对XHR的封装
fetch不需要npm install ES6本身就支持 直接使用(前提:浏览器支持es6语法)即可 不是对XHR的封装
但是两者都是基于Promise实现的。
axios({
method: 'post',
url: '/user/12345',
data: {
firstName: 'Fred',
lastName: 'Flintstone'
}
}).then(function (response) {
console.log(response);
}).catch(function (error) {
console.log(error);
});
多说一下:async/await
async 用于声明一个function是异步的,返回一个Promise对象
await可以认为是async wait的简写,表示等待一个一步方法执行完成
async-await是寄生于Promise,Generator的语法糖
try {
let response = await fetch(url); //await在这里表示等待promise返回结果 再继续执行
let data = response.json();
console.log(data);
} catch(e) {
console.log("Oops, error", e);
}
最后说 fetch
fetch(url,options)
options中第一个参数是设置请求方法(默认是get)
第二个参数是设置头部(一般是json,所以设置为application/json)第三个参数是设置包含json内容的主体
fetch('some-url',{
method:'post',
headers:{'Content-Type':'application/json'},
body:JSON.stringify(content)
}).then(response=>response.json()) //response.json()是返回另一个promise
.then(data=>console.log(data))
.catch(error=>console.log(error))
2.Promise.race()=>多个异步任务是为了容错
Promise是一个容器,里面保存着未来某个时间点才会结束的操作。
由于fetch暂不支持超时控制,造成了流量的浪费,因此在这里使用Promise.race()对两个promise请求合并。
执行两个异步任务,一个去真实请求,一个超时报错,哪个先返回 获取哪个。
另外一个会继续执行,但是结果会被丢弃
3.job1.then(job2).then(job3).catch(handleError)
有若干个异步任务,需要先做任务1,如果成功后再做任务2,如果成功后再做任务3
任何任务失败则不再继续 并执行错误处理函数。
当promise被明确拒绝,会发生拒绝,但是如果在构造函数回调中引发的错误,会隐式拒绝,因此promise链的尾部必须有个catch接着
之所以需要用两个then,是因为fetch方法不关心ajax是否成功,只关心从服务器发送请求和接受响应。
因此第一个then是看ajax是否成功,第二个then是看具体的错误是什么,因为只有response.json.status才知道具体的错误。
ES6 promise 封装http请求的更多相关文章
- React Native 网络请求封装:使用Promise封装fetch请求
最近公司使用React作为前端框架,使用了异步请求访问,这里做下总结: React Native中虽然也内置了XMLHttpRequest 网络请求API(也就是俗称的ajax),但XMLHttpRe ...
- 微信小程序开发——使用promise封装异步请求
前言: 有在学vue的网友问如何封装网络请求,这里以正在写的小程序为例,做一个小程序的请求封装. 关于小程序发起 HTTPS 网络请求的Api,详情可以参考官方文档:wx.request(Object ...
- promise封装微信小程序的request
1.在utils下创建一个 request.js文件,然后将方法导出 const app = getApp(); //使用promise封装request请求 const POST = (url, p ...
- 微信小程序Http高级封装 es6 promise
公司突然要开放微信小程序,持续蒙蔽的我还不知道小程序是个什么玩意. 于是上网查了一下,就开始着手开发..... 首先开发客户端的东西,都有个共同点,那就是 数据请求! 看了下小程序的请求方式大概和a ...
- 微信小程序ES6方法Promise封装接口
为何要封装接口? 有小程序开发的经验者,相信对微信API Request很熟悉了.对接接口时,有大部分的开发者都是直接调用request方法,去请求后台接口并渲染数据.诚然,直接使用api发起请求对接 ...
- 【前端开发】】ES6属性promise封装js动画
如下是我写的demo源码: 可以直接复制用浏览器打开看到效果哦: <!DOCTYPE html> <html> <head> <meta charset=&q ...
- 小程序-你不得不知的Promise封装请求
放在开头 这是一个小程序的轮播图,但是为我们在请求api数据时,将请求wx.request代码封装调用 效果展示 代码篇 页面wxml 这里需要注意的是我们设置swiper和image标签时,有默认属 ...
- Es6 Promise 用法详解
Promise是什么?? 打印出来看看 console.dir(Promise) 这么一看就明白了,Promise是一个构造函数,自己身上有all.reject.resolve这几个眼熟的方 ...
- jsonp的原理介绍及Promise封装
什么叫jsonp? jsonp是json with padding(填充式json或参数式json)的简写,是通过ajax请求跨域接口,获取数据的新实现方式 jsonp的实现原理: 动态创建scrip ...
随机推荐
- css实现字母或数字强制换行
//换行white-space:normal;word-break:break-all;word-wrap: break-word; 相关属性white-space: normal|pre|nowra ...
- 2016.9.15初中部上午NOIP普及组比赛总结
2016.9.15初中部上午NOIP普及组比赛总结 2016.09.15[初中部 NOIP普及组 ]模拟赛 又翻车了!表示时超和空超很可恨! 进度 比赛:AC+0+0+20=120 改题:AC+80+ ...
- 廖雪峰Java12maven基础-1maven入门-2依赖管理
maven 如果我们的项目依赖第三方的jar包: Commons Logging发布的jar包在那里下载? 使用Log4j需要哪些jar包 其他依赖:junit,Javamail,MySQL驱动... ...
- AMPQ
AMPQ AMQP,即Advanced Message Queuing Protocol,高级消息队列协议, 是`应用层协议的一个开放标准,为面向消息的中间件设计`. 由于AMQP是一个网络协议,所以 ...
- sql.xml where ids in的写法
<if test="iSurfaceTypeArray != null"> AND b.i_SurfaceType in <!-- 根据外观检查查询 --> ...
- safari跨域cookie的问题
最近做了一个项目,是将自己公司的H5页面嵌入到其他公司的pc和移动端,采用的方案是iframe,跨域数据传输用的postMessage,最后在联调过程中发现iPhone的微信中无法打开,在 Setti ...
- 如何在window和mac下查找数据库
1. mac 下终端使用步骤 cd /Applications/xampp/bin ./mysql -u root 2. window CMD命令中执行步骤 D: cd D:/xampp/mysql ...
- PHP-property_exists()函数
直接看代码 <?php header('content-type:text/html;charset=utf-8'); //property_exists说明 class A{ public $ ...
- django中的request对象
Request 我们知道当URLconf文件匹配到用户输入的路径后,会调用对应的view函数,并将 HttpRequest对象 作为第一个参数传入该函数. 我们来看一看这个HttpRequest对 ...
- <每日一题>题目19:简单的程序执行效率面试题
# 将下面的函数按照执行效率高低排序.它们都接受由0至1之间的数字构成的列表作为输入.这个列表可以很长.一个输入列表的示例如下:[random.random() for i in range(1000 ...