背景
来自一道同事的面试题,如下:
有一个 函数数组,里面可能是同步,也可能是异步的
Promise
,怎么保持顺序执行并且让前一个函数的返回值作为后一个函数执行的参数。
理解了下就是一个异步函数数组要顺序执行,当时想了下答案,基于 Promise
的链式调用,所以没直接递归而是通过 while
循环来实现,代码大致如下:
1 | // 任务列表 |
输出结果: 1 2 4 7 11 16
vue resource / axios 拦截器实现
这里和拦截器的实现有什么关系呢 ?
后面想为什么第一思维会这样去解题,明显和以前看
vue resource
的源码有关系,这里和在拦截器代码实现是如出一辙。
想想实现拦截器是不是也是这样,就是在你的http请求前或者是response返回数据之后对你的请求参数或者返回数据做加工处理,如下图:
graph LR start(调用http方法)--> ReqInterceptors(request拦截器) requestEnd(请求成功) --> response response(返回数据) --> response数据 subgraph Request ReqInterceptors-->sendRequest(sendRequest发送请求Promise) sendRequest--> requestEnd end subgraph Response response数据--> response拦截器 end
上面整个流程连起来看,从 request
到 response
是不是就是和最开始的题目是一样的,一个同步异步混合的任务队列需要依次执行。
提示:实际场景中上图 request拦截器
response拦截器
可以添加多次
这里整理了基于
vue resource
的一个http库,移除对Vue特殊处理的部分代码,添加了Service
类来封装 http请求,对源码做了较为详细的注释,源码地址:lljj/http
axios 取消请求
聊到异步请求那必须想到 axios
,顺便回忆了下取消请求,首先 Promise
本生是并不支持取消的,曾经有过提案也没通过,这里不做延伸。
另外关于取消请求,会想到 fetch
方法支持通过 AbortController 来做请求取消,axios
的取消使用方法和这里使用类似,如果基于 polyfill
的实现应该也是一个原理了。
先看使用方法:
1 | // 调用 CancelToken.source() 返回一个对象包含 token 和 cancel 两个成员 |
axios
核心实现如下:
1 | class CancelToken { |
这里的取消请求实现还是挺机智的
基于Promise状态机应用的一些联想
如上 Promise
对这样需要关注状态的场景,是一种很方便的解决方案
比如:
一个基于 WebSocket
的发送消息,在发送消息之前可能并未成功连接服务,那常规的方法,如果未成功建立连接前用户点击了发送消息,通过一个队列来保存未连接时发送的消息,连接之后再去检查队列,发送那些连接前的消息。
如果使用 Promise
那可以变得更加简单,本质上 Promise
的实现也是如此,下次手写一个 a+ 规范的 Promise
吧(整理了一些手写Promise代码)
1 | export default class Msg { |
例子只是伪代码,现实场景会更加复杂,需要考虑心跳包,断开重连等等…