如何在纯JS中编写同步AJAX

Question

我想用下面的代码在循环中做一个AJAX调用。

for (var i = 0; i < 5; i++) {
console.log(i);
ajax_DatabaseAccessor.query("CheckInt", i, loadQuery);
function loadQuery(data) {
alert(DWRUtil.toDescriptiveString(data, 2));
}
}

我调试了代码，日志被写了五次，然后ajax被执行，传递参数I是4。我怀疑原因是这是一个异步调用。那么如何修改代码使其同步呢?我知道jquery可以做到这一点与设置异步，但如何写它在纯javascript没有jquery?Thx .

Answer 1

在异步代码中使用for循环结构的最佳方法是使用async/await语法，但要使其表现得像同步代码(由for循环假设)。

重写你的ajax_DatabaseAccessor.query返回一个承诺(例如，你可以使用fetch，如果你正在做一个HTTP请求)，并成为一个async函数。例如，假设它是这样定义的:

let ajax_DatabaseAccessor = {}
ajax_DatabaseAccessor.query = async (idk, someIdea, someSelector) => {
let response = await fetch("some_resource/"+idk+"/+"someIdea)
let data = await response.json();
return someSelector(data)
}

现在你的代码是awaitable，你可以在你的for循环中使用它，所以我们得到这样的:

for(var i = 0 ;i<5;i++){
let myDescriptiveString = await ajax_DatabaseAccessor.query("CheckInt", i,  (data)=>DWRUtil.toDescriptiveString(data, 2));  
}

关键是你的问题的答案，如果理解或解释最慈善，是看看fetch,async/await，因为它能够很好地发挥循环。有时你也可能会遇到想要编写awaitable函数的情况——在这种情况下，了解如何创建Promise和知道承诺是你可以await的东西也会有所帮助。