时间戳

首页 > 解决方案 > 如何将多个异步 $.get 请求的结果存储在数组中？

javascript - 如何将多个异步 $.get 请求的结果存储在数组中？

问题描述

我有一个存储在数组中的项目列表。对于数组中的每个项目，我需要发出一个 API 请求并将一些返回到另一个数组中的数据添加，以便稍后可以对其执行操作。

我认为问题在于我的获取请求是异步的，因此当我尝试将数据添加到数组时不一定会加载数据，但我认为这.then就是应该涵盖的内容。

var cardRequestList = ["Scapeshift","Ghostform", "Daybreak Chaplain"]

var url = "https://api.magicthegathering.io/v1/cards?name=%22";

var cardInfo =[];

for (var cardName in cardRequestList){
  var results = getCard(cardRequestList[cardName]);
  cardInfo.push(results);
}

console.log(cardInfo); // results should come back here

function getCard(cardName){
    var cardUrl = url.concat(cardName,"%22");
    $.get(cardUrl).then(
    function(data) {
      var temp = [data.cards[0].name,data.cards[0].printings]
      return temp;
    }, function() {
      alert( "$.get failed!" );
    }
  );
}

标签： javascriptjquery

解决方案

then()仅适用于调用它的特定请求。

要解决您遇到的问题，您可以在循环中发出请求，将从这些调用返回的 jqXHR 对象添加到数组中，然后您可以$.when()在所有请求完成后应用该数组来执行一些其他逻辑。

在请求本身中，您需要将返回的数据添加到数组中，因为您无法从异步调用中返回任何内容。

综上所述，您的代码将如下所示：

var cardRequestList = ["Scapeshift", "Ghostform", "Daybreak Chaplain"]
var url = "https://api.magicthegathering.io/v1/cards?name=%22";
var cardInfo = [];

var requests = cardRequestList.map(function(cardName) {
  return getCard(cardName);
});

function getCard(cardName) {
  var cardUrl = url.concat(cardName, "%22");
  return $.get(cardUrl).then(function(data) {
    cardInfo.push([data.cards[0].name, data.cards[0].printings]);
  }, function() {
    alert("$.get failed!");
  });
}

$.when.apply($, requests).done(function() {
  // all requests finished and cardInfo has been populated, place logic here...
  console.log(cardInfo);
});

推荐阅读