Gelung Async dalam JavaScript: for...of vs forEach

Keupayaan async JavaScript agak hebat ?, tetapi memilih gelung yang betul untuk mengendalikan tugas async tersebut boleh membuat perbezaan yang besar. Mari kita pecahkan perbezaan antara untuk...daripada dan untukSetiap dengan percikan keseronokan ?

1. untuk...Gelung dengan Fungsi Async
Bayangkan gelung for...of sebagai rakan anda yang sangat rajin yang menunggu dengan sabar untuk anda menyelesaikan satu tugasan sebelum memulakan tugasan seterusnya. Ia seperti menunggu kopi anda dibancuh sebelum anda memulakan tugas seterusnya.

for (const item of items) {
  await doSomethingAsync(item);
}

Andaikan anda mempunyai pelbagai tugasan yang masing-masing mengembalikan janji yang telah diselesaikan dengan kelewatan:

function doSomethingAsync(item) {
  return new Promise((resolve) => {
    setTimeout(() => resolve(`Processed ${item}`), 1000);
  });
}

async function processItemsSequentially(items) {
  for (const item of items) {
    try {
      const result = await doSomethingAsync(item);
      console.log(result);
    } catch (error) {
      console.error(`Oops! Error with ${item}:`, error);
    }
  }
}

const items = ['Task 1', 'Task 2', 'Task 3'];
processItemsSequentially(items);

processItemsSequentially menunggu setiap panggilan doSomethingAsync selesai sebelum beralih ke item seterusnya.

Mengapa Anda Akan Menyukainya:

?️ Sabar: Ia menunggu setiap tugas async selesai sebelum meneruskan. Ini semua tentang kehidupan yang teratur itu.

? Pengendalian Ralat: Anda boleh menangkap dan mengendalikan ralat dengan mudah dalam gelung.

? Sesuai Untuk: Apabila anda memerlukan sesuatu dilakukan dengan teratur – seperti memasak hidangan yang anda tidak boleh membakar kek sebelum mencampurkan adunan XD.

---

2. forEach dengan Fungsi Async
Sebaliknya, forEach adalah seperti sekumpulan rakan yang semuanya memulakan tugas mereka pada masa yang sama. Mereka teruja dan mahu menyelesaikan secepat mungkin. Mereka tidak peduli jika seseorang selesai sebelum yang lain; mereka hanya melakukannya!

items.forEach(async (item) => {
  await doSomethingAsync(item);
});

Mari kita gunakan fungsi doSomethingAsync yang sama tetapi dengan forEach:

async function processItemsConcurrently(items) {
  items.forEach(async (item) => {
    try {
      const result = await doSomethingAsync(item);
      console.log(result);
    } catch (error) {
      console.error(`Whoops! Issue with ${item}:`, error);
    }
  });
}

const items = ['Task A', 'Task B', 'Task C'];
processItemsConcurrently(items);

processItemsConcurrently memulakan semua panggilan doSomethingAsync serentak, jadi semua tugas berjalan selari.

Mengapa Ia Seronok:

?‍♂️?‍♀️ Perlaksanaan Selari: Semua tugasan bermula serentak, yang boleh menjadi sangat pantas tetapi agak huru-hara.

✂️ Sintaks Lebih Ringkas: Selalunya lebih pendek dan lebih ringkas daripada untuk...daripada.

? Sesuai Untuk: Apabila tugasan tidak bergantung antara satu sama lain dan boleh dilakukan secara bebas, seperti mengambil data daripada berbilang API.

Ingat:
kerana...daripada adalah rakan tertib anda yang menunggu giliran.
forEach adalah tentang melompat masuk pada masa yang sama dan menyelesaikan sesuatu dengan pantas.

untuk...membolehkan anda menangkap kesilapan satu demi satu, yang kemas dan kemas.
forEach membuatkan anda mengendalikan ralat dengan cepat, seperti menyulap berbilang bola.

untuk...mungkin agak perlahan, tetapi ia kemas dan teratur.
forEach boleh menjadi lebih pantas jika anda tenang dengan kekacauan dan tugasan tidak bertindih.

Pilih gelung yang sesuai dengan keperluan anda berdasarkan sama ada anda memerlukan ketertiban dan kesabaran atau kelajuan dan keseronokan! ??

Atas ialah kandungan terperinci Gelung Async dalam JavaScript: for...of vs forEach. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!