javascript的async/await 7种高级用法场景分享

javascript的async/await 7种高级用法场景分享

JavaScript的异步编程已经从回调(Callback)演进到Promise，再到如今广泛使用的async/await语法。async/await语不仅让异步代码更加简洁，而且更贴近同步代码的逻辑与结构，大大增强了代码的可读性与可维护性。在掌握了基础用法之后，下面将介绍一些高级用法，以便充分利用async/await实现更复杂的异步流程控制。

一、async/await与高阶函数

当需要对数组中的元素执行异步操作时，可结合async/await与数组的高阶函数（如map、filter等）。

function delay(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
}

// 示例
async function isOddNumber(n) {
    await delay(1000); // 模拟异步操作
    return n % 2 !== 0;
}

async function asyncFilter(array, predicate) {
    const results = await Promise.all(array.map(predicate));
    return array.filter((_value, index) => results[index]);
}

async function filterOddNumbers(numbers) {
    return asyncFilter(numbers, isOddNumber);
}

filterOddNumbers([1, 2, 3, 4, 5]).then(console.log); // 输出: [1, 3, 5]

二、控制并发数

在处理诸如文件上传等场景时，可能需要限制同时进行的异步操作数量以避免系统资源耗尽。

async function asyncPool(poolLimit, array, iteratorFn) {
    const result = [];
    const executing = [];

    for (const item of array) {
        const p = Promise.resolve().then(() => iteratorFn(item, array));
        result.push(p);

        if (poolLimit <= array.length) {
            const e = p.then(() => executing.splice(executing.indexOf(e), 1));
            executing.push(e);
            if (executing.length >= poolLimit) {
                await Promise.race(executing);
            }
        }
    }

    return Promise.all(result);
}
function delay(ms) {
    return new Prom...

点击查看剩余70%