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);

登入後複製