Trik Async dalam JavaScript untuk Kod Lebih Lancar

Semasa kami mengemudi dunia JavaScript, memahami sifat tak segeraknya adalah penting untuk membina aplikasi web responsif. Walaupun Janji adalah alat yang hebat, ia sering gagal untuk senario yang lebih kompleks. Dalam siaran ini, kami akan menyelidiki corak tak segerak lanjutan yang akan meningkatkan kemahiran JavaScript anda.

Penjana dan Hasil untuk Kawalan Async

Penjana ialah jenis fungsi khas yang membolehkan anda menjeda pelaksanaan dan mengembalikan hasil perantaraan. Ini amat berguna untuk mengawal aliran tak segerak.

Contoh:

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 Iterators

Async Iterators mendayakan pengendalian aliran data tak segerak dengan cekap, membolehkan anda memproses data apabila ia tiba tanpa menyekat urutan utama.

Contoh:

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

Selaras dengan Promise.allSettled

Promise.allSettled membolehkan anda menunggu semua Janji diselesaikan, tanpa mengira keputusannya (diselesaikan atau ditolak). Ini berguna untuk senario di mana anda ingin melakukan tindakan berdasarkan hasil berbilang operasi tak segerak.

Contoh:

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

Pekerja Web

Pekerja Web menyediakan cara untuk menjalankan JavaScript dalam urutan latar belakang, membolehkan tugas intensif CPU dikendalikan tanpa membekukan UI. Ini penting untuk mengekalkan pengalaman pengguna yang lancar dalam aplikasi anda.

Contoh:

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

Pada penghujungnya

Menguasai corak tak segerak lanjutan ini akan memperkasakan anda untuk menulis kod JavaScript yang lebih cekap, boleh diselenggara dan responsif. Dengan menggabungkan Generators, Async Iterators, Promise.allSettled dan Web Workers, anda boleh meningkatkan prestasi dan pengalaman pengguna aplikasi anda dengan ketara. Hayati teknik ini dan saksikan kemahiran JavaScript anda melonjak!

Tapak web peribadi saya: https://shafayet.zya.me

Meme untuk anda?

Atas ialah kandungan terperinci Trik Async dalam JavaScript untuk Kod Lebih Lancar. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!