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

ตัววนซ้ำแบบ async — for await...of และเจเนอเรเตอร์ async

ใช้เจเนอเรเตอร์ async และ for await...of เพื่อรับค่าที่เข้ามาตามเวลา เรียนรู้ Symbol.asyncIterator และไปป์ไลน์ async อย่างง่าย

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

เหตุใดจึงใช้การวนซ้ำแบบอะซิงก์

เป้าหมาย: ใช้งานค่าที่อาจมาถึงภายหลัง

  • for await...of ใช้วนซ้ำกับสิ่งที่วนซ้ำแบบอะซิงก์
  • async function* ใช้สร้างเจเนอเรเตอร์แบบอะซิงก์
  • Symbol.asyncIterator ใช้ระบุให้อ็อบเจ็กต์เป็นสิ่งที่วนซ้ำแบบอะซิงก์ได้
  • ตัวอย่าง map แบบอะซิงก์ขนาดเล็ก
ตัววนซ้ำแบบ async — for await...of และเจเนอเรเตอร์ async — ภาพประกอบ 1

async function* และ for await...of

เจเนอเรเตอร์แบบอะซิงก์ (async function*) จะส่งค่าที่ for await...of นำไปใช้งาน

// Use an async generator to yield values (could be delayed in real apps)
(async function () {
  async function* countAsync(n) {
    for (let i = 1; i <= n; i = i + 1) {
      // In real code you could await a delay or I/O here
      yield i;
    }
  }

  for await (const x of countAsync(3)) {
    console.log("async value:", x);
  }
})();
ตัววนซ้ำแบบ async — for await...of และเจเนอเรเตอร์ async — ภาพประกอบ 2

next() แบบอะซิงก์ด้วยตนเอง

next() บนตัววนซ้ำแบบอะซิงก์จะส่งคืน พรอมิส ที่แก้ค่าเป็น { value, done }

// Drive an async iterator manually with await it.next()
(async function () {
  async function* two() {
    yield "A";
    yield "B";
  }
  const it = two();
  console.log(await it.next()); // { value: "A", done: false }
  console.log(await it.next()); // { value: "B", done: false }
  console.log(await it.next()); // { value: undefined, done: true }
})();
ตัววนซ้ำแบบ async — for await...of และเจเนอเรเตอร์ async — ภาพประกอบ 3

Symbol.asyncIterator บนอ็อบเจ็กต์

เพิ่ม [Symbol.asyncIterator]() ที่ส่งคืนตัววนซ้ำแบบอะซิงก์ เพื่อให้อ็อบเจ็กต์ทำงานร่วมกับ for await...of ได้

// Mark a plain object as async-iterable via Symbol.asyncIterator
(async function () {
  const AsyncTwice = {
    from: function (a, b) {
      return {
        a: a, b: b,
        [Symbol.asyncIterator]: async function () {
          let step = 0;
          return {
            next: async function () {
              if (step === 0) { step = 1; return { value: a, done: false }; }
              if (step === 1) { step = 2; return { value: b, done: false }; }
              return { value: undefined, done: true };
            }
          };
        }
      };
    }
  };

  for await (const v of AsyncTwice.from("X", "Y")) {
    console.log("from object:", v);
  }
})();
ตัววนซ้ำแบบ async — for await...of และเจเนอเรเตอร์ async — ภาพประกอบ 4

กระบวนการอะซิงก์แบบ map

ประกอบ เจเนอเรเตอร์แบบอะซิงก์ เข้าด้วยกันเพื่อสร้างกระบวนการขนาดเล็กที่รอแต่ละขั้นตอน

// Async map: transform values lazily while awaiting work
(async function () {
  async function* countAsync(n) {
    for (let i = 1; i <= n; i = i + 1) {
      yield i;
    }
  }

  async function* asyncMap(iterable, fn) {
    for await (const v of iterable) {
      // fn can be async; await its result
      const out = await fn(v);
      yield out;
    }
  }

  const doubled = asyncMap(countAsync(4), async function (x) {
    // simulate async transform (no real delay for demo)
    return x * 2;
  });

  const collected = [];
  for await (const v of doubled) {
    collected.push(v);
  }
  console.log("doubled async:", collected);
})();
ตัววนซ้ำแบบ async — for await...of และเจเนอเรเตอร์ async — ภาพประกอบ 5

แนวปฏิบัติที่ดี

เคล็ดลับ:

  • for await...of ต้องใช้กับ สิ่งที่วนซ้ำแบบอะซิงก์ (Symbol.asyncIterator)
  • ใช้ async function* เพื่อกำหนดเจเนอเรเตอร์แบบอะซิงก์ได้อย่างสะดวก
  • ต้องรอ next() แต่ละครั้งให้เสร็จ ควรทำงานให้สั้นเพื่อให้แอปตอบสนองได้ดี
ตัววนซ้ำแบบ async — for await...of และเจเนอเรเตอร์ async — ภาพประกอบ 6

แบบทดสอบพื้นฐานสิ่งที่วนซ้ำแบบอะซิงก์

ตรวจสอบอย่างรวดเร็ว: ข้อกำหนดของสิ่งที่วนซ้ำแบบอะซิงก์

ตัววนซ้ำแบบ async — for await...of และเจเนอเรเตอร์ async — ภาพประกอบ 7

สรุปทบทวน

สรุปทบทวน: ใช้ async function* และ yield เพื่อสร้างเจเนอเรเตอร์แบบอะซิงก์ วนซ้ำด้วย for await...of หรือรอ next() ด้วยตนเอง สร้างกระบวนการอะซิงก์ขนาดเล็กด้วยเจเนอเรเตอร์ช่วย

ตัววนซ้ำแบบ async — for await...of และเจเนอเรเตอร์ async — ภาพประกอบ 8

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

บทเรียน “ตัววนซ้ำแบบ async — for await...of และเจเนอเรเตอร์ async” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “ตัววนซ้ำแบบ async — for await...of และเจเนอเรเตอร์ async”

ใช้เจเนอเรเตอร์ async และ for await...of เพื่อรับค่าที่เข้ามาตามเวลา เรียนรู้ Symbol.asyncIterator และไปป์ไลน์ async อย่างง่าย คุณปฏิบัติ JavaScript Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

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

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

บทเรียน “ตัววนซ้ำแบบ async — for await...of และเจเนอเรเตอร์ async” ใช้เวลานานแค่ไหน

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

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

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

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

  1. โพรโทคอลแบบวนซ้ำได้และ for...of
  2. ฟังก์ชันเจเนอเรเตอร์ yield และไปป์ไลน์ขนาดเล็ก
  3. ตัววนซ้ำแบบ async — for await...of และเจเนอเรเตอร์ async
← กลับไปที่ JavaScript Academy