Analisis ringkas fungsi tak segerak JS async/menunggu

Artikel ini akan memperkenalkan anda kepada fungsi tak segerak JavaScript async/menunggu saya harap ia akan membantu anda!

Diperkenalkan oleh ES7, async/await ialah peningkatan berbanding pengaturcaraan tak segerak dalam JavaScript yang menyediakan pilihan untuk mengakses sumber secara tidak segerak menggunakan kod gaya segerak tanpa menyekat urutan utama. Walau bagaimanapun, ia agak sukar untuk menggunakannya dengan baik. Dalam artikel ini, kami akan meneroka async/await daripada perspektif yang berbeza dan menunjukkan cara menggunakannya dengan betul dan berkesan.

Faedah async/menunggu

async/await Faedah paling penting yang dibawa olehnya ialah gaya pengaturcaraan segerak Mari kita lihat contoh dahulu.

// async/await
const getArticlesByAuthorWithAwait = async (authorId) => {
    const articles = await articleModel.fetchAll();
    return articles.filter((b) => b.authorId === authorId);
};

// promise
const getArticlesByAuthorWithPromise = (authorId) => {
    return articleModel
        .fetchAll()
        .then((articles) => articles.filter((b) => b.authorId === authorId));
};

Jelas sekali, versi async/await lebih mudah difahami daripada versi promise. Jika anda meninggalkan kata kunci await, kod tersebut akan kelihatan seperti bahasa segerak lain seperti Python.

Juga async/await mempunyai sokongan penyemak imbas asli Sehingga kini, semua penyemak imbas utama telah menyokong sepenuhnya fungsi tak segerak.

Perlu diambil perhatian bahawa async/await perlu muncul secara berpasangan semasa penggunaan Jika anda ingin menggunakan await dalam fungsi, anda mesti mentakrifkan fungsi sebagai async.

async/menunggu boleh mengelirukan

Sesetengah artikel membandingkan async/await dengan Promise dan mendakwa bahawa ia adalah pembangunan pengaturcaraan tak segerak JavaScript Generasi akan datang , saya secara peribadi berpendapat ini agak mengelirukan. Saya secara peribadi berpendapat async/await ialah peningkatan, gula sintaks dan tidak akan mengubah sepenuhnya gaya pengaturcaraan.

Pada asasnya, fungsi tak segerak masih promises, dan anda mesti memahami promises sebelum menggunakan fungsi tak segerak dengan betul.

• Panduan Analisis dan Penggunaan Prinsip Promise.any()
• Panduan Analisis dan Penggunaan Prinsip Promise.all()
• Analisis dan panduan penggunaan prinsip Promise.race()
• Analisis dan panduan penggunaan prinsip Promise.allSettled()

async/wait pitfalls

Walaupun await boleh menjadikan kod kelihatan segerak, ingat bahawa ia masih tidak segerak dan perlu berhati-hati untuk mengelakkan terlalu berurutan.

const getArticlesAndAuthor = async (authorId) => {
    const articles = await articleModel.fetchAll();
    const author = await authorModel.fetch(authorId);
    return {
        author,
        articles: articles.filter((article) => article.authorId === authorId),
    };
};

Kod ini nampaknya betul secara logik, tetapi ia mengelirukan.

• await articleModel.fetchAll() akan menunggu sehingga fetchAll() kembali.

• maka await authorModel.fetch(authorId) akan dipanggil serta-merta.

Ralat pengendalian

Menggunakan promise, fungsi tak segerak mempunyai dua kemungkinan nilai pulangan: resolve dan reject, dengan Penggunaan .then() untuk situasi biasa dan .catch() untuk situasi luar biasa. Walau bagaimanapun, async/await pengendalian ralat tidak begitu baik dan anda perlu menggunakan try...catch untuk menangkap pengecualian.

const getArticlesByAuthorWithAwait = async (authorId) => {
    try {
        const articles = await articleModel.fetchAll();
        return articles.filter((b) => b.authorId === authorId);
    } catch (error) {
        // 错误处理
    }
};

Ringkasan

async/await Sangat berkuasa, tetapi terdapat beberapa kaveat. Tetapi jika digunakan dengan betul, mereka masih boleh membantu menjadikan kod itu cekap dan sangat mudah dibaca.

[Pembelajaran yang disyorkan: Tutorial JavaScript Lanjutan]

Atas ialah kandungan terperinci Analisis ringkas fungsi tak segerak JS async/menunggu. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!