不知有多少个异步任务,但当有任务的时候就需要按顺序执行,js异步任务列队实现

本例子适用于以下环境:

  1. 当你有一堆异步任务需要按顺序执行的时候;
  2. 当你不知道有多少个异步任务需要按顺序执行的时候;
    举例场景:
    有一个扫描仪,上面放有N个待扫描文件(其中有特殊文件需要分组);每次扫描完成后,扫描仪会将数据返回,且返回数据需要调用接口才可以识别处理哪个是特殊文件用于分组。特殊文件后面的文件就属于当前这个组的;
    图来表述:

不知有多少个异步任务,但当有任务的时候就需要按顺序执行,js异步任务列队实现_第1张图片


class AsyncTask {
    constructor() {
        this.queue = []; // 列队请求数组[promise]
        this.resolve = (res) =>{} // 列队每次请求结束后回调函数
        this.running = false; // 当前列队是否正在执行任务
    }
    
    /**
     * 触发异步请求,加入任务队列
     * 当队列中任务数大于0时,开始处理队列中的任务
     * @param {Promise} task 异步任务
     * @param {Array} image 影像回显列表
     */
    addQueue(task) {
        this.queue.push(task);
        if (this.queue.length > 0 && !this.running) {
            this.running = true
            this.process()
        }
    }
    process() {
        const item = this.queue.shift(); 
        if (item) {
            item.then(res => {
                this.resolve(res)
                this.process()
            })
        } else {
            this.running = false
        }
    }
}
export default new AsyncTask()

使用方法

import AsyncTask from "./asyncTask"
 // 扫描前将异步列队任务回调函数设置好
// doSomeThings是请求结束后你要做的事情
AsyncTask.resolve = this.doSomeThing;
// ajax()是你的promise请求
AsyncTask.addQueue(ajax());

你可能感兴趣的:(javascript)