Question

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

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");
      });

    });
   }
  }

当我尝试调用每个对象来请求图像时，问题就开始了，它与async：false一起使用，但是我不希望这样做，因为它花了很多时间加载所有图像。

$mini :0.1rem;
 $brown:#533a38;
 @mixin border($color:$brown){border:$mini solid $color;}

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

Answer 1

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

首先$.ajax未正确关闭。

看起来应该更像：

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

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

至于闭包循环，i不会成为你希望它在ajax回调中的内容，因为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(...

})

Answer 2

我通常使用下一个解决方案。第一次请求完成后，我已经用url插入dom img（url来自请求），浏览器会自动加载图片。

如何使用promises获取多个ajax请求

2 个答案: