想象一下,你打电话给朋友并让他帮你查一些资料。虽然这可能需要一段时间,但你会在电话里等待,直到朋友给你需要的答案。这就是同步调用的行为:

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 引入了对异步函数的语法级支持。通过 asyncawait,你可以用“同步风格”编写异步代码。代码依然是异步的,但更易于理解。

async/await 基于 Promise:一个 async 函数总是返回一个 Promise。await 操作会等待 Promise 解析并返回其值,或者在 Promise 被拒绝时抛出错误。

示例:

var superagent = require('superagent');

function delay() {
   
  return new Promise(
06-04 23:38