时间戳

首页 > 解决方案 > 带有事件循环的 AJAX 请求

javascript - 带有事件循环的 AJAX 请求

问题描述

我正在寻找创建一个运行带有事件循环的 AJAX 请求的函数。它旨在将这 9 个输入放在顶部，并通过事件循环运行 AJAX 从数据库中请求它们。现在我只是让它做console.log，但最终会让它做一些其他很酷的事情。但是它不起作用，我收到一个错误“未定义”，所以我很好奇我错过了什么？

var cards = [
  "Black Lotus",
  "Mox Pearl",
  "Mox Sapphire",
  "Mox Jet",
  "Mox Ruby",
  "Mox Emerald",
  "Time Walk",
  "Timetwister",
  "Ancestral Recall",
];

for (var i = 0; i < cards.length; i++) {
  function renderBinder() {
    var cardName = cards[i];

    var queryURL = "https://api.scryfall.com/cards/named?fuzzy=" + cardName;

    $.ajax({
      url: queryURL,

      method: "GET",
    }).then(function (response) {
      console.log(response.name);
    });
  }
}

标签： javascriptajaxloopsfor-loopevents

解决方案

如果您想每次使用不同的卡按顺序发出 AJAX 请求，您可以这样做。该函数getCardDetails将一组卡片作为输入。它从列表中删除一张卡片并进行 AJAX 调用，在该调用成功时，我们再次调用相同的函数，这次输入数组将没有已经调用的卡片。

var cards = [
  "Black Lotus",
  "Mox Pearl",
  "Mox Sapphire",
  "Mox Jet",
  "Mox Ruby",
  "Mox Emerald",
  "Time Walk",
  "Timetwister",
  "Ancestral Recall",
];

function getCardDetails (cards) {
    if (cards.length) {
        $.ajax({
            method: 'GET',
            url: "https://api.scryfall.com/cards/named?fuzzy=" + cards.pop()
        })
        .then((response) => {
            console.log(response);
            getCardDetails(cards);
        });
    }
}

getCardDetails(cards); // Logs the response of each request

推荐阅读