对 API onload 使用 Async-Await

Question

I've been working on this little hangman game project.

I added an api to grab an array of random words, but the array is not loading when I call it outside the request.onload . The function displayWord() is outside request.onload and uses apiArr . When I console.log(apiArr) it is empty because it is not waiting for the api to get the data for the array.

I figured I can just move everything inside the request.onload, but I felt like that would look messy.

Is there a way to use async-await to so it can wait for the onload and look clean?

The code snippet below will not run since this is just some partial code and I don't want to put the api key public, but I hope it helps with the concept.

 let apiArr= []; //making a request to get word array let request = new XMLHttpRequest(); request.open('GET', apiURL); request.responseType = 'json'; request.send(); request.onload = function() { const wordArr = request.response; //taking the word array and adding each word to the empty apiArr. for(let i = 0; i < wordArr.length; i++) { let newWordArr = wordArr[i].word; console.log(newWordArr); apiArr.push(newWordArr); } } //If I try to use the apiArr anywhere other than inside the request.onload, the array loads as an empty array instead of waiting for the resquest to fill it out. //I have a function called displayWord that uses apiArr ( i did not put the whole this b/c its long. // How can I make it so it waits for the api request using async/await? displayWord();

Answer 1

Since displayWord needs appArr , consider making it an async function and using the fetch API to make the request. So it should look something like this.

async function displayWord() {
  let appArr;
  try {
     appArr = await fetch(apiURL).then(res => res.json());
     // do stuff with your  appArr here
  } catch(err) {
    console.error(err)
  }
}

displayWord();

I'm wrapping it in a try/catch block, just so if your request fails you can see the errors in the console