Mengapa `menunggu arr.map()` Gagal, dan Bagaimana `Promise.all` Boleh Membetulkannya?

Memahami Async Await dan Array.map Synergy

Dalam coretan kod:

var arr = [1,2,3,4,5];

var results: number[] = await arr.map(async (item): Promise<number> => {
    await callAsynchronousOperation(item);
    return item + 1;
});</number>

anda menerima ralat "TS2322: Taip 'Promise< ;number>[]' tidak boleh diberikan untuk menaip 'number[]'". Ralat ini menandakan ketidakpadanan antara jenis yang dijangkakan (nombor[]) dan jenis sebenar (Janji[]). Untuk menyelesaikan isu ini, kita perlu memahami cara async menunggu dan Array.map berinteraksi.

Isunya

Masalah timbul kerana anda cuba menunggu pelbagai janji (Janji[]), yang berbeza daripada menunggu satu Janji. tunggu, apabila digunakan pada objek yang bukan Janji, hanya mengembalikan nilai serta-merta. Dalam situasi ini, memandangkan anda sedang menunggu tatasusunan objek Promise, nilai yang terhasil ialah tatasusunan itu sendiri (Promise[]).

Penyelesaian

Untuk membetulkan ralat ini, anda boleh menggunakan Promise.all untuk mengubah tatasusunan Promise[] menjadi satu Janji. Menurut dokumentasi MDN, Promise.all menyelesaikan sebaik sahaja semua janji dalam hujah boleh lelar telah diselesaikan. Dalam kod anda, hujah boleh lelar ialah tatasusunan janji yang dikembalikan oleh arr.map.

Dengan menggunakan Promise.all, anda menukar tatasusunan janji anda kepada satu Janji, membolehkan anda menunggu penyelesaian semua janji serentak.

var arr = [1, 2, 3, 4, 5];

var results: number[] = await Promise.all(arr.map(async (item): Promise<number> => {
    await callAsynchronousOperation(item);
    return item + 1;
}));</number>

Sebagai alternatif, pertimbangkan untuk menggunakan Promise.allSettled, Promise.any, atau Promise.race bergantung pada kes penggunaan khusus anda. Walau bagaimanapun, untuk senario yang anda berikan, Promise.all kekal sebagai pilihan yang paling sesuai.

Atas ialah kandungan terperinci Mengapa `menunggu arr.map()` Gagal, dan Bagaimana `Promise.all` Boleh Membetulkannya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!