javascript - 如何使用 Promise 获取多个 Ajax 请求

Question

我试图从每个 ajax 请求中获取单个图像并将其附加到 li 框容器中，第一个 ajax 返回 20 个对象的列表，其中包含名称和 url

$.ajax({
  url: "http://pokeapi.co/api/v2/pokemon/",
  dataType: "json",
  method: "GET",
  cache: false,
  success: function(data) {
    for (var i = 0; i<data.results.length ;i++){
      $("#root ul").append('<li class="box"></li>');
      $("li").eq(i).append('<h2>' + data.results[i].name +'</h2>');
    }
    setPkmImage(data.results);
    console.log(data);
  },
  error: function(data) {
    console.log("Error");
  }

});

当我尝试调用每个对象来请求图像时，问题就开始了，它与 async: false 一起工作，但我不想那样做，因为它需要很多时间加载所有图像。

function setPkmImage(res){
  for (var i = 0; i < res.length; i++) {

    var promise = $.ajax({
      url: res[i].url,
      dataType: "json",
      method: "GET",
      cache: false,
      //async: false,
      promise.done( function(data) {
        console.log(data);
        $("#root ul");
        $("li").eq(i).append('<img src="' + data.sprites.front_default+ '"/>');

      });
      promise.fail( function(data) {
        console.log("Error");
      });

    });
   }
  }

我正在尝试使用 Promise，但我不知道如何构建它

Answer 1

两个主要问题，一个是语法，另一个是你需要一个闭包循环

首先，$.ajax 未正确关闭。

应该看起来更像:

 var promise = $.ajax({
      url: res[i].url,
      dataType: "json",
      method: "GET",
      cache: false
 });

 promise.done(...
 promise.fail(...

至于闭包循环，i 不会是您希望它在 ajax 回调中的样子，因为 for 循环将在数据 for 之前完成。请求被返回。因此 i 届时将达到最大值

尝试将 for 循环更改为 $.each 以创建闭包

$.each(res, function(i, item){

       var promise = $.ajax({
          url: item.url,
          dataType: "json",
          method: "GET",
          cache: false
     });

     promise.done(...
     promise.fail(...

})