0Pricing
jQuery Academy · บทเรียน

การจัดการงานแบบอะซิงโครนัสหลายรายการ

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

การจัดการงานแบบอะซิงโครนัสหลายรายการ เป็นบทเรียน jQuery Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 3 จากทั้งหมด 3 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน jQuery Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส jQuery Academy มีบทเรียนทั้งหมด 3 บทเรียน

เหตุใดจึงต้องประสานงานงานแบบอะซิงโครนัส

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

เมื่อแอปพลิเคชันของคุณต้องทำงานเหล่านี้ หลายงาน พร้อมกัน หรือตามลำดับที่กำหนด คุณต้องมีวิธี ประสานงาน งานเหล่านั้นอย่างมีประสิทธิภาพ บทเรียนนี้จะแสดงวิธีดังกล่าวให้คุณ

ความท้าทายของงานหลายรายการ

ลองนึกภาพว่าคุณต้องโหลดโพรไฟล์ของผู้ใช้และการแจ้งเตือนล่าสุดของผู้ใช้ ทั้งสองอย่างเป็นคำขอแยกกันไปยังเซิร์ฟเวอร์

  • คุณจะทราบได้อย่างไรว่างาน ทั้งสองรายการ เสร็จแล้ว
  • จะเกิดอะไรขึ้นหากรายการหนึ่งล้มเหลว
  • จะเกิดอะไรขึ้นหากรายการหนึ่งขึ้นอยู่กับอีกรายการ (เช่น การดึงการแจ้งเตือนสำหรับ ID ผู้ใช้เฉพาะที่พบในโพรไฟล์)

หากไม่มีการประสานงานที่เหมาะสม ส่วนติดต่อผู้ใช้อาจแสดงข้อมูลไม่ครบถ้วนหรือหยุดทำงานทั้งหมด

ทำความรู้จัก `$.when()` สำหรับการทำงานแบบขนาน

$.when() ของ jQuery เป็นเครื่องมือทรงพลังสำหรับประสานงาน การดำเนินการแบบอะซิงโครนัสหลายรายการที่เป็นอิสระต่อกัน โดยรับออบเจ็กต์ Deferred/Promise อย่างน้อยหนึ่งรายการเป็นอาร์กิวเมนต์

$.when() จะส่งคืน Promise หลักที่จะแก้ไขสำเร็จเมื่อ Promise แต่ละรายการที่ส่งให้ ทั้งหมด แก้ไขสำเร็จแล้ว หากมีรายการใด รายการหนึ่ง ถูกปฏิเสธ Promise หลักจะถูกปฏิเสธทันที

ตัวอย่าง `$.when()`: การดึงข้อมูลแบบขนาน

มาจำลองการดึงชุดข้อมูลสองชุดที่แตกต่างกันแบบขนานกัน เราจะใช้ $.Deferred() เพื่อเลียนแบบคำขอ AJAX สำหรับการสาธิต

ลองเรียกใช้โค้ดนี้:

// Assume jQuery is loaded in the environment
$(function() {
  function fetchData(name, delay) {
    let dfd = $.Deferred();
    setTimeout(function() {
      console.log(`Finished fetching ${name}`);
      dfd.resolve(`Data for ${name}`);
    }, delay);
    return dfd.promise();
  }

  let profilePromise = fetchData("User Profile", 1500);
  let settingsPromise = fetchData("App Settings", 800);

  console.log("Starting parallel fetches...");

  $.when(profilePromise, settingsPromise)
    .done(function(profileData, settingsData) {
      console.log("All data loaded successfully!");
      console.log(`Profile: ${profileData}`);
      console.log(`Settings: ${settingsData}`);
    });
});

การจัดการผลลัพธ์ของ `$.when()`

เมื่อ Promise ของ $.when() แก้ไขสำเร็จ callback .done() ของมันจะได้รับค่าที่แก้ไขสำเร็จจาก Promise ต้นฉบับแต่ละรายการเป็นอาร์กิวเมนต์แยกกัน

  • หากคุณส่ง Promise จำนวน N รายการไปยัง $.when() callback .done() จะได้รับอาร์กิวเมนต์จำนวน N รายการ
  • อาร์กิวเมนต์จะเรียงตามลำดับเดียวกับที่ส่ง Promise ไปยัง $.when()

วิธีนี้ช่วยให้ทำงานกับผลลัพธ์ทั้งหมดได้ง่ายเมื่อผลลัพธ์พร้อมใช้งาน

การจัดการข้อผิดพลาดของ `$.when()`

จะเกิดอะไรขึ้นหากการดำเนินการแบบขนานรายการหนึ่งล้มเหลว Promise หลักของ $.when() จะถูก ปฏิเสธทันที หาก Promise รายการใดรายการหนึ่งถูกปฏิเสธ

จากนั้น callback .fail() จะถูกเรียกใช้ โดยได้รับเหตุผลการปฏิเสธจาก Promise รายการแรกที่ล้มเหลว การดำเนินการแบบขนานที่เหลือจะยังคงทำงานจนเสร็จ แต่ $.when() จะแจ้งความล้มเหลวไปแล้ว

ตัวอย่าง: `$.when()` เมื่อเกิดความล้มเหลว

มาปรับเปลี่ยนตัวอย่างก่อนหน้าให้การดึงข้อมูลรายการหนึ่งล้มเหลว แล้วสังเกตผลลัพธ์:

// Assume jQuery is loaded in the environment
$(function() {
  function fetchData(name, delay, shouldSucceed = true) {
    let dfd = $.Deferred();
    setTimeout(function() {
      if (shouldSucceed) {
        console.log(`Finished fetching ${name}`);
        dfd.resolve(`Data for ${name}`);
      } else {
        console.log(`Failed to fetch ${name}`);
        dfd.reject(`Error: ${name} could not be loaded`);
      }
    }, delay);
    return dfd.promise();
  }

  let profilePromise = fetchData("User Profile", 1500, true);
  let settingsPromise = fetchData("App Settings", 800, false); // This one will fail

  console.log("Starting parallel fetches (one will fail)...");

  $.when(profilePromise, settingsPromise)
    .done(function(profileData, settingsData) {
      console.log("All data loaded successfully! (This won't run)");
    })
    .fail(function(errorReason) {
      console.log("One or more operations failed!");
      console.log(`Reason: ${errorReason}`);
    });
});

การประสานงานงานที่ขึ้นต่อกัน

บางครั้งงานต่าง ๆ ไม่ได้เป็นอิสระต่อกัน คุณอาจต้องทำสิ่งต่อไปนี้:

  • ดึง ID ผู้ใช้
  • จากนั้นใช้ ID นั้นเพื่อดึงรายละเอียดของผู้ใช้
  • จากนั้นใช้รายละเอียดเหล่านั้นเพื่อดึงโพสต์เฉพาะของผู้ใช้

สิ่งนี้ต้องใช้ สายการเชื่อมโยงแบบลำดับ ของการดำเนินการแบบอะซิงโครนัส โดยแต่ละขั้นตอนขึ้นอยู่กับความสำเร็จและผลลัพธ์ของขั้นตอนก่อนหน้า เราทำเช่นนี้ได้ด้วยการเชื่อมโยง .then() หรือ .pipe()

ตัวอย่าง: การเชื่อมโยง AJAX ที่ขึ้นต่อกัน

นี่คือตัวอย่างการเชื่อมโยงการเรียก AJAX ที่จำลองขึ้นสองรายการ โดยรายการที่สองขึ้นอยู่กับผลลัพธ์ของรายการแรก สังเกตว่าค่าที่ส่งคืนจาก .then() แรกกลายเป็นอินพุตสำหรับรายการถัดไปอย่างไร

// Assume jQuery is loaded in the environment
$(function() {
  function fetchUserId() {
    let dfd = $.Deferred();
    setTimeout(() => {
      console.log("User ID fetched: 123");
      dfd.resolve(123);
    }, 500);
    return dfd.promise();
  }

  function fetchUserDetails(userId) {
    let dfd = $.Deferred();
    setTimeout(() => {
      if (userId === 123) {
        console.log(`Details fetched for user ${userId}`);
        dfd.resolve(`Details for User ${userId}`);
      } else {
        dfd.reject("Invalid User ID");
      }
    }, 700);
    return dfd.promise();
  }

  console.log("Starting dependent fetch chain...");

  fetchUserId()
    .then(function(id) {
      return fetchUserDetails(id); // Return a new promise
    })
    .done(function(details) {
      console.log("Full chain successful!");
      console.log(`Final Result: ${details}`);
    })
    .fail(function(error) {
      console.log("Chain failed:", error);
    });
});

ทดสอบความรู้ของคุณ

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

แนวทางของ jQuery ใดเหมาะสมที่สุดสำหรับการประสานงานในกรณีนี้

ทบทวน: เชี่ยวชาญการประสานงานแบบอะซิงโครนัส

คุณได้เรียนรู้วิธีจัดการงานแบบอะซิงโครนัสหลายรายการอย่างมีประสิทธิภาพแล้ว!

  • $.when(): เหมาะสำหรับเรียกใช้งานที่ เป็นอิสระต่อกัน แบบขนาน และรอให้งานทั้งหมดเสร็จหรือมีงานใดงานหนึ่งล้มเหลว
  • การเชื่อมโยงด้วย .then(): เหมาะอย่างยิ่งสำหรับงานที่ ขึ้นต่อกัน ซึ่งผลลัพธ์ของการดำเนินการหนึ่งจำเป็นต่อการดำเนินการถัดไป
  • การจัดการข้อผิดพลาด: ทั้ง $.when() และ Promise ที่เชื่อมโยงกันมี .fail() สำหรับดักจับการปฏิเสธที่เกิดขึ้นในทุกจุด ทำให้แอปพลิเคชันมีความเสถียรมากขึ้น

รูปแบบเหล่านี้มีความสำคัญต่อการสร้างแอปพลิเคชันเว็บด้วย jQuery ที่มีความเคลื่อนไหวและตอบสนองได้ดี

คำถามที่พบบ่อย

บทเรียน “การจัดการงานแบบอะซิงโครนัสหลายรายการ” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “การจัดการงานแบบอะซิงโครนัสหลายรายการ” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส jQuery Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส jQuery Academy มีบทเรียนทั้งหมด 3 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “การจัดการงานแบบอะซิงโครนัสหลายรายการ”

เชี่ยวชาญการประสานงานระหว่างงานแบบอะซิงโครนัสที่เป็นอิสระหรือพึ่งพากันหลายรายการ พร้อมรับรองลำดับการทำงานและการจัดการข้อผิดพลาดที่ถูกต้องในทุกการดำเนินการ คุณปฏิบัติ jQuery Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน jQuery Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน jQuery Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 3 จากทั้งหมด 3 บทเรียน

บทเรียน “การจัดการงานแบบอะซิงโครนัสหลายรายการ” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน jQuery Academy นี้ได้ไหม

ได้ บทเรียน jQuery Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

  1. ทำความเข้าใจออบเจ็กต์ Deferred
  2. การต่อและประกอบพรอมิส
  3. การจัดการงานแบบอะซิงโครนัสหลายรายการ
← กลับไปที่ jQuery Academy