如何通过列表运行 $.ajax？答案

【问题标题】：How can I run $.ajax through a list?如何通过列表运行 $.ajax？
【发布时间】：2016-11-06 15:41:02
【问题描述】：

当我多次运行 $.ajax 时，它似乎没有等待 ajax 调用完成，然后继续运行我的代码。当我使用 jsonp 时，设置 'async: false' 不起作用（或者我已经读过）。我必须 jsonp 才能访问 Media Wiki api，所以改变它不是一种选择。我是 Javascript 的初学者，这是我可以使用“承诺”的东西吗？

var articleList = ['Abaft', 'Aspect-oriented%20programming', 'Defecation', 'Feces', 'Perl%20Object-Oriented%20Persistence', 'Poop%20(constellation)', 'Poop%20deck', 'Pooper-scooper', 'Poopy', 'Stern', 'Zoboomafoo'];

function retrieveSummary(jsonp) {
  console.log(jsonp);
}

function fetchSummary() {
  for (var article in articleList) {
    $.ajax({
      url: 'https://en.wikipedia.org/w/api.php?action=parse&page=' + article + '&prop=text&format=json&section=0&callback=?',
      dataType: 'jsonp',
      contentType: 'application/json',
      jsonpCallback: 'retrieveSummary',
    });
  }
}

我得到的输出是 'Poop (constellation)' 的 jsonp 对象，它位于列表的中间。这是我得到的唯一对象，尽管为 articleList 中的每篇文章都调用了回调函数。

【问题讨论】：

“这是我可以使用'承诺'的东西吗？”。是的。
也应该让 jquery 创建回调。为每个请求使用相同的请求是一个问题
“让 jquery 创建回调”是什么意思，对于每个请求使用相同的回调有什么问题？
将jsonpCallback:'retrieveSummry 更改为success:function(resp){ console.log(resp); } 将看到所有响应记录到控制台
为什么调用 'jsonpCallback' 没有看到记录到控制台的所有响应？

标签： javascript jquery ajax

【解决方案1】：

查看 jQuery 文档以了解 $.when() 函数的工作原理，我认为这可能会对您有所帮助 :)

顺便说一句，避免使用 async: false 除非你 100% 确定你需要一个无法用 $.when().done/then/always 归档的同步调用

正如@charlietfl 指出的那样，async: false 不适用于 jsonp 调用。

来自 jQuery 文档：

默认情况下，所有请求都是异步发送的（即设置为默认情况下为真）。如果您需要同步请求，请将此选项设置为错误的。跨域请求和 dataType: "jsonp" 请求不支持同步操作

【讨论】：

请注意，async: false 无论如何都不会对 jsonp 请求执行任何操作
你说得对！我会更新你的笔记，谢谢分享！
另请注意$.when 不接受数组，因此必须使用$.when.apply()，然后循环遍历arguments，因为结果也不是数组。不难做，但没有记录

【解决方案2】：

试试这样的东西（未经测试）：

var articleList = ['Abaft', 'Aspect-oriented%20programming', 'Defecation', 'Feces', 'Perl%20Object-Oriented%20Persistence', 'Poop%20(constellation)', 'Poop%20deck', 'Pooper-scooper', 'Poopy', 'Stern', 'Zoboomafoo'];

Promise.all(articleList.map(function(article) {
    return $.ajax({
        url: 'https://en.wikipedia.org/w/api.php?action=parse&page=' + article + '&prop=text&format=json&section=0&callback=?',
        dataType: 'jsonp',
        contentType: 'application/json',
    });
  })).then(function(results) {
    console.log(results);
});

ajax 调用返回一个promise，Promise.all 等到所有promise 都解决后再回调。

【讨论】：

很高兴有$.when.apply()的替代品并处理它的论点

【解决方案3】：

试试我的例子。

function Timer() {
    this.interval = 1000;
    this.maxloop = 0; //max loop.
    this.onTimerLoop = function () {
    };
    this.onTimerStop = function () {
    };
    var global = this;
    var count = 0;
    var taskID = -1;
    var isWorking = false;
    this.start = function () {
        if (taskID === -1) {
            count = 0;
            isWorking = false;
            taskID = window.setInterval(function () {


                if (!isWorking) {
                    count += 1;
                    isWorking = true;
                    if (global.maxloop > 0 && (count > global.maxloop)) {
                        global.stop();
                    } else {
                        global.onTimerLoop();
                    }
                    isWorking = false;
                }


            }, global.interval);
        }

    };
    this.stop = function () {
        if (taskID !== -1) {
            window.clearInterval(taskID);
            taskID = -1;
            global.onTimerStop();
        }
    };



}

var articleList = ['Abaft', 'Aspect-oriented%20programming', 'Defecation', 'Feces', 'Perl%20Object-Oriented%20Persistence', 'Poop%20(constellation)', 'Poop%20deck', 'Pooper-scooper', 'Poopy', 'Stern', 'Zoboomafoo'];
var timer = new Timer();
timer.interval = 300;
var currentPositionArticle = 0;
var lastCurrentPositionArticle = -1;
timer.onTimerLoop = function () {
    if (currentPositionArticle !== lastCurrentPositionArticle) {
        lastCurrentPositionArticle = currentPositionArticle;
        $.ajax({
            url: 'https://en.wikipedia.org/w/api.php?action=parse&page=' + articleList[currentPositionArticle] + '&prop=text&format=json&section=0&callback=?',
            dataType: 'jsonp',
            contentType: 'application/json',
            jsonpCallback: "retrieveSummary"
        });

        if (currentPositionArticle === articleList.length - 1) {
            timer.stop();
        }
    }
};
timer.start();

function retrieveSummary(jsonp) {
    currentPositionArticle++;
    alert(jsonp);
    wait = false;
}

【讨论】：