แนะนำ Promise ใน JavaScript

คุณทราบแล้วว่าการใช้โมเดล asynchronous แบบ callback นำไปสู่สถานการณ์ callback hell ได้ง่าย ดังนั้นใน JavaScript จึงได้มีการนำเข้าโมเดลใหม่ที่มีชื่อว่า พรอมิส (promise) เรามาเรียนรู้โมเดลนี้กัน

พรอมิสเป็นอ็อบเจ็กต์ ซึ่งจะรับฟังก์ชันเป็นพารามิเตอร์ ภายในฟังก์ชันนี้เราจะต้องวางโค้ด asynchronous ของเรา:

javascriptlet promise = new Promise(function() {
  // โค้ด asynchronous
});

อย่างที่คุณเห็น ฉันเขียนอ็อบเจ็กต์ promise ลงในตัวแปร promise ในส่วนอื่น ๆ ของโค้ด ฉันสามารถนำตัวแปรนี้ไปใช้กับ เมธอด then โดยส่งฟังก์ชันเข้าไป พร้อมโค้ดที่ต้องถูกดำเนินการเมื่อ โค้ด asynchronous ที่เขียนไว้ ตอนสร้างพรอมิสนี้เสร็จสิ้น:

javascriptpromise.then(function() {
  // จะทำงานเมื่อโค้ด asynchronous เสร็จสิ้น
});

ฟังดูสับสน งั้นมาดูตัวอย่างกัน สมมติว่าฉันมีโค้ด asynchronous แบบนี้:

javascriptsetTimeout(function() {
  let result = [1, 2, 3, 4, 5];
}, 3000);

สมมติว่าฉันต้องการแก้ไขปัญหาหลัก ของ asynchronous สำหรับมัน: เพื่อดำเนินการ โค้ดบางส่วนหลังจากที่ตัวจับเวลาเกิดเหตุการณ์ ในขณะที่ฉันไม่ต้องการวางโค้ดนี้ไว้ในตัวจับเวลา และต้องการให้ผลลัพธ์ที่ฉันเขียนไว้ในตัวแปร result ส่งเข้าไปในโค้ดนี้ โดยทั่วไป เราแก้ไขปัญหานี้ในบทเรียนที่แล้ว ผ่าน callback และการสมัครสมาชิก มาดูกัน ตอนนี้ว่าจะทำอย่างไรผ่าน promise

ก่อนอื่นต้องนำโค้ด asynchronous ของเรา ไปห่อด้วย promise:

javascriptlet promise = new Promise(function() {
  setTimeout(function() {
    let result = [1, 2, 3, 4, 5];
  }, 3000);
});

แต่เพียงเท่านี้ยังไม่พอ เราต้อง ระบุ อย่างชัดเจนว่าโค้ด asynchronous ของเรา เสร็จสิ้นแล้ว ฟังก์ชันพิเศษสำหรับการเสร็จสิ้นนี้ จะช่วยเราได้ ซึ่งจะถูกส่งผ่านเข้าไปในพารามิเตอร์แรกของฟังก์ชันโดยอัตโนมัติ หากระบุไว้:

javascriptlet promise = new Promise(function(resolve) { // ระบุพารามิเตอร์
  setTimeout(function() {
    let result = [1, 2, 3, 4, 5];
  }, 3000);
});

เราสามารถใช้ฟังก์ชันเสร็จสิ้นนี้เพื่อระบุ กับ promise อย่างชัดเจนว่าโค้ด asynchronous เสร็จสิ้นแล้ว โดยเราต้องเรียกฟังก์ชันนี้ใน ตำแหน่งที่เราต้องการ:

javascriptlet promise = new Promise(function(resolve) {
  setTimeout(function() {
    let result = [1, 2, 3, 4, 5];
    resolve(); // เสร็จสิ้น promise
  }, 3000);
});

ในขณะเดียวกัน หากเราต้องการส่งผลลัพธ์บางอย่าง ของโค้ด asynchronous ออกไปภายนอก เราสามารถส่ง มันผ่านพารามิเตอร์ของฟังก์ชันเสร็จสิ้นของเราได้:

javascriptlet promise = new Promise(function(resolve) {
  setTimeout(function() {
    let result = [1, 2, 3, 4, 5];
    resolve(result); // ส่งผลลัพธ์
  }, 3000);
});

แน่นอนว่า เราสามารถกำจัดตัวแปรชั่วคราวได้:

javascriptlet promise = new Promise(function(resolve) {
  setTimeout(function() {
    resolve([1, 2, 3, 4, 5]);
  }, 3000);
});

ตอนนี้ในที่อื่นใด ๆ เราสามารถเรียก เมธอด then ของ promise ของเราได้:

javascriptpromise.then(function() {
  // จะทำงานเมื่อ promise เสร็จสิ้น
});

ผลลัพธ์การทำงานของ promise จะส่งเข้าไปในพารามิเตอร์แรก ของฟังก์ชัน ถ้าเราต้องการระบุมัน:

javascriptpromise.then(function(result) {
  console.log(result); // จะแสดงอาร์เรย์พร้อมผลลัพธ์
});