ข้อผิดพลาดทั่วไปใน JavaScript คือการใช้งานasync/awaitร่วมกับforEach. ลองดูตัวอย่างที่มีฟังก์ชันอะซิงโครนัสแบบธรรมดา ( asyncPrint) ที่พิมพ์ค่าไปยังคอนโซล สมมติว่าเราต้องการเรียกมันตามลำดับสำหรับทุกค่าในอาร์เรย์ผ่านforEach:

เราอาจคาดหวังผลลัพธ์ต่อไปนี้:

1
2
3

อะไรคือปัญหา?

forEachคาดว่าจะมีฟังก์ชันซิงโครนัส ซึ่งหมายความว่าจะไม่ รอฟังก์ชันอะซิงโครนัสที่ส่งผ่านของเรา หากเราคิดเป็นอย่างอื่นเราอาจคาดหวังว่าลูปจะเทียบเท่ากับรหัสต่อไปนี้:

await asyncPrint(1);
await asyncPrint(2);
await asyncPrint(3);

asyncPrint(1);
asyncPrint(2);
asyncPrint(3);

แต่เราจะบรรลุสิ่งที่เราต้องการในตอนแรกได้อย่างไร? แม้ว่าจะมีวิธีแก้ไขปัญหานี้หลายวิธี แต่วิธีที่ง่ายที่สุดคือการใช้for..of คำสั่ง:

สิ่งนี้จะสร้างผลลัพธ์ที่เราต้องการ

สรุป

แม้ว่าจะเป็นเอกสารข้อเท็จจริงที่Array.prototype.forEach()คาดว่าจะมีฟังก์ชันซิงโครนัส แต่ก็ยังอาจทำให้เกิดข้อผิดพลาดได้หากคุณไม่รู้ ปัญหาคือคุณสามารถส่งผ่านฟังก์ชันอะซิงโครนัสได้อย่างง่ายดายและคุณจะไม่ได้รับคำเตือนใด ๆ ดังนั้นคุณสามารถผ่านมันไปได้และคิดว่ารหัสของคุณจะใช้งานได้ยกเว้นจะไม่ทำ

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

อ้างอิง

• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach
• https://tc39.es/ecma262/#sec-array.prototype.foreach