Async dan Tunggu Dalam JavaScript

Pengenalan kepada JavaScript Asynchronous

JavaScript adalah satu benang, bermakna ia hanya boleh melaksanakan satu tugas pada satu masa. Untuk mengendalikan berbilang tugas, terutamanya operasi I/O seperti permintaan API atau pembacaan fail, JavaScript menggunakan pengaturcaraan tak segerak. Ini membolehkan tugasan lain terus berjalan sementara menunggu selesainya operasi jangka panjang.

Fungsi Panggilan Balik

Pada mulanya, tugas tak segerak dalam JavaScript dikendalikan menggunakan fungsi panggil balik. Panggilan balik ialah fungsi yang dihantar ke fungsi lain sebagai hujah, yang kemudiannya dilaksanakan selepas selesai operasi.

Contoh:

function fetchData(callback) {
    setTimeout(() => {
        callback('Data fetched');
    }, 2000);
}

fetchData((message) => {
    console.log(message);
});

Janji

Janji diperkenalkan untuk mengendalikan operasi tak segerak dengan lebih berkesan. Janji mewakili nilai yang mungkin tersedia sekarang, atau pada masa hadapan, atau tidak pernah.

Contoh:

let promise = new [Promise]((resolve, reject) => {
    setTimeout(() => {
        resolve('Data fetched');
    }, 2000);
});

promise.then((message) => {
    console.log(message);
}).catch((error) => {
    console.error(error);
});

Async/Tunggu

Async/Await ialah gula sintaktik yang dibina di atas Promises, menjadikan kod tak segerak kelihatan dan berkelakuan seperti kod segerak. Ini menjadikan kod lebih mudah dibaca dan difahami.

Penggunaan Asas

1. Fungsi Async: Fungsi yang diisytiharkan dengan kata kunci async mengembalikan Janji.
2. Kata Kunci Tunggu: Kata kunci await hanya boleh digunakan dalam fungsi async. Ia membuatkan JavaScript menunggu sehingga Janji diselesaikan atau ditolak.

Contoh:

async function fetchData() {
    let promise = new Promise((resolve, reject) => {
        setTimeout(() => resolve('Data fetched'), 2000);
    });

    let result = await promise; // Wait until the promise resolves
    console.log(result);
}

fetchData();

Pengendalian Ralat

Dengan async/menunggu, pengendalian ralat menjadi mudah menggunakan cuba...tangkap blok.

Contoh:

async function fetchData() {
    try {
        let promise = new Promise((resolve, reject) => {
            setTimeout(() => reject('Error fetching data'), 2000);
        });

        let result = await promise;
        console.log(result);
    } catch (error) {
        console.error(error);
    }
}

fetchData();

Perlaksanaan Selari

Untuk melaksanakan berbilang operasi tak segerak secara selari, Promise.all boleh digunakan dengan tak segerak/menunggu.

Contoh:

async function fetchAllData() {
    let promise1 = new Promise((resolve) => setTimeout(() => resolve('Data 1'), 2000));
    let promise2 = new Promise((resolve) => setTimeout(() => resolve('Data 2'), 1000));

    let results = await Promise.all([promise1, promise2]);
    console.log(results); // ['Data 1', 'Data 2']
}

fetchAllData();

Konsep Lanjutan

Pelaksanaan Berurutan

Jika tugasan perlu dilaksanakan secara berurutan, gunakan tunggu satu demi satu.

Contoh:

async function fetchSequentialData() {
    let data1 = await new Promise((resolve) => setTimeout(() => resolve('Data 1'), 2000));
    console.log(data1);

    let data2 = await new Promise((resolve) => setTimeout(() => resolve('Data 2'), 1000));
    console.log(data2);
}

fetchSequentialData();

Menggabungkan Async/Tunggu dengan Janji Tradisional

Anda boleh menggabungkan async/menunggu dengan kaedah Promise tradisional seperti itu dan menangkap.

Contoh:

async function fetchData() {
    let data = await fetch('https://api.example.com/data');
    return data.json();
}

fetchData().then((data) => {
    console.log(data);
}).catch((error) => {
    console.error(error);
});

Kesimpulan

Async/Await memudahkan kerja dengan operasi tak segerak dalam JavaScript dengan menyediakan cara yang lebih bersih dan lebih mudah dibaca untuk menulis kod tak segerak. Ia berkesan menggantikan panggilan balik dan menjadikan kerja dengan Promises lebih intuitif.

Atas ialah kandungan terperinci Async dan Tunggu Dalam JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!