ループ内でAPI応答を待つ

Question

配列全体を反復処理して各アイテムのREST API呼び出しを行いますが、jsの非同期性に問題があります。私はasync/awaitを使用しようとしていますが、私は応答を待つことなく未定義を返すので正しく設定しているとは思いません。

onSearchSuccess = async (response) => { 
    const persons = response._embedded.persons_search_collection; 
    const personsWithClasses = await persons.reduce(
    (acc, person) => { 
    const params = { 
     person_id: person.person_id, 
     date: '2017-01-05', 
     enrollment_status: 3, 
     class_status: 2, 
    }; 
    return getClasses(//this function does an GET request and returns the response 
     params, 
     (classesResponse) => { 
     const { classes } = classesResponse._embedded; 
     console.log(classes); //logs after the console.log below 
     return [...acc, { ...person, classes }]; 
     }, 
    () => acc, 
    ); 
    }, []); 
console.log(personsWithClasses); //return undefined 
} 


export const getClasses = (params, success, error) => { 
    axios.get(`${uri}/classes`, { params }) 
    .then(({ data }) => { 
    success(data); 
    }) 
    .catch(err => error(err)); 
}; 

Answer 1

私がコメントで述べたように、reduceは、非同期機能を呼び出す場合、あなたが望むように機能しません。あなたは（私はasync/awaitにできるだけ多くを使用しようとした）ようにPromise.allと.mapを使用することができます。

onSearchSuccess = async (response) => { 
    const persons = response._embedded.persons_search_collection; 
    let personsWithClasses = await Promise.all(persons.map(async (person) => { 
    try { 
     const classes = await getClasses({ 
     person_id: person.person_id, 
     date: '2017-01-05', 
     enrollment_status: 3, 
     class_status: 2, 
     }); 

     return {...person, classes}; 
    } catch(error) { 
     // ignore errors if a person wasn't found 
     return null; 
    } 
    })); 
    personsWithClasses = personsWithClasses.filter(x => x != null); 
    console.log(personsWithClasses); 
} 


export const getClasses = params => { 
    return axios.get(`${uri}/classes`, { params }); 
}; 

また、私はgetClassesに加えられた変更に注意してください。とにかくaxios.getが約束を返すなら、コールバックを受け入れる理由はありません。