Biarkan anda memahami Janji melalui contoh kod

Artikel ini menggunakan berbilang contoh kod untuk membantu anda memahami penggunaan asas Promise dan seterusnya menguasai idea akses tak segerak Promise.

Saya selalu mendengar tentang reputasi Janji sebelum ini, tetapi saya sentiasa merasakan bahawa ia adalah perkara yang lebih mendalam, dan saya agak takut dan gagal untuk memahaminya. . Saya baru-baru ini menonton video Node.js yang dimuat naik oleh En. Li Lichao di Stesen B. Saya merasakan penjelasannya sangat jelas, jadi saya akan menyelesaikannya dengan lebih lanjut di sini.

Mari kita lihat masalah dahulu

Kita semua tahu bahawa JavaScript berjalan dalam satu urutan, jadi jika anda menghadapi situasi di mana data mengambil sedikit masa untuk diperoleh, cuma Ia akan menyebabkan penyekatan dan kod seterusnya tidak boleh dilaksanakan, yang agak membawa maut Contohnya, pernyataan while di tengah-tengah kod berikut

function sum(a, b) {
    const begin = Date.now();
    while(Date.now() - begin < 10000) {

    }
    return a+b;
}

console.log(sum(1,2));
console.log("1");

melalui gelung 10 saat, dan akhirnya. masing-masing dicetak 3 dan 1

Walau bagaimanapun, apa yang kami mahu ialah membenarkan 3 dicetak selepas 10 saat, tetapi 1 mesti dicetak terlebih dahulu

Di sini kami menggunakan setTimeout dan. ubah suai kod seperti berikut

function sum(a, b) {
    setTimeout(() => {
        return a+b;
    },10000)
}

console.log(sum(1,2));
console.log("1");

Jalankannya dan anda boleh melihat bahawa 1 memang dicetak serta-merta, tetapi kedudukan di mana 3 harus dicetak tidak ditentukan

Sebabnya console.log pada masa ini juga tidak menunggu setTimeoutSelepas selesai berjalan, data selepas 10 saat tidak dapat diterima

Jadi untuk menerima data selepas 10 saat, kita boleh menggunakan fungsi panggil balik

function sum(a, b, callback) {

    setTimeout(() =>{
        callback(a+b);
    }, 10000)

}

sum(1,2,(result) => {
    console.log(result);
});
console.log("1");

untuk menghantar fungsi panggil balik yang boleh menerima a+b sebagai parameter (result) => {console.log(result);}

akan dilaksanakan selepas 10 saat dan dicetak seperti berikut

Dengan cara ini, kami pada mulanya telah menyelesaikan masalah ini Data yang perlu diperolehi dengan kelewatan diperoleh selepas kod lain dilaksanakan terlebih dahulu.

Namun, Janji masih belum muncul, yang melibatkan kawasan lain yang memerlukan penambahbaikan

Jahanam panggilan balik

Ini kedengaran sangat membingungkan pada pandangan pertama Nama sebenarnya adalah situasi yang disebabkan oleh sarang berbilang lapisan fungsi panggil balik yang tidak kondusif untuk membaca dan menyahpepijat.

Sebagai contoh, kita mahu memanggil fungsi jumlah ini beberapa kali pada masa ini Selepas mendapat keputusan 1+2, kita perlu mendapatkan keputusan 1+2+3, 1+2+3+. 4

Jadi kita perlu memanggil sum beberapa kali untuk bersarang dalam fungsi panggil balik yang dihantar dengan jumlah, seperti berikut

sum(1,2,(result) => {
    sum(result, 3, (result) => {
        sum(result, 4, (result) => {
            console.log(result);
        })
    })
});

seperti piramid ini struktur kurang boleh dibaca Ia juga sukar untuk nyahpepijat dan dipanggil neraka panggilan balik.

Jadi akhirnya tiba masanya untuk Janji muncul, dan penampilannya menyelesaikan masalah neraka panggil balik.

Apa itu Janji

Sebelum menggunakan Promise untuk menyelesaikan masalah neraka panggil balik, mari kita fahami secara umum apa itu Janji.

Pertimbangan semasa saya ialah Promise ialah objek yang digunakan untuk mengakses data tak segerak.

Mula-mula mari kita lihat bagaimana Janji kosong akan kelihatan apabila dicetak

const promise = new Promise(()=>{});

Yang paling kritikal ialah dua nilai ​​PromiseState dan PromiseResult, yang akan dibincangkan kemudian Untuk mengembangkan secara terperinci, di sini anda hanya perlu mengetahui bahawa Promise mempunyai dua atribut ini.

Mari kita lihat proses menyimpan data dalam janji Perkara yang paling penting ialah mengetahui bahawa terdapat penyelesaian dan penolakan Sebagai contoh, dalam kod berikut

const promise = new Promise((resolve, reject) => {
    const flag = true;
    if (flag) {
        resolve("resolve datas");
    } else {
        reject("reject data");
    }
})

Di kali ini, bendera adalah benar, jadi azam dilaksanakan Hasilnya adalah seperti berikut

Dan apabila kita menukar bendera kepada palsu dan melaksanakan penyimpanan penolakan, hasilnya. adalah seperti berikut

Kini tiba masanya untuk menerangkan dua sifat di atas,

• Apabila janji tidak menyimpan data, nilai PromiseState ialah belum selesai dan nilai PromiseResult tidak ditentukan
• Apabila promise menggunakan resolusi untuk menyimpan data, nilai PromiseState belum selesai dan nilai PromiseResult ialah nilai tersimpan yang sepadan
• Apabila promise menggunakan reject to menyimpan data, nilai PromiseState ditolak dan nilai PromiseResult ialah nilai tersimpan yang sepadan

Memandangkan terdapat dua jenis, bacaan secara semula jadi terbahagi kepada dua jenis

Apabila kita membaca data dalam janji, kita perlu menggunakan struktur berikut

promise.then(result => {
    console.log(result);
}, reason => {
    console.log(reason);
})

Jika data wujud dalam penyelesaian, keputusan akan mengembalikan hasilnya.

Gunakan Promise untuk menyelesaikan neraka panggil balik

Selepas pemahaman awal tentang Promise, anda akan mendapati bahawa apa yang Promise boleh lakukan pada masa ini juga boleh dilakukan menggunakan fungsi panggil balik.

Jadi perkara yang paling penting ialah Janji menyelesaikan neraka panggilan balik Sebagai contoh, masalah sebelum ini boleh ditulis dalam borang ini

function sum(a, b) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(a+b);
        }, 1000);
    })
}

sum(1,2)
    .then(result => sum(result,3))
    .then(result => sum(result,4))
    .then(result => {
        console.log(result);
    })

promise 通过then方法进行读取后，是个新的Promise对象，比如我们可以打印一下

function sum(a, b) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(a+b);
        }, 1000);
    })
}

console.log(sum(1,2)
    .then(result => sum(result,3)))

所以这也就给了我们能多次调用then方法的基础。

而这也就解决了回调地狱的问题。

小结

Promise 是一个可以存取异步数据的对象，通过resolve和reject来存储数据，可以通过then来读取数据

至于其他的.catch .finally .race .any .all 这些方法就不再多作赘述，详细的见文档

【推荐学习：javascript高级教程】

Atas ialah kandungan terperinci Biarkan anda memahami Janji melalui contoh kod. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!