连续同源异步操作队列-唐霜

问题的发现

来自同源的多个异步操作可能引起异步冲突问转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】题，特别是在网络请求时。同源操作产生了两【原创不易，请尊重版权】原创内容，盗版必究。个ajax请求，它们的请求结果将用于渲染【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。同一个区域，然而由于网络问题，先发出的请本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。求后返回，导致最终得到的界面是错误的。

【本文首发于唐霜的博客】【本文受版权保护】【未经授权禁止转载】

转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net

但是在现实条件下，异步操作并非都有can本文作者：唐霜，转载请注明出处。【作者：唐霜】cel操作。js原生的Promise没有【作者：唐霜】未经授权，禁止复制转载。，原生的fetch基于Promise也没著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net有。基于Promise的很多工具都没有c本文作者：唐霜，转载请注明出处。【作者：唐霜】ancel操作。这种情况下怎么解决这个问转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。题呢？

【本文首发于唐霜的博客】【转载请注明来源】【关注微信公众号：wwwtangshuangnet】【未经授权禁止转载】

转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。

问题的思考

如何来判断是否要丢掉它的回调？我们可以创【本文受版权保护】【原创不易，请尊重版权】建一个队列，每次产生一个异步操作时，就将转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。它加入到队列中，当队列中存在操作对象时，未经授权，禁止复制转载。【转载请注明来源】每次只取最后一个，等待它推送结果，执行它【本文受版权保护】【未经授权禁止转载】的回调，排在它前面的操作全部丢弃掉。

基于这样的想法，我写了一个工具defer著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。er-queue。它为异步操作创建队列，【关注微信公众号：wwwtangshuangnet】【本文首发于唐霜的博客】并根据不同的场景实现不同的队列操作形式。【作者：唐霜】【未经授权禁止转载】你可以通过这里阅读它的源码和文档。它提供了4种可供选择的场景：

【访问 www.tangshuang.net 获取更多精彩内容】【原创不易，请尊重版权】

并联

【转载请注明来源】原创内容，盗版必究。【原创不易，请尊重版权】

异步操作进入队列的时候立即开始执行，它们【访问 www.tangshuang.net 获取更多精彩内容】【转载请注明来源】的回调将按照它们进入队列的顺序执行。

转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】

【未经授权禁止转载】转载请注明出处：www.tangshuang.net【本文受版权保护】

这个图中有这些元素：

时间轴

【转载请注明来源】

本文作者：唐霜，转载请注明出处。

圆圈：一个异步操作被push进队列

【本文受版权保护】

本文作者：唐霜，转载请注明出处。

向下箭头：队列中开始执行某个异步操作

原创内容，盗版必究。

【本文首发于唐霜的博客】

转载请注明出处：www.tangshuang.net

【关注微信公众号：wwwtangshuangnet】

虚线：执行顺序（执行流）

著作权归作者所有，禁止商业用途转载。

本文版权归作者所有，未经授权不得转载。

未经授权，禁止复制转载。

方框：每个异步操作的回调

本文作者：唐霜，转载请注明出处。

【本文受版权保护】

竖线：队列周期（从开始到停止的过程）分割【原创不易，请尊重版权】未经授权，禁止复制转载。线

著作权归作者所有，禁止商业用途转载。

未经授权，禁止复制转载。

【本文受版权保护】

上图表现的是，1-4这4个异步操作在不同【本文受版权保护】【关注微信公众号：wwwtangshuangnet】的事件点被加入到队列中。它们在一个周期内【本文受版权保护】【未经授权禁止转载】，也就是从1开始执行，到队列中所有的异步著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net操作执行完毕，进入停滞状态。1-4这些操原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。作，一进入队列就开始执行。它们执行完之后【转载请注明来源】【未经授权禁止转载】，就会告知队列执行完毕状态，回调就会执行【原创内容，转载请注明出处】【原创内容，转载请注明出处】。但是由于回调一定是按照异步操作进入队列【版权所有】唐霜 www.tangshuang.net【本文受版权保护】的顺序执行的，因此，即使4已经完成了，但【版权所有，侵权必究】【关注微信公众号：wwwtangshuangnet】它的回调也必须等到3结束后才会执行。

【本文首发于唐霜的博客】本文版权归作者所有，未经授权不得转载。

本文作者：唐霜，转载请注明出处。【原创内容，转载请注明出处】【转载请注明来源】

串联

本文版权归作者所有，未经授权不得转载。【本文受版权保护】【原创内容，转载请注明出处】

异步操作进入队列后并不立即执行，它从队列【未经授权禁止转载】【未经授权禁止转载】中取出第一个，执行，等待这个异步操作完成【作者：唐霜】著作权归作者所有，禁止商业用途转载。（成功或失败都算完成）并执行它的回调，然本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。后再取出下一个，继续执行。

上图表现的是，1-4这4个异步操作，进入转载请注明出处：www.tangshuang.net【原创不易，请尊重版权】队列后，按照顺序依次执行。但是，在一个周【转载请注明来源】本文作者：唐霜，转载请注明出处。期内，只有1是立即执行的，其他操作必须等【原创不易，请尊重版权】本文版权归作者所有，未经授权不得转载。到上一个操作结束（promise res本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshuangnet】olved或rejected）之后，才会本文作者：唐霜，转载请注明出处。【原创不易，请尊重版权】开始执行。

尾调

【未经授权禁止转载】本文版权归作者所有，未经授权不得转载。【本文受版权保护】未经授权，禁止复制转载。

著作权归作者所有，禁止商业用途转载。【未经授权禁止转载】【作者：唐霜】

这张图表现的是，1-4这个4个异步操作被著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net按顺序加入到队列中，但是，在一个周期内，转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。只有4（最后一个）被执行。1-3全部被丢【版权所有，侵权必究】【版权所有】唐霜 www.tangshuang.net掉了。你可能会问，假如4进入队列的时候，【关注微信公众号：wwwtangshuangnet】【作者：唐霜】1已经在执行了怎么办？答案是，1会被丢掉【原创内容，转载请注明出处】本文作者：唐霜，转载请注明出处。，只要在一个周期内，只会有一个执行的回调【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。会被执行。也就是说，假如4开始执行之后，【本文受版权保护】【作者：唐霜】突然5插入进来了，那么4会被直接丢掉，这【作者：唐霜】本文版权归作者所有，未经授权不得转载。一个周期以最后一个回调函数被执行而结束。

【未经授权禁止转载】原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。

连续

异步操作进入队列后并不立即执行，它从队列转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。中取出第一个，执行，等待这个异步操作完成【本文受版权保护】未经授权，禁止复制转载。（成功或失败都算完成）并执行它的回调，之著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。后取出最新的一个执行，执行完之后再看队列转载请注明出处：www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】中是否有新的，如果有新的，再取出最新的一本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。个，继续执行，如此往复下去。

【原创不易，请尊重版权】未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshuangnet】

未经授权，禁止复制转载。【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。

这幅图表面的是一种连续不断的执行队列的模【版权所有】唐霜 www.tangshuang.net【本文受版权保护】式，当1-4被push进队列之后，1被执【原创内容，转载请注明出处】【版权所有】唐霜 www.tangshuang.net行，2-4被丢掉。当1完成之后，检查队列转载请注明出处：www.tangshuang.net【版权所有，侵权必究】是否加入了新的异步操作，如果检查到5-6本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。，那么取6进行执行，把5丢掉。进入后续过【版权所有】唐霜 www.tangshuang.net【原创不易，请尊重版权】程后，感觉上和尾调非常像，但是，尾调是在【未经授权禁止转载】【版权所有】唐霜 www.tangshuang.net一个周期内，只会执行最后一个回调，而连续【本文首发于唐霜的博客】【转载请注明来源】不是，它会不断的检查队列是否已经被执行完著作权归作者所有，禁止商业用途转载。【原创内容，转载请注明出处】，如果没有，那么就会执行一个类似尾调的过原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.net程，这个过程结束，又会再做一次。队列开始【作者：唐霜】本文版权归作者所有，未经授权不得转载。的时候，取第一个异步操作执行，当第一个操【原创内容，转载请注明出处】【未经授权禁止转载】作结束后，后面之后去取最后一个执行。这些著作权归作者所有，禁止商业用途转载。【未经授权禁止转载】执行之间是串联关系，只有正在执行的异步操本文作者：唐霜，转载请注明出处。【本文受版权保护】作已经完成的情况下，新的操作才会被执行。【关注微信公众号：wwwtangshuangnet】【本文受版权保护】这是一种比较奇葩的场景，但是它可以解决一【版权所有，侵权必究】【版权所有】唐霜 www.tangshuang.net些需要连续不断做某些事情的应用。

【转载请注明来源】【本文受版权保护】转载请注明出处：www.tangshuang.net

问题的解决

基于上述的思考，我最终发布了defere转载请注明出处：www.tangshuang.net【本文首发于唐霜的博客】r-queue，你可以通过npm安装这个【版权所有，侵权必究】原创内容，盗版必究。包，在自己的项目中使用它。它的操作模式超【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。级简单，首先实例化一个queue对象，然著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。后往这个queue push异步操作，异【关注微信公众号：wwwtangshuangnet】【原创内容，转载请注明出处】步操作被装在一个函数中被push进队列，【原创内容，转载请注明出处】【版权所有，侵权必究】它的回调函数一定是按照push的顺序执行【访问 www.tangshuang.net 获取更多精彩内容】本文作者：唐霜，转载请注明出处。。

import DefererQueue from 'deferer-queue'

const queue = new DefererQueue()

const defer1 = () => new Promise((resolve, reject) => { ... })
const defer2 = () => axios.get(...)
const defer3 = async () => ...

queue.push(defer1).then(() => { console.log(1) })
queue.push(defer2).then(() => { console.log(2) })
queue.push(defer3).then(() => { console.log(3) })

著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。【原创不易，请尊重版权】

const queue = new DefererQueue({
  mode: 'switch',
})

其他的用法一样。这样，你的队列就会按照“【访问 www.tangshuang.net 获取更多精彩内容】未经授权，禁止复制转载。尾调”的模式运行。

【本文首发于唐霜的博客】【本文受版权保护】转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】

原创内容，盗版必究。原创内容，盗版必究。【版权所有，侵权必究】【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.net【本文首发于唐霜的博客】未经授权，禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】本文作者：唐霜，转载请注明出处。【本文受版权保护】未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.net【本文受版权保护】【关注微信公众号：wwwtangshuangnet】【未经授权禁止转载】【访问 www.tangshuang.net 获取更多精彩内容】本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。【本文受版权保护】【转载请注明来源】【转载请注明来源】转载请注明出处：www.tangshuang.net【未经授权禁止转载】【本文受版权保护】【未经授权禁止转载】【本文首发于唐霜的博客】本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。

唐霜

连续同源异步操作队列

问题的发现

问题的思考

问题的解决

声明

关于

生态