异步函数不等待等待获取

Question

我有一个必须验证来自 Spotify API 的艺术家的函数，但是当我运行它时，艺术家 [] 仍然为空，因为该函数没有等待提取，它填充变量用户而没有设置艺术家。

let artists = []

function setArtists(input) {
  artists.length = 0
  let parsedInput = input.value.split(",")
  parsedInput.forEach(artist => {
    validateArtist(artist)
  })
}

async function validateArtist(s) {
  let token = localStorage.getItem("Token")
  let url = "https://api.spotify.com/v1/search?type=artist&q=" + s
  console.log(url)
  await fetch(url, {
      "method": "GET",
      "headers": {
        'Accept': 'application/json',
        'Content-Type': 'application/json',
        "Authorization": "Bearer " + token,
      }
    })
    .then(response => {
      if (response.status === 401) {
        refreshToken(s)
      }
      return response.json()
    })
    .then(searchedResults => searchedResults.artists.items.length != 0)
    .then(isArtist => {
      if (isArtist) {
        artists.push(s)
      }
    })
}

这里是我调用函数的地方，我之前调用它是为了填充艺术家变量。

setArtists(document.getElementById("artistiPreferiti"))
    var user = {
            username: document.getElementById("username").value,
            email: document.getElementById("email").value,
            password: document.getElementById("password").value,
            gustiMusicali: document.getElementById("gustiMusicali").value,
            artistiPreferiti: artists
    }    
 

我该如何解决？

Answer 1

带有 async await 的 forEach 永远不会像您期望的那样工作。使用常规 for 循环

• JaromandaX

我们的 setArtist() 函数也需要异步，它需要等待验证函数调用。其他的东西将不得不等待调用它，因为只有在 promise 得到满足之后，数组才会按照你的预期进行更新。

• @Pointy

let artists = []

function async setArtists(input) {
  artists.length = 0
  let parsedInput = input.value.split(",")
  for(let i = 0; i < artists.length; i++){
     await validateArtist(artists[i]);
  }
}

async function validateArtist(s) {
  let token = localStorage.getItem("Token")
  let url = "https://api.spotify.com/v1/search?type=artist&q=" + s
  console.log(url)
  await fetch(url, {
      "method": "GET",
      "headers": {
        'Accept': 'application/json',
        'Content-Type': 'application/json',
        "Authorization": "Bearer " + token,
      }
    })
    .then(response => {
      if (response.status === 401) {
        refreshToken(s)
      }
      return response.json()
    })
    .then(searchedResults => searchedResults.artists.items.length != 0)
    .then(isArtist => {
      if (isArtist) {
        artists.push(s)
      }
    })
}