Mengapa Adakah .then() Dirantai kepada Janji Kembali Tidak Ditakrifkan?

Mengapa .then() Dirantai dengan Janji Kembali Tidak Ditakrifkan

Pertimbangkan coretan kod di bawah:

<code class="js">function doStuff(n) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(n * 10);
    }, Math.floor(Math.random() * 1000));
  })
  .then((result) => {
    if (result > 100) {
      console.log(`${result} is greater than 100`);
    } else {
      console.log(`${result} is not greater than 100`);
    }
  });
}

doStuff(9)
.then((data) => {
  console.log(data); // undefined, why?
});</code>

Mengapakah nilai data tidak ditentukan dalam panggilan balik .then() kedua?

Jawapan:

Apabila anda merantai panggilan balik .then() kepada Promise, ia mengembalikan Janji baharu yang menyelesaikan kepada nilai pulangan panggilan balik. Walau bagaimanapun, dalam kod yang disediakan, tiada nilai atau Janji dikembalikan daripada yang pertama .then().

Penyelesaian:

Untuk menyelesaikan isu, anda perlu kembali nilai atau memanggil fungsi lain yang mengembalikan nilai atau Janji daripada yang pertama .then(). Berikut ialah versi kod yang dikemas kini:

<code class="js">function doStuff(n) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(n * 10);
    }, Math.floor(Math.random() * 1000));
  })
  .then((result) => {
    if (result > 100) {
      console.log(`${result} is greater than 100`);
    } else {
      console.log(`${result} is not greater than 100`);
    }

    // Return `result` here to avoid undefined at chained `.then()`.
    return result;
  });
}

doStuff(9)
.then((data) => {
  console.log(`data is: ${data}`); // data is not undefined
});</code>

Dalam kod yang dikemas kini ini, .then() pertama mengembalikan nilai hasil (n didarab dengan 10), yang memastikan bahawa .then() kedua menerima nilai yang ditakrifkan sebagai hujahnya.

Atas ialah kandungan terperinci Mengapa Adakah .then() Dirantai kepada Janji Kembali Tidak Ditakrifkan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!