解决异步任务（例如请求）太多导致后续需要立即执行的请求挂起

本文链接：https://blog.csdn.net/qq_40818371/article/details/136873754

本文介绍了await-num-q库，用于在浏览器端限制并发异步任务数量，避免请求挂起。通过实例展示了如何导入、初始化和使用这个库，以及其提供的API功能如添加任务、运行任务和获取返回值。

摘要由CSDN通过智能技术生成

await-num-q 限数阀

介绍

这是一个用于解决异步任务数量太大需要限制异步任务数量的库，比如浏览器端一次性发送很多的请求会导致请求挂起，例如在有大量图片加载时网络不太好会导致后续其他的接口请求挂起得不到反馈，这时需要一个工具来解决同时请求图片的数量不得大于某个值，这样后续的接口请求才能正常的发送。于是此库便诞生了

下载

npm i await-num-q
# or
pnpm i await-num-q
# or
yarn i await-num-q

使用

导入

import { asyncQueue } from 'await-num-q'

初始化队列

let q = new asyncQueue(3)// 3 表示能够同时在当前队列执行的任务数量

执行

async function test(){
    async function _get(){}
    let data = await q.wait(_get) // 这样就能拿到请求的数据 且不会超过指定数量
}

api列表

export type RunFunBoj = {
    status: "wait" | "ing" | "end";
    target: Function;
    callback?: Function;
    err?: Function;
};
export declare class asyncQueue {
    #private;
    constructor(max?: number);
    /**
     * 添加任务
     * @param f 目标函数
     * @param callback 成功回调函数
     * @param err 错误回调函数
     * @returns 添加成功与否
     */
    push(f: Function, callback?: Function, err?: Function): boolean;
    /**
     * 清除运行完成的任务
     */
    clear(): void;
    /**
     * 添加并运行任务 若是没有传入函数 运行 之前传入的任务
     * @param f 目标函数
     * @param callback 成功回调函数
     * @param err 错误回调函数
     * @returns 添加成功与否
     */
    run(f?: Function, callback?: Function, err?: Function): Promise<void>;
    /**
     * 异步运行并得到返回值
     * @param fun 目标函数
     * @returns
     */
    wait(fun: (...arg: any) => any): Promise<any>;
}