同步与异步

平常，代码是由上往下顺次实行的。假如有多个使命，就必须列队，前一个使命完成，后一个使命才会实行。这类实行形式称之为： 同步（synchronous） 。新手轻易把盘算机用语中的同步，和一样平常用语中的同步弄殽杂。如，“把文件同步到云端”中的同步，指的是“使…保持一致”。而在盘算机中，同步指的是使命从上往下顺次实行的形式。比方：

例 1

A();
B();
C();

在上述代码中，A、B、C 是三个差别的函数，每一个函数都是一个不相关的使命。在同步形式下，盘算时机先实行 A 使命，再实行 B 使命，末了实行 C 使命。在大部份状况，同步形式都没题目。然则假如 B 使命是一个耗时很长收集的要求，而 C 使命恰好是展示新页面，B 与 C 没有依靠关联。这就会致使网页卡顿的征象。有一种处置惩罚计划，将 B 放在 C 背面去实行，但唯一有些不足的是，B 的收集要求会迟一些再发送。

另有另一种更圆满处置惩罚计划，将 B 使命分红的两个部份。一部份是，马上实行收集要求的使命；另一部份是，在要求数据返来后实行的使命。这类一部份在马上实行，另一部份在将来实行的形式称为 异步（asynchronous） 。伪代码以下：

例 2

A();
// 在如今发送要求
ajax('url1',function B() {
  // 在将来某个时刻实行
})
C();
// 实行递次 A => C => B

现实上，JavaScript 引擎先实行了挪用了浏览器的收集要求接口的使命（一部份使命），再由浏览器发送收集要求并监听要求返回（这个使命不由 JavaScript 引擎实行，而是浏览器）；等要求放回后，浏览器再关照 JavaScript 引擎，最早实行回调函数中的使命（另一部份）。JavaScript 异步才能的实质是浏览器或 Node 的多线程才能。

callback

将来实行的函数平常也叫 callback。运用 callback 的异步形式，处置惩罚了壅塞的题目，然则也带了一些其他题目。在最最早，我们的函数是从上往下誊写的，也是从上往下实行的，这非常相符我们的思维习惯，然则如今却被 callback 打断了！在上面一段代码中，它跳过 B 使命，先实行了 C使命！这类异步“非线性”的代码会比同步“线性”的代码，更难浏览，因而也更轻易滋长 BUG。

试着推断下面这段代码的实行递次，你会对“非线性”代码比“线性”代码更难以浏览，体味更深。

例 3

A();
ajax('url1', function(){
    B();
    ajax('url2', function(){
        C();
    }
    D();
});
E();

// 下面是答案，你猜对了吗？
// A => E => B => D => C

在例 3 中，我们的浏览代码视线是 A => B => C => D => E ，然则实行递次倒是 A => E => B => D => C 。从上往下实行的递次被 Callback 打乱了，这就黑白线性代码带来的蹩脚的地方。

上面的例子中，我们能够经由过程将 ajax 背面实行的使命 E 和 使命 D 提早，来举行代码优化。这类技能在写多重嵌套的代码时，是非常有效的。革新后，以下。

例 4

A();
E();
ajax('url1', function(){
    B();
    D();
    ajax('url2', function(){
        C();
    }
});
// 稍作优化，代码更轻易看懂
// A => E => B => D => C

在例 4 中，只要处置惩罚了胜利回调，并没处置惩罚非常回调。接下来，把非常处置惩罚回调加上，再来议论代码“线性”实行的题目。

例 5

A();

ajax('url1', function(){
    B();

    ajax('url2', function(){
        C();
    },function(){
        D();
    });

},function(){
    E();

});

例 5 中，加上非常处置惩罚回调后，url1 的胜利回调函数 B 和非常回调函数 E，被分开了。这类“非线性”的状况又涌现了。

在 node 中，为了处置惩罚的非常处置惩罚“非线性”的题目，制订了毛病优先的战略。node 中 callback 的第一个参数，特地用于推断是不是发作非常。

例 6

A();

get('url1', function(error){
    if(error){
        E();
    }else {
        B();

        get('url2', function(error){
            if(error){
                D();
            }else{
                C();
            }
        });
    }
});

到此，callback 引发的“非线性”题目基础得到处置惩罚。遗憾的是，一旦嵌套层数多起来，浏览起来还不是很轻易。别的，callback 一旦涌现非常，只能在当前回调内部处置惩罚非常，并没有一个团体的非常触底计划。

promise

在 JavaScript 的异步进化史中，涌现出一系列处置惩罚 callback 弊病的库，而 Promise 成为了终究的胜者，并胜利地被引入了 ES6 中。它将供应了一个更好的“线性”誊写体式格局，并处置惩罚了异步非常只能在当前回调中捕获的题目。

Promise 就像一个中介，它许诺会将一个可托任的异步结果返回。签署协定的两方分别是异步接口和 callback。起首 Promise 和异步接口签署一个协定，胜利时，挪用 resolve 函数关照 Promise，非常时，挪用 reject 关照 Promise。另一方面 Promise 和 callback 也签署一个协定，当异步接口的 resolve 或 reject 被挪用时，由 Promise 返回可托任的值给 then 和 catch 中注册的 callback。

一个最简朴的 promise 示例以下：

例 7

// 建立一个 Promise 实例（异步接口和 Promise 签署协定）
var promise = new Promise(function (resolve,reject) {
  ajax('url',resolve,reject);
});

// 挪用实例的 then catch 要领 （胜利回调、非常回调与 Promise 签署协定）
promise.then(function(value) {
  // success
}).catch(function (error) {
  // error
})

Promise 是个非常不错的中介，它只返回可托的信息给 callback。怎样明白可托的观点呢？准确的讲，就是 callback 肯定会被异步挪用，且只会挪用一次。比方在运用第三方库的时刻，因为某些缘由，（假的）“异步”接口不可靠，它实行了同步代码，而没有进入异步逻辑，如例 8。

例 8

var promise1 = new Promise(function (resolve) {
  // 因为某些缘由致使“异步”接口，被同步实行了
  if (true ){
    // 同步代码
    resolve('B');
  } else {
    // 异步代码
    setTimeout(function(){
      resolve('B');
    },0)
  }

});

// promise依旧会异步实行
promise1.then(function(value){
    console.log(value)
});

console.log('A');
// A => B （先 A 后 B）

再比方，因为某些缘由，异步接口不可靠，resolve 或 reject 被实行了两次。但 Promise 只会关照 callback ，第一次异步接口返回的结果。如例 9：

例 9

var promise2 = new Promise(function (resolve) {
  // resolve 被实行了 2 次
  setTimeout(function(){
    resolve("第一次");
  },0)
  setTimeout(function(){
    resolve("第二次");
  },0)
});

// 但 callback 只会被挪用一次，
promise2.then(function(msg){
    console.log(msg) // "第一次"
    console.log('A')
});
// A (只要一个)

引见完 Promise 的特征后，来看看它怎样应用链式挪用，处置惩罚 callback 形式下，异步代码可读性的题目。链式挪用指的是：函数 return 一个能够继承实行的对象，该对象能够继承挪用，而且 return 另一个能够继承实行的对象，云云重复到达不停挪用的结果。如例 10：

例 10

// return 一个能够继承实行的 Promise 对象
var fetch = function(url){
    return new Promise(function (resolve,reject) {
        ajax(url,resolve,reject);
    });
}

A();
fetch('url1').then(function(){
    B();
    // 返回一个新的 Promise 实例
    return fetch('url2');
}).catch(function(){
    C();
    // 非常的时刻也能够返回一个新的 Promise 实例
    return fetch('url2');
    // 运用链式写法挪用这个新的 Promise 实例的 then 要领
}).then(function() {
    // 能够继承 return，也能够不继承 return，终了链式挪用
    D();
})
// A B C D （递次实行）

云云重复，不停返回一个 Promise 对象，使 Promise 挣脱了 callback 层层嵌套的题目和异步代码“非线性”实行的题目。

别的，Promise 还处置惩罚了一个难点，callback 只能捕获当前毛病非常。Promise 和 callback 差别，每一个 callback 只能晓得本身的报错状况，但 Promise 代办着一切的 callback，一切 callback 的报错，都能够由 Promise 一致处置惩罚。所以，能够经由过程在末了设置一个 catch 来捕获之前未捕获非常。

Promise 处置惩罚 callback 的异步挪用题目，但 Promise 并没有挣脱 callback，它只是将 callback 放到一个能够信托的中心机构，这个中心机构去链接 callback 和异步接口。别的，链式挪用的写法并非非常文雅。接下来引见的异步（async）函数计划，会给出一个更好的处置惩罚计划。

异步（async）函数

异步（async）函数是 ES7 的一个新的特征，它连系了 Promise，让我们挣脱 callback 的约束，直接用“同步”体式格局，写异步函数。注重，这里的同步指的是写法同步，但现实依旧是异步实行的。

声明异步函数，只需在平常函数前增加一个关键字 async 即可，如:

async function main(){}

在异步函数中，能够运用 await 关键字，示意守候背面表达式的实行结果，再往下继承实行。表达式平常都是 Promise 实例。如，例 11：

例 11

var  timer = function (delay) {
  return new Promise(function create(resolve,reject) {
    if(typeof delay !== 'number'){
      reject(new Error('type error'));
    }
    setTimeout(resolve,delay,'done');
  });
}

async function main{
    var value = await timer(100);
    // 不会马上实行，守候 100ms 后才最早实行
    console.log(value);  // done
}

main();

异步函数和平常函数的挪用体式格局一样，最早实行 main() 函数。以后，会马上实行 timer(100) 函数。比及（ await ）背面的 promise 函数（ timer(100) ）返回结果后，顺序才会实行下一行代码。

异步函数和平常函数写法基础相似，除了前面提到的声明体式格局相似和挪用体式格局一样以外，它也能够运用 try...catch 来捕获非常，也能够传入参数。但在异步函数中运用 return 是没有作用的，这和平常的 callback 函数 return 没有作用是一样缘由。callback 或许异步函数是零丁放在 JavaScript 栈（stack）中实行的，这时候同步代码已实行终了。

在异步函数中，运用 try...catch 非常捕获的计划，替代了 Promise catch 的非常捕获的计划。示例以下：

例 12

async function main(delay){
  try{
    // timer 在例 11 中有过声明
    var value1 = await timer(delay);
    var value2 = await timer('');
    var value3 = await timer(delay);
  }catch(err){
    console.error(err);
      // Error: type error
      //   at create (<anonymous>:5:14)
      //   at timer (<anonymous>:3:10)
      //   at A (<anonymous>:12:10)
  }
}
main(0);

更奇异的是，异步函数也遵照，“函数是第一国民”的原则。也能够看成值，传入平常函数和异步函数中实行。须要注重的是，在异步函数中使异步函数用时要运用 await，不然异步函会被同步实行。例子以下：

例 12

async function doAsync(delay){
    // timer 在例 11 中有过声明
    var value1 = await timer(delay);
    console.log('A')
}

async function main(main){
  doAsync(0);
  console.log('B')
}

main(main);
// B A

这个时刻打印出来的值是 B A。申明 doAsync 函数中的 await timer(delay) 并被同步实行了。假如要准确异步地实行 doAsync 函数，须要该函数之前增加 await 关键字，以下：

async function main(delay){
    var value1 = await timer(delay);
    console.log('A')
}

async function doAsync(main){
    await main(0);
    console.log('B')
}

doAsync(main);
// A B

因为异步函数采纳类同步的誊写要领，所以在处置惩罚多个并发要求，新手可能会像下面一样誊写：

例 13

var fetch = function (url) {
  return new Promise(function (resolve,reject) {
    ajax(url,resolve,reject);
  });
}

async function main(){
  try{
    var value1 = await fetch('url1');
    var value2 = await fetch('url2');
    conosle.log(value1,value2);
  }catch(err){
    console.error(err)
  }
}

main();

但如许会致使 url2 的要求必须比及 url1 的要求返来后才会发送。假如 url1 与 url2 没有互相的依靠关联，将这两个要求同时发送完成的结果会更好。

Promise.all 的要领，能够很好的处置惩罚并发要求。Promise.all 接收将多个 Promise 实例为参数，并将这些参数包装成一个新的 Promise 实例。如许，Promise.all 中一切的要求会第一时间发送出去；在一切的要求胜利返来后才会触发 Promise.all 的 resolve 函数；当有一个要求失利，则马上挪用 Promise.all 的 reject 函数。

var fetch = function (url) {
  return new Promise(function (resolve, reject) {
    ajax(url, resolve, reject);
  });
}

async function main(){
  try{
    var arrValue = await Promise.all[fetch('url1'),fetch('url2')];
    conosle.log(arrValue[0], arrValue[1]);
  }catch(err){
    console.error(err)
  }
}

main();

末了对异步函数的内容做个小结：

• 声明： async function main(){}

• 异步函数逻辑：能够运用 await

• 挪用： main()

• 捕获非常： try...catch

• 传入参数： main('第一个参数')

• return：不见效

• 异步函数作为参数传入其他函数：能够

• 处置惩罚并发逻辑：Promise.all

现在运用最新的 Chrome/node 已支撑 ES7 异步函数的写法了，别的也能够经由过程 Babel 以将异步函数转义为 ES5 的语法实行。人人能够本身着手尝尝，运用异步函数，用类同步的体式格局，誊写异步代码。