Javascript: Как получить объекты в pu sh в массиве в правильном порядке внутри для l oop с запросом ajax

Question

Итак, у меня есть этот скрипт, который подключается к API службы видео, и я пытаюсь извлечь sh заголовки видео, которые подаются в запросе ajax в порядке массива video_codes. Таким образом, эти видео коды предназначены для отдельных видео, которые выдают информацию, такую ​​как заголовки из API (3t7l1ok4ba получает alicia, 5cj3ro2ujq получает drew, et c.)

    // these codes connect to the api and get data
    var video_codes = [
    '3t7l1ok4ba',
    '5cj3ro2ujq',
    'ztodsfeifx',
    'u4g78mwyee'
]

// this is to hold the video titles provided in the api
var names = [];

// for loop makes the different requests
for (i = 0; i < video_codes.length; i++){
    (function(i) {
        var video_request = new XMLHttpRequest()
        video_request.open('GET', 'https://api.wistia.com/v1/medias/'+video_codes[i]+'.json?api_password=', true)
        video_request.onload = function() {
          var video = JSON.parse(this.response)
          var video_name = video.name;

          // add to names array
          names.push(video_name);
          // console log names array 4 times
          console.log(names)
        }
        video_request.send()
    })(i);
}

скрипт работает в том смысле, что он помещает имена в массив имен и журналы консоли, но они не соответствуют порядку массива video_codes.

Так, например, 3t7l1ok4ba выталкивает alicia, но иногда alicia будет второй, третьей или четвертой записью. Это совершенно случайно, я получаю разные результаты каждый раз, когда запускаю скрипт. Любая помощь будет принята с благодарностью!

Answer 1

Проблема в том, что журнал консоли представляет собой порядок ответа API. Вы делаете все запросы одновременно, поэтому второй запрос может вернуться раньше первого. Один из способов поддержания заказа - выполнение следующего запроса только после предыдущего:

function loadVideo(i) {
  if (i < video_codes.length) {
    var video_request = new XMLHttpRequest()
    video_request.open('GET', 'https://api.wistia.com/v1/medias/'+video_codes[i]+'.json?api_password=', true)
    video_request.onload = function() {
      var video = JSON.parse(this.response)
      var video_name = video.name;

      // add to names array
      names.push(video_name);
      // console log names array 4 times
      console.log(names);
      loadVideo(i + 1); // Load next only after response received
    }
    video_request.send()
  }
}

loadVideo(0); // Load first video