コードをよりスムーズにするための JavaScript の非同期トリック

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 ワーカーは、バックグラウンド スレッドで 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);

最後に

これらの高度な非同期パターンをマスターすると、より効率的で保守しやすく、応答性の高い JavaScript コードを作成できるようになります。ジェネレーター、非同期イテレーター、Promise.allSettled、および Web ワーカーを組み込むことにより、アプリケーションのパフォーマンスとユーザー エクスペリエンスを大幅に向上させることができます。これらのテクニックを取り入れて、JavaScript スキルが向上するのを見てください!

---

私の個人ウェブサイト: https://shafayet.zya.me

---

あなたのためのミームですか?

以上がコードをよりスムーズにするための JavaScript の非同期トリックの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。