Rumah >hujung hadapan web >tutorial js >Bilakah Pengendali JavaScript Promise .then() Melaksanakan Berkaitan Antara Satu Sama Lain?

Bilakah Pengendali JavaScript Promise .then() Melaksanakan Berkaitan Antara Satu Sama Lain?

Susan Sarandon
Susan Sarandonasal
2024-10-25 08:19:28462semak imbas

When do JavaScript Promise .then() Handlers Execute in Relation to Each Other?

Memahami Perintah Pelaksanaan dalam Janji JavaScript

Janji dalam JavaScript menawarkan model pengaturcaraan tak segerak di mana kod dilaksanakan sekali peristiwa atau janji tertentu , dipenuhi. Walau bagaimanapun, apabila berurusan dengan berbilang janji, adalah penting untuk memahami susunan pelaksanaan untuk mengelakkan tingkah laku yang tidak dapat diramalkan.

Pertimbangkan coretan kod berikut:

Promise.resolve('A')
  .then(function(a){console.log(2, a); return 'B';})
  .then(function(a){
     Promise.resolve('C')
       .then(function(a){console.log(7, a);})
       .then(function(a){console.log(8, a);});
     console.log(3, a);
     return a;})
  .then(function(a){
     Promise.resolve('D')
       .then(function(a){console.log(9, a);})
       .then(function(a){console.log(10, a);});
     console.log(4, a);})
  .then(function(a){
     console.log(5, a);});
console.log(1);
setTimeout(function(){console.log(6)},0);

Setelah pelaksanaan, anda mungkin melihat perkara berikut susunan output:

1
2 "A"
3 "B"
7 "C"
4 "B"
8 undefined
9 "D"
5 undefined
10 undefined
6

Memahami Perintah Pelaksanaan

  1. Janji Selesai Secara Asynchronous:
    Janji diselesaikan secara bebas daripada utas pelaksanaan semasa. Ini bermakna pengendali .then() dipanggil secara tidak segerak selepas urutan semasa selesai.
  2. Janji Dilaksanakan dalam Baris Gilir:
    .then() pengendali dijadualkan untuk dijalankan selepas yang sebelumnya penangan selesai. Mereka pada dasarnya beratur, itulah sebabnya anda melihat 1, 2 "A" dan 3 "B" dicetak dalam susunan tersebut.
  3. Janji Dalaman Cipta Rantaian Bebas:
    Janji dicipta dalam pengendali .then() bersarang, seperti Promise.resolve('C') dan Promise.resolve('D'), cipta rantai janji bebas yang baharu. Rantai dalam ini tidak disegerakkan secara semula jadi dengan rantai luar.
  4. Tertib Pelaksanaan Tidak Tentu:
    Tertib pelaksanaan untuk rantai bebas ini tidak dijamin. Dalam kes ini, enjin promise memilih untuk melaksanakan pengendali .then() pada baris 5 dan 12 sebelum yang pada baris 6 dan 7.

Pengesyoran

Untuk memastikan tertib pelaksanaan tertentu, elakkan daripada membuat rantaian janji yang tidak disegerakkan dan sebaliknya bergantung pada memautkan janji secara berurutan. Kembalikan janji daripada pengendali dalaman .then() untuk merantainya dengan janji induk, seperti yang ditunjukkan di bawah:

Promise.resolve('A').then(function (a) {
    console.log(2, a);
    return 'B';
}).then(function (a) {
    var p = Promise.resolve('C').then(function (a) {
        console.log(7, a);
    }).then(function (a) {
        console.log(8, a);
    });
    console.log(3, a);
    return p; // Link the inner promise to the parent chain
}).then(function (a) {
    var p = Promise.resolve('D').then(function (a) {
        console.log(9, a);
    }).then(function (a) {
        console.log(10, a);
    });
    console.log(4, a);
    return p; // Link the inner promise to the parent chain
}).then(function (a) {
    console.log(5, a);
});

console.log(1);

setTimeout(function () {
    console.log(6)
}, 0);

Dengan pendekatan ini, perintah pelaksanaan menjadi deterministik sepenuhnya: 1, 2 "A", 3 " B", 7 "C", 8 undefined, 4 undefined, 9 "D", 10 undefined, 5 undefined dan 6.

Atas ialah kandungan terperinci Bilakah Pengendali JavaScript Promise .then() Melaksanakan Berkaitan Antara Satu Sama Lain?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn