今天研究了一下同事封装的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. css实现字母或数字强制换行

    //换行white-space:normal;word-break:break-all;word-wrap: break-word; 相关属性white-space: normal|pre|nowra ...

  2. 2016.9.15初中部上午NOIP普及组比赛总结

    2016.9.15初中部上午NOIP普及组比赛总结 2016.09.15[初中部 NOIP普及组 ]模拟赛 又翻车了!表示时超和空超很可恨! 进度 比赛:AC+0+0+20=120 改题:AC+80+ ...

  3. 廖雪峰Java12maven基础-1maven入门-2依赖管理

    maven 如果我们的项目依赖第三方的jar包: Commons Logging发布的jar包在那里下载? 使用Log4j需要哪些jar包 其他依赖:junit,Javamail,MySQL驱动... ...

  4. AMPQ

    AMPQ AMQP,即Advanced Message Queuing Protocol,高级消息队列协议, 是`应用层协议的一个开放标准,为面向消息的中间件设计`. 由于AMQP是一个网络协议,所以 ...

  5. sql.xml where ids in的写法

    <if test="iSurfaceTypeArray != null"> AND b.i_SurfaceType in <!-- 根据外观检查查询 --> ...

  6. safari跨域cookie的问题

    最近做了一个项目,是将自己公司的H5页面嵌入到其他公司的pc和移动端,采用的方案是iframe,跨域数据传输用的postMessage,最后在联调过程中发现iPhone的微信中无法打开,在 Setti ...

  7. 如何在window和mac下查找数据库

    1. mac 下终端使用步骤 cd /Applications/xampp/bin ./mysql -u root 2. window CMD命令中执行步骤 D: cd  D:/xampp/mysql ...

  8. PHP-property_exists()函数

    直接看代码 <?php header('content-type:text/html;charset=utf-8'); //property_exists说明 class A{ public $ ...

  9. django中的request对象

    Request 我们知道当URLconf文件匹配到用户输入的路径后,会调用对应的view函数,并将  HttpRequest对象  作为第一个参数传入该函数. 我们来看一看这个HttpRequest对 ...

  10. <每日一题>题目19:简单的程序执行效率面试题

    # 将下面的函数按照执行效率高低排序.它们都接受由0至1之间的数字构成的列表作为输入.这个列表可以很长.一个输入列表的示例如下:[random.random() for i in range(1000 ...