想象一下,你打电话给朋友并让他帮你查一些资料。虽然这可能需要一段时间,但你会在电话里等待,直到朋友给你需要的答案。这就是同步调用的行为:
function findItem() {
var item;
while (item_not_found) {
// 查找
}
return item;
}
var item = findItem();
// 使用 item
doSomethingElse();
即使 findItem
需要很长时间执行,任何跟在 var item = findItem();
后面的代码都必须等待函数返回结果。
异步
你再一次打电话给朋友,但这次你告诉他你很忙,他可以在查到资料后回电话给你。你挂断电话,继续其他计划好的事情。一旦朋友回电话,你再处理他给你的信息。这就是异步调用的表现:
findItem(function(item) {
// 使用 item
});
doSomethingElse();
在这里,执行会立即继续,Ajax 调用后的语句会被执行。为了最终获得响应,你需要提供一个接收响应后被调用的函数,即回调。
解决方案
拥抱 JavaScript 的异步特性! 虽然某些异步操作提供同步版本(比如“Ajax”),但通常不推荐使用,尤其是在浏览器环境中。
使用异步函数 async/await
(ES2017+)
ECMAScript 2017 引入了对异步函数的语法级支持。通过 async
和 await
,你可以用“同步风格”编写异步代码。代码依然是异步的,但更易于理解。
async/await
基于 Promise:一个 async
函数总是返回一个 Promise。await
操作会等待 Promise 解析并返回其值,或者在 Promise 被拒绝时抛出错误。
示例:
var superagent = require('superagent');
function delay() {
return new Promise(