ปัญหาการใช้งาน async, await ใน Loop ของ Javascript

24 May 2022,
Share: 
Cover image

สวัสดีครับ ในบทความนี้เราจะมาเรียนรู้ปัญหาการใช้งาน Async, Await กับ Loop ชนิดต่างๆใน Javascript เมื่อเราใช้ Async, Await ใน Loop แต่ละชนิดจะให้ผลออกมาไม่เหมือนกัน Loop บางชนิดจะ Await รอในแต่ละครั้งของการวน Loop แต่สําหรับ Loop บางชนิดจะไม่รอ ดังนั้นมาดูกันครับว่า Loop แต่ละชนิดมีการทํางานกับ Async, Await อย่างไรบ้าง ดังนี้ครับ

For loop แบบธรรมดาทั่วไป

สําหรับ For loop แบบธรรมดาทั่วไป ทุกๆครั้งของการวน Loop จะ Await รอครับ มาดูตัวอย่างกัน

(async () => {
  const myProcess = [
    () => new Promise((resolve) => setTimeout(() => resolve('Task1 done.'), 5000)),
    () => new Promise((resolve) => setTimeout(() => resolve('Task2 done.'), 3000)),
    () => new Promise((resolve) => setTimeout(() => resolve('Task3 done.'), 1000)),
  ];

  for (let i = 0; i < myProcess.length; i++) {
    const res = await myProcess[i]();
    console.log(res);
  }

  console.log('Complete');
})();

จะได้ผลดังนี้

async-await-loop1

จากด้านบนผลลัพธ์แสดงผลออกมาตามลําดับคือ Task1, Task2, Task3, Complete หมายความว่า For loop รูปแบบนี้ จะ Await รอทุกครั้งที่วน Loop ครับ

for…in และ for…of

สําหรับ for…in และ for…of ทั้งสองแบบนี้จะ Await รอ และทํางานไปตามลําดับครับ มาดูตัวอย่างกันครับ

(async () => {
  const myProcess = [
    () => new Promise((resolve) => setTimeout(() => resolve('Task1_ done.'), 5000)),
    () => new Promise((resolve) => setTimeout(() => resolve('Task2 done.'), 3000)),
    () => new Promise((resolve) => setTimeout(() => resolve('Task3 done.'), 1000)),
  ];

  // for...in
  for (const item in myProcess) {
    const res = await myProcess[item]();
    console.log(res);
  }

  console.log('---------------');

  // for...of
  for (const item of myProcess) {
    const res = await item();
    console.log(res);
  }

  console.log('Complete');
})();

จะได้ผลดังนี้

async-await-loop3

Array forEach() and map()

สําหรับ forEach() และ map() จะมีการทํางานเหมือนกันคือ ทุกๆครั้งที่วน Loop จะไม่ Await รอครับ มาลองดูตัวอย่างของ forEach() กันก่อนครับ

(async () => {
  const myProcess = [
    () => new Promise((resolve) => setTimeout(() => resolve('Task1 done.'), 5000)),
    () => new Promise((resolve) => setTimeout(() => resolve('Task2 done.'), 3000)),
    () => new Promise((resolve) => setTimeout(() => resolve('Task3 done.'), 1000)),
  ];

  await myProcess.forEach(async (task) => {
    const res = await task();
    console.log(res);
  });

  console.log('Complete');
})();

จะได้ผลดังนี้

async-await-loop2

จากผลลัพธ์ด้านบน จะเห็นว่า Task ต่างๆ ไม่ทํางานไปตามลําดับ หมายความว่าใน Loop จะไม่รอให้ Task เสร็จก่อนแล้วจึงจะไปทํา Task ถัดไป คือจะวนทํารวดเดียวแล้วก็จบ Loop ไปเลย ถึงแม้ว่าเราจะใส่ await ไว้ข้างหน้า myProcess แล้วก็ตาม

มาดูตัวอย่างของ map() บ้างครับ

(async () => {
  const myProcess = [
    () => new Promise((resolve) => setTimeout(() => resolve('Task1 done.'), 5000)),
    () => new Promise((resolve) => setTimeout(() => resolve('Task2 done.'), 3000)),
    () => new Promise((resolve) => setTimeout(() => resolve('Task3 done.'), 1000)),
  ];

  const resultOfMap = await myProcess.map(async (it) => {
    const res = await it();
    console.log(res);
  });

  console.log('Result from map(): ', resultOfMap);
  console.log('Complete');
})();

จะได้ผลดังนี้

async-await-loop4

จะเห็นว่าทั้ง forEach() และ map() จะมีการทํางานไม่ต่างกัน แต่จะมีสิ่งที่ต่างกันคือ map() จะ return array ออกมาเท่านั้นเอง ซึ่งในตัวอย่างจะ return array ของ promise ออกมาเพราะว่า map() จะไม่ await รอครับ

สรุป

  • For loop แบบธรรมดาทั่วไป —> ✅ รอ
  • for…in และ for…of —> ✅ รอ
  • Array forEach() and map() —> ❌ ไม่รอ

มาถึงตรงนี้ทําให้เรารู้ว่าการใช้งาน Async, Await กับ Loop ชนิดต่างๆ ก็ได้ผลออกมาไม่เหมือนกัน ลองทําไปใช้งานกันดูนะครับ แล้วเจอกันใหม่บทความหน้านะครับ ขอบคุณครับ

Suggestion blogs

Deno คืออะไร ว่ากันว่าจะมาแทน Node.js

สวัสดีครับ บทความนี้ผมจะมาเรียนรู้กันนะครับว่า Deno คืออะไร มีฟีเจอร์สำคัญอะไรบ้าง รวมไปถึงการใช้งานเบื้องต้นDeno เป็น JavaScript Runtime เหมือนกับ Node.js เลยครับ ผู้สร้าง Deno คือ Ryan Dahl ซึ่งเป็นคนเดียวกันกับผู้ที่เริ่มโครงการ Node.js ตั้งแต่ปี 2009 หลังจากนั้นเค้าก็ได้ออกจากโครงการ Node.js ไปเมื่อปี 2012 และกลับมาพัฒนาโครงการ Deno โดยใช้ภาษา Rust ในการพัฒนา และกล่าวด้วยว่า Deno นั้นสร้างขึ้นมาเพื่อลบข้อเสียของ Node.js ตอนนี้ Deno ก็ออกเวอร์ชั่น 1.0 พร้อมสําหรับการใช้งานจริงแล้ว

ทําความรู้จักกับ Podman

สวัสดีครับ ในบทความนี้เราจะมาทําความรู้จักกับ Podman กัน ซึ่งเป็นทางเลือกใหม่สําหรับผู้ที่ใช้งาน Docker โดยเราจะมาดูกันว่า Podman คืออะไร และมีความแตกต่างจาก Docker อย่างไร

Config proxy for docker

สวัสดีครับ บทความนี้เป็นเรื่องเกี่ยวกับการใช้ Docker ผ่าน Proxy เราจะมาดูถึงวิธีการ Config กันครับ ซึ่งวิธีการ Config proxy ให้กับ Docker นั้นไม่ยาก ทําตามขั้นตอนนี้ได้เลย


Copyright © 2019 - 2025 thiti.dev |  v1.57.0 |  Privacy policy | 

Build with ❤️ and Astro.

Github profile   Linkedin profile   Instagram   X profile   Nostr   Youtube channel   Telegram   Email contact   วงแหวนเว็บ