今天研究了一下同事封装的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请求的更多相关文章

  1. React Native 网络请求封装:使用Promise封装fetch请求

    最近公司使用React作为前端框架,使用了异步请求访问,这里做下总结: React Native中虽然也内置了XMLHttpRequest 网络请求API(也就是俗称的ajax),但XMLHttpRe ...

  2. 微信小程序开发——使用promise封装异步请求

    前言: 有在学vue的网友问如何封装网络请求,这里以正在写的小程序为例,做一个小程序的请求封装. 关于小程序发起 HTTPS 网络请求的Api,详情可以参考官方文档:wx.request(Object ...

  3. promise封装微信小程序的request

    1.在utils下创建一个 request.js文件,然后将方法导出 const app = getApp(); //使用promise封装request请求 const POST = (url, p ...

  4. 微信小程序Http高级封装 es6 promise

    公司突然要开放微信小程序,持续蒙蔽的我还不知道小程序是个什么玩意. 于是上网查了一下,就开始着手开发..... 首先开发客户端的东西,都有个共同点,那就是  数据请求! 看了下小程序的请求方式大概和a ...

  5. 微信小程序ES6方法Promise封装接口

    为何要封装接口? 有小程序开发的经验者,相信对微信API Request很熟悉了.对接接口时,有大部分的开发者都是直接调用request方法,去请求后台接口并渲染数据.诚然,直接使用api发起请求对接 ...

  6. 【前端开发】】ES6属性promise封装js动画

    如下是我写的demo源码: 可以直接复制用浏览器打开看到效果哦: <!DOCTYPE html> <html> <head> <meta charset=&q ...

  7. 小程序-你不得不知的Promise封装请求

    放在开头 这是一个小程序的轮播图,但是为我们在请求api数据时,将请求wx.request代码封装调用 效果展示 代码篇 页面wxml 这里需要注意的是我们设置swiper和image标签时,有默认属 ...

  8. Es6 Promise 用法详解

     Promise是什么??    打印出来看看  console.dir(Promise) 这么一看就明白了,Promise是一个构造函数,自己身上有all.reject.resolve这几个眼熟的方 ...

  9. jsonp的原理介绍及Promise封装

    什么叫jsonp? jsonp是json with padding(填充式json或参数式json)的简写,是通过ajax请求跨域接口,获取数据的新实现方式 jsonp的实现原理: 动态创建scrip ...

随机推荐

  1. github和gitlab仓库一起使用

    github是网络公有代码仓库,一般用于私人代码托管,而gitlab一般是企业搭建的内部代码仓库.工作期间,我们都会同时用到这两个仓库.可公司邮箱与个人邮箱是不同的,由此产生的 SSH key 也是不 ...

  2. Django之ORM查询优化

    目录 only 和 defer select_related 和 prefetch_related ORM字段参数 choices res = models.Book.objects.all() # ...

  3. LUOGU P1337 [JSOI2004]平衡点 / 吊打XXX(模拟退火)

    传送门 解题思路 学习了一下玄学算法--模拟退火,首先要求平衡处,也就是求势能最小的地方,就是求这个点到所有点的距离*重量最小.剩下的几乎是模拟退火的板子了. #include<iostream ...

  4. 关于SqlServer的内连接,外链接以及left join,right join之间的一些问题与区别。

    就我个人理解通俗点来说内连接和外连接区别: 内连接 inner join或者 join (被默认为内连接) : 内连接的原理是:先进行语句判断和运行得出结果,然后在将结果连接起来,一般是横着连接. 外 ...

  5. 2018CCPC吉林赛区 | 部分题解 (HDU6555 HDU6556 HDU6559 HDU6561)

    // 杭电上的重现赛:http://acm.hdu.edu.cn/contests/contest_show.php?cid=867 // 杭电6555~6566可交题 A - The Fool 题目 ...

  6. 解决Couldn't resolve host 'mirrorlist.centos.org

    这个错误引起主要是因为环境读取不到yun引起的可以考虑/etc/sysconfig/network-scripts/ifcfg-eth0 配置出错导致网络不通.或者/etc/resolv.conf的D ...

  7. HZOI20190803 B题

    题目:https://www.cnblogs.com/Juve/articles/11295333.html 话说这题方法挺多 40分:暴力 65:莫队,你会T得飞起 我考场上没打出带修莫队,没有修改 ...

  8. fileinput使用心得

    下咋以及一些具体使用过程就不叙述了,简单说一下使用时候需要注意的几点 1.在js中封装好的fileinput函数 /* * 初始化fileInput控件(第一次初始化) * type 不同类别 * i ...

  9. thinkphp+ajax 实现点击加载更多数据

    https://blog.csdn.net/a898712940/article/details/78545599?utm_source=blogxgwz8 适用范围:thinkphp3.2和thin ...

  10. etcd 研究研究

    先记录参考信息:etcd 场景https://blog.csdn.net/bbwangj/article/details/82584988 etcd 集群部署https://www.jianshu.c ...