ตัววนซ้ำแบบ 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 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);
}
})();
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 }
})();
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);
}
})();
กระบวนการอะซิงก์แบบ 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);
})();
แนวปฏิบัติที่ดี
เคล็ดลับ:
- for await...of ต้องใช้กับ สิ่งที่วนซ้ำแบบอะซิงก์ (Symbol.asyncIterator)
- ใช้ async function* เพื่อกำหนดเจเนอเรเตอร์แบบอะซิงก์ได้อย่างสะดวก
- ต้องรอ next() แต่ละครั้งให้เสร็จ ควรทำงานให้สั้นเพื่อให้แอปตอบสนองได้ดี

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

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

คำถามที่พบบ่อย
บทเรียน “ตัววนซ้ำแบบ 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 ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- โพรโทคอลแบบวนซ้ำได้และ for...of
- ฟังก์ชันเจเนอเรเตอร์ yield และไปป์ไลน์ขนาดเล็ก
- ตัววนซ้ำแบบ async — for await...of และเจเนอเรเตอร์ async