JavaScript异步编程技巧，让你的代码更流畅-原创手记-慕课网

当我们穿梭于 JavaScript 的世界时，了解它的异步特性对于开发响应式 web 应用程序来说非常重要。Promise 是一个很好的工具，但在更复杂的场景中往往显得有些无力。在这篇文章里，我们将一起深入了解高级异步模式，从而提升你的 JavaScript 技巧。

用于异步控制的生成器和 yield 关键词

生成器是一种特殊的函数类型，可以让执行暂停并返回中间结果。这在管理异步流程时特别有用。

例子:

    function* asyncGenerator() {
        const data1 = yield fetchData1(); // 暂停直到 data1 可获取
        const data2 = yield fetchData2(data1); // 暂停直到 data2 可获取
        return processData(data1, data2); // 最终处理
    }

    const asyncGenerator = asyncGenerator();

    async function handleAsync() {
        const result1 = await asyncGenerator.next(); // 获取第一个结果
        const result2 = await asyncGenerator.next(result1.value); // 获取第二个结果
        const finalResult = await asyncGenerator.next(result2.value); // 处理最终数据
        console.log(finalResult.value);
    }

    handleAsync();

全屏进入全屏退出

异步迭代（Async Iterators）

异步迭代器（Async Iterators）能够高效地处理异步数据流，让你可以在数据到来时处理而不阻塞主要线程。

例子:

    async function* fetchAPIData(url) {
        const data = await response.json(); // 解析响应为JSON
        for (const item of data) {
            yield item; // 逐项返回数据
        }
    }

    async function processAPIData() {
        for await (const item of fetchAPIData('https://api.example.com/data')) {
            console.log(item); // 逐个处理数据项
        }
    }

    processAPIData();

点击此处全屏模式点击此处退出全屏

使用 Promise.allSettled 实现并发

Promise.allSettled 允许你等待所有 Promise 完成，不论这些 Promise 是成功解决还是失败解决。这在你需要基于多个异步任务的结果进行操作时特别有用。

例子：

    const promise1 = Promise.resolve(1);
    const promise2 = Promise.reject(new Error('出错'));
    const promise3 = Promise.resolve(3);

    Promise.allSettled([promise1, promise2, promise3]).then((results) => {
        results.forEach((result) => {
            if (result.status === 'fulfilled') {
                console.log('输出:', result.value);
            } else {
                console.error('错误信息:', result.reason);
            }
        });
    });

全屏，退出全屏

网页工作者

Web Workers 提供了一种在后台线程中运行 JavaScript 的途径，从而使 CPU 密集型任务（需要大量计算资源的任务）不会导致 UI 冻结。这对于确保应用程序的用户体验流畅至关重要。

例子:

    // worker.js
    self.onmessage = function(e) {
        const result = heavyComputation(e.data); // 执行繁重的计算
        self.postMessage(result); // 将结果发送回主线程
    };

    // main.js
    const worker = new Worker('worker.js');

    worker.onmessage = function(e) {
        console.log('来自 worker 的结果:', e.data);
    };

    // 用数据启动 worker
    worker.postMessage(inputData);

切换到全屏模式或退出全屏

到最后

掌握这些高级异步模式将使你能够编写更高效、更易维护且响应更快的 JavaScript 代码。通过采用生成器和异步迭代器，以及使用 Promise.allSettled 和 Web Workers，你可以显著提升你应用的性能和用户体验。拥抱这些技术，你的 JavaScript 技能将大幅提升。

此处省略内容

我的个人主页：https://shafayet.zya.me，欢迎访问！

给你个梗😉