How to finish all fetch before executing next function in React?

Question

Using ReactJS, I have two different API points that I am trying to get and restructure: students and scores. They are both an array of objects.

Answer 1

I believe you need to wrap your functions in arrow functions. The functions are being invoked as the promise chain is being compiled and sent to the event loop. This is creating a race condition.

    function getStudentsAndScores(cbStudent, cbScores, cbStudentsScores){
  getStudents(cbStudent).then(() => getScores(cbScores)).then(cbStudentsScores);
}

I recommend this article for additional reading: We Have a Problem with Promises by Nolan Lawson

And here's a repo I made that has an example for each of the concepts talked about in the article. Pinky Swear