Promise Chaining ใน JavaScript

สมมติว่าเรามี Promise ต่อไปนี้:

javascriptlet promise = new Promise(function(resolve, reject) {
  setTimeout(function() {
    resolve('string');
  }, 3000);
});

เมื่อ Promise สมบูรณ์ ให้แสดงผลลัพธ์ ในคอนโซล:

javascriptpromise.then(
  function(result) {
    console.log(result); // จะแสดง 'string'
  }
)

ตอนนี้เราจะไม่ออกผลลัพธ์ทันที แต่จะปรับเปลี่ยนมันแล้วส่งกลับผ่าน return:

javascriptpromise.then(
  function(result) {
    return result + '!';
  }
);

ในกรณีนี้ เราสามารถใช้ then กับผลลัพธ์ของ then ของเราได้อีกครั้ง จึงเป็นการสร้าง โซ่ ของเมธอดขึ้นมา โดยผลลัพธ์ของเมธอดถัดไปจะได้รับ ค่าที่เมธอดก่อนหน้าส่งกลับผ่าน return:

javascriptpromise.then(
  function(result) {
    return result + '!';
  }
).then(
  function(result) {
    console.log(result); // จะแสดง 'string!'
  }
);

ดังนั้น เราสามารถสร้างโซ่ที่มีความยาวเท่าใดก็ได้:

javascriptpromise.then(
  function(result) {
    return result + '1';
  }
).then(
  function(result) {
    return result + '2';
  }
).then(
  function(result) {
    return result + '3';
  }
).then(
  function(result) {
    console.log(result); // จะแสดง 'string123'
  }
);