Estoy tratando de obtener un resultado combinado de varias promesas dentro de un gancho React. Pero cuando uso el gancho, la función getAll devuelve inmediatamente vacío, en lugar de devolver todos los MyType .
Mi Hook: ( api.get devuelve una Promise<MyType[]> )
function useMyHook() { const api = useApiService(); return { getAll, }; function getAll(arr: number[]): MyType[] { const results: MyType[] = []; for (const u of arr) { api.get(u).then((res) => { results.push(...res); }); } return [...new Set(results)]; } }Uso:
function MyComponent() { // ... const myHook= useMyHook(); const use = () => { // ... const numbers = [1, 2, 3]; const myTypes = myHook.getAll(numbers); const count = myTypes.length; // this will always be 0 // ... }; }¿Cómo puedo hacer que esto funcione? He probado varias versiones con encadenamiento de promesas y async/await, pero fue en vano.
Dado que api.get devuelve una promesa, getAll también deberá devolver una promesa. No puede devolver MyType[] , ya que lleva tiempo ensamblar esa matriz. Yo usaría Promise.all para crear una nueva promesa que esperará las promesas individuales y luego tendrá algo de código para combinar los resultados.
Con asíncrono/espera:
function async getAll(arr: number[]): Promise<MyType[]> { const promises: Promise<MyType[]>[] = []; for (const u of arr) { promises.push(api.get(u)); } const results = await Promise.all(promises); // results is an array of arrays, so we need to flatten it return [...new Set(results.flat())]; } // used like: const use = async () => { // ... const numbers = [1, 2, 3]; const myTypes = await myHook.getAll(numbers); const count = myTypes.length; // ... }; O si prefieres usar .then :
function getAll(arr: number[]): Promise<MyType[]> { const promises: Promise<MyType[]>[] = []; for (const u of arr) { promises.push(api.get(u)); } return Promise.all(promises).then(results => { // results is an array of arrays, so we need to flatten it return [...new Set(results.flat())]; }); } // used like: const use = () => { // ... const numbers = [1, 2, 3]; myHook.getAll(numbers).then(myTypes => { const count = myTypes.length; // ... }); };