JavaScript 中的异步技巧使代码更流畅-js教程-PHP中文网

JavaScript 中的异步技巧使代码更流畅

Mary-Kate Olsen

发布： 2024-10-22 14:28:02

原创

527 人浏览过

当我们探索 JavaScript 世界时，了解其异步特性对于构建响应式 Web 应用程序至关重要。虽然 Promise 是一个很棒的工具，但它们通常无法满足更复杂的场景。在这篇文章中，我们将深入研究高级异步模式，这将提高您的 JavaScript 技能。

异步控制的生成器和产量

生成器是一种特殊类型的函数，允许您暂停执行并返回中间结果。这对于控制异步流特别有用。

示例：

function* asyncGenerator() {
    const data1 = yield fetchData1(); // Pause until data1 is available
    const data2 = yield fetchData2(data1); // Pause until data2 is available
    return processData(data1, data2); // Final processing
}

const generator = asyncGenerator();

async function handleAsync() {
    const result1 = await generator.next(); // Fetch first data
    const result2 = await generator.next(result1.value); // Fetch second data
    const finalResult = await generator.next(result2.value); // Process final result
    console.log(finalResult.value);
}

handleAsync();

登录后复制

异步迭代器

异步迭代器能够有效地处理异步数据流，允许您在数据到达时对其进行处理，而不会阻塞主线程。

示例：

async function* fetchAPIData(url) {
    const response = await fetch(url);
    const data = await response.json();

    for (const item of data) {
        yield item; // Yield each item as it arrives
    }
}

async function processAPIData() {
    for await (const item of fetchAPIData('https://api.example.com/data')) {
        console.log(item); // Process each item as it comes
    }
}

processAPIData();

登录后复制

与 Promise.allSettled 的并发

Promise.allSettled 允许您等待所有 Promise 解决，无论其结果如何（解决或拒绝）。这对于您想要根据多个异步操作的结果执行操作的场景非常有用。

示例：

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

Promise.allSettled([promise1, promise2, promise3]).then((results) => {
    results.forEach((result) => {
        if (result.status === 'fulfilled') {
            console.log('Result:', result.value);
        } else {
            console.error('Error:', result.reason);
        }
    });
});

登录后复制

网络工作者

Web Workers 提供了一种在后台线程中运行 JavaScript 的方法，允许在不冻结 UI 的情况下处理 CPU 密集型任务。这对于在应用程序中保持流畅的用户体验至关重要。

示例：

// worker.js
self.onmessage = function(e) {
    const result = heavyComputation(e.data); // Perform heavy computation
    self.postMessage(result); // Send the result back to the main thread
};

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

worker.onmessage = function(e) {
    console.log('Result from worker:', e.data);
};

// Start the worker with data
worker.postMessage(inputData);

登录后复制