Estoy tratando de establecer un número aleatorio para todas las frutas en la matriz y devolver un objeto que contiene todas las frutas con la función asíncrona en el reductor, pero solo se devuelve el último elemento de la matriz
(async () => console.log( await [("apple", "banana", "orange")].reduce(async (o, fruit) => { const random_number = await new Promise((resolve) => setTimeout(() => resolve(Math.random()), 200)); return { ...o, [fruit]: random_number }; }, {}) ))();Estás muy cerca. El problema principal es que escribió la matriz como [(...)] en lugar de [...] . En su código, la matriz solo contiene un valor, si elimina el () tendrá tres valores. Ver operador de coma para más detalles.
La otra cosa que debe considerar es que una función async siempre devuelve una promesa, por lo que también debe await o :
(async () => console.log( await ["apple", "banana", "orange"].reduce(async (o, fruit) => { const rand = new Promise((resolve) => setTimeout(() => resolve(Math.random()), 200)) return { ...await o, [fruit]: await rand } }, {}) ))(); { "apple": 0.8731611352383968, "banana": 0.163521266739585, "orange": 0.8419246752641664 } Tenga en cuenta que reduce como se usó anteriormente resolverá las promesas en serie (secuencialmente). Otros comentarios que sugieren map -> Promise.all resolverá las promesas en paralelo (simultáneamente)
Si agrega otra consola, inicie sesión en el reductor, puede ver lo que está sucediendo.
(async () => console.log( await [("apple", "banana", "orange")].reduce(async (o, fruit) => { console.dir({o, fruit}) const random_number = await new Promise((resolve) => setTimeout(() => resolve(Math.random()), 200)); return { ...o, [fruit]: random_number }; }, {}) ))();producción:
{ o: {}, fruit: 'orange' } { orange: 0.39647395383957074 } Esto se debe a que ha envuelto su elemento de matriz entre paréntesis [("apple", "banana", "orange")] por lo que solo hay un elemento para reducir.
Después de arreglar esto, la salida es
{ o: {}, fruit: 'apple' } { o: Promise { <pending> }, fruit: 'banana' } { o: Promise { <pending> }, fruit: 'orange' } { orange: 0.8347447113637538 }Ahora puedes ver que las promesas no se esperan debidamente. @Mulan ya dio la respuesta para esto, así que no lo repetiré.
Sugeriré usar map en lugar de reduce para esto. Esto evitará que las promesas se bloqueen entre sí, en su código de reducción, el reductor debe esperar a que se complete una promesa antes de pasar a la siguiente. Si reúne todas las promesas y las espera usando Promise.all , puede evitar esto.
(async () => { //map the array to an array of promises const promises = ["apple", "banana", "orange"].map(async (fruit) => { const random_number = await new Promise((resolve) => setTimeout(() => resolve(Math.random()), 200)); return { [fruit]: random_number }; }); //wait for all promises to resolve const results = await Promise.all(promises); //merge the result objects together const result = Object.assign(...results); console.log(result) })();