Javascript：如何使用 ajax 請求在 for 循環內以正確的順序將對象推入數組

Question

所以我有這個腳本連接到視頻服務 api 並且我試圖按 video_codes 數組的順序推送 ajax 請求中提供的視頻標題。 因此，這些視頻代碼用於單獨的視頻，這些視頻提供諸如 api 中的標題之類的信息（ 3t7l1ok4ba得到alicia ， 5cj3ro2ujq得到drew等）

    // 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