Последовательный AJAX вызывает forEach - почему я не вижу результаты?

Question

Примечание: я знаю, что, вероятно, я делаю это неправильно, и я хотел бы получить совет о том, как лучше это написать.

У меня есть функция, которая при получении идентификатора пользователя вызывает два API, чтобы получить 1. Список всех лиг, в которых используется идентификатор пользователя. 2. Список всех пользователей в каждой из этих лиг.

$.ajax({
  type: "get",
  url: "/api/user/" + userID,
  dataType: "json",
  success: function(response) {
    response.leagues.classic.forEach(element => {
      if (element.short_name == null) {
        myLeagues.push(element.id);
      }
    });

  }
}).then(function() {
  myLeagues.forEach(leagueid => {
    $.ajax({
      type: "get",
      url: "/api/league/" + leagueid,
      dataType: "json",
      success: function(response) {
        if (response.standings.results.length < 30) {
          response.standings.results.forEach(element => {
            myOpponents.push(element.player_name)
          });
        }
      }
    });
  })
}).then(function() {
  console.log(myOpponents);
  myOpponents.forEach(opponent => {
    console.log(opponent)
  });
})

console.log(myOpponents) выводит массив со всеми противниками, как и ожидалось

console.log(opponent) через две строки ничего не выводится.

Можете ли вы объяснить, почему это так, и предложить лучший способ написания всей этой функции? Спасибо

Answer 1

Попробуйте это:

async function someFunc(userID) {
  let myLeagues = [];
  let myOpponents = [];

  try {
    const results = await $.ajax({
      type: "get",
      url: "/api/user/" + userID,
      dataType: "json"
    });

    results.forEach(element => {
      if (element.short_name == null) {
        myLeagues.push(element.id);
      }
    });

    let leagues = myLeagues.map(leagueid => {
      return $.ajax({
        type: "get",
        url: "/api/league/" + leagueid,
        dataType: "json"
      })
    })

    let leagueDatas = await Promise.all(leagues);

    leagueDatas.forEach(val => {
      if (val.standings.results.length < 30) {
        val.standings.results.forEach(element => {
          myOpponents.push(element.player_name)
        });
      }
    })

    myOpponents.forEach(opponent => {
      console.log(opponent)
    });
  } catch (e) {
    // handle error
  }
}
someFunc(1)