时间戳

首页 > 解决方案 > 如何使 ajax 同步而不是使用 async:false？

javascript - 如何使 ajax 同步而不是使用 async:false？

问题描述

我在使用 ajax 异步时遇到了一些问题。我有一个数组，然后循环遍历数组以进行 ajax 调用，如果成功，ajax 将返回一个 xml 字符串，我将使用它来填写表格并更新进程栏。我async:false在 Firefox 上使用它可以正常工作，但在 Chrome 上无法正常工作。我也尝试使用$.ajax().done()，但它根本没有影响。

当ajax调用完成然后下一个循环将运行时，是否有得到响应的xml字符串？

for (var i = 0; i <= arr.length; i++){
    $.ajax({
        url: '',
        data: '',
        async: false
    }).done(function(xml) {
       //get xml string to handle and put it into some table as contents
    });
    //Then go to next loop
}

标签： javascriptjqueryajaxasynchronous

解决方案

不要试图使异步代码同步。您将锁定事件循环并获得令人讨厌的性能损失。

并行提出请求。将 Promise 收集到一个数组中。用于Promise.all确定它们何时全部完成。

然后，您可以从中提取数据并按照您的意愿进行操作。

例如：

const baseUrl = "https://jsonplaceholder.typicode.com/users/";
const userIds = [1,2,3,4,5];

const completeUrls = userIds.map( id => `${baseUrl}${id}` );
const promises = completeUrls.map( url => jQuery.ajax({url}) );
const collectedDataPromise = Promise.all(promises);

collectedDataPromise.then( data => {
    const names = data.map( user => user.name );
    const ul = $("<ul />");
    names.forEach( name => {
       ul.append( $("<li>").text(name) );
    });
    $("body").append(ul);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

推荐阅读