我进行了以下设置,其中我的 main()
函数进行 AJAX 调用并在内部调用 getValue1()
和 getValue2()
成功。我正在学习如何使用关键字 async 和 await
根据这个SO post和这个开发者 manual ,以下代码应该可以工作。然而,事实并非如此。谁能告诉我为什么?
async function main() {
$.ajax({
url: "...",
success: function (object) {
var html = '';
for (var i = 0; i < object.length; i++) {
var value1 = await getValue1(object[i].value1);
html += '<p>' + value1 + '</p>';
var value2 = await getValue2(object[i].value2);
html += '<p>' + value2 + '</p>';
console.log(html);
}
}
});
}
function getValue1(value1) {
$.ajax({
url: "...",
success: function (value1) {
return value1;
}
});
}
function getValue2(value2) {
$.ajax({
url: "...",
success: function (value2) {
return value2;
}
});
}
最佳答案
首先,您需要将 async
关键字放在 await
所在的同一函数中。为此,您需要在 getValue1/2
函数中返回 Promise
。
以下代码应该按原样工作,但请注意:
- 所有请求均使用
Promise.all
同时处理,因此当它们全部解决后,它将在控制台中记录结果 - 我使用了
let
和const
关键字,因为我假设您使用最新版本的 JavaScript
您可能需要查看 Promise's documentation完全理解下面的代码。
function main() {
$.ajax({
url: 'https://api.ipify.org',
success: function (object) {
// this is for demonstration only:
object = [
{
value1: 'https://api.ipify.org',
value2: 'https://api.ipify.org',
},
{
value1: 'https://api.ipify.org',
value2: 'https://api.ipify.org',
},
];
// ^^^ remove this for your use
// for some reasons, async callback in success won't work with jQuery
// but using this self-calling async function will do the job
(async function () {
const requests = [];
for (let i = 0; i < object.length; i++) {
requests.push(getValue1(object[i].value1));
requests.push(getValue2(object[i].value2));
}
// all requests are done simultaneously
const results = await Promise.all(requests);
// will print ["<your ip>", "<your ip>", ...]
console.log(results);
})();
},
});
}
function getValue1(param1) {
// return a promise that resolve when request is done
return new Promise(function (resolve, reject) {
$.ajax({
url: param1,
success: resolve,
error: reject,
});
});
}
function getValue2(param2) {
// return a promise that resolve when request is done
return new Promise(function (resolve, reject) {
$.ajax({
url: param2,
success: resolve,
error: reject,
});
});
}
// call main for testing
main();
关于javascript - 异步函数不能与 Await 一起使用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45864826/