单线程是Javascript言语最实质的特征之一，Javascript引擎在运转js代码的时刻，同一个时候只能实行单个使命。

这类形式的优点是完成起来比较简朴，实行环境相对纯真。

害处是只需有一个使命耗时很长，背面的使命都必需列队等着，会迁延全部递次的实行。罕见的浏览器无响应（假死），每每就是因为某一段Javascript代码长时候运转（比方死循环），致使全部页面卡在这个处所，其他使命没法实行。

所以异步编程对JavaScript言语太主要。

有些小伙伴能够还不太明白”异步”。

所谓的”异步”，就是一个使命分红两段，先实行第一段，然后转而实行其他使命，等做好了预备，再回过甚实行第二段。

比方，有一个使命是读取文件举行处置惩罚，使命的第一段是向操纵系统发出请求，请求读取文件。然后，递次实行其他使命，比及操纵系统返回文件，再接着实行使命的第二段（处置惩罚文件）。这类不一连的实行，就叫做异步。

响应地，一连的实行就叫做同步。由因而一连实行，不能插进去其他使命，所以操纵系统从硬盘读取文件的这段时候，递次只能干等着。

讲的浅显点：

朱自清的《背影》中，父亲对朱自清说 ：“我买几个橘子去。你就在此地，不要走动。”

朱自清没有走动，等着买完橘子的父亲一同吃橘子，就叫同步。

假如朱自清没有等父亲，单独走了，那就不能和父亲一同吃橘子，就叫异步。

1、异步编程

我们就以用户注册这个迥殊罕见的场景为例，讲讲异步编程。

第一步，考证用户是不是注册

第二步，没有注册，发送考证码

第三步，填写考证码、暗码，磨练考证码是不是准确

这个历程是有一定的递次的，你必需保证上一步完成，才顺利举行下一步。

1.1 回调函数

function testRegister(){}  // 考证用户是不是注册
function sendMessage(){}   // 给手机发送考证码x
function testMessage(){}   // 磨练考证码是不是准确

function doRegister(){  //最先注册
    testRegister(data){
        if(data===false){ //已注册
            
        }else{ //未注册
             sendMessage(data){
                 if(data===true){ //发送考证码胜利
                    testMessage(data){
                        if(data===true){  //考证码准确
                           
                        }else{  //考证码不准确
                            
                        }
                    }    
                }
            }
        }
    }
}

代码中就已经有许多题目，比方芜杂的 if 推断语句 、层层嵌套的函数，形成代码的可读性差，难于保护。

别的，假如在层层回调函数中出现非常，调试起来是非常让人奔溃的 —— 因为 try-catch 没法捕捉异步的非常，我们只能不停不停的写 debugger 去追踪，几乎步步惊心。

这类层层嵌套被称为回调地狱。

1.2 Promise体式格局

Promise就是为了处理回调地狱题目而提出的。它不是新的语法功用，而是一种新的写法，许可将回调函数的嵌套，改成链式挪用。采纳Promise，一连读取多个文件，写法以下。

let state=1;  //模仿返回效果
function step1(resolve,reject){
    console.log('1. 考证用户是不是注册');
    if(state==1){
        resolve('未注册');
    }else{
        reject('已注册');
    }
}
function step2(resolve,reject){
    console.log('2.给手机发送考证码');
    if(state==1){
        resolve('发送胜利');
    }else{
        reject('发送失利');
    }
}
function step3(resolve,reject){
    console.log('3.磨练考证码是不是准确');
     if(state==1){
        resolve('考证码准确');
    }else{
        reject('考证码不准确');
    }
}

new Promise(testRegister).then(function(val){ // 考证用户是不是注册
    console.log(val);
    return new Promise(sendMessage);   // 给手机发送考证码
}).then(function(val){
     console.log(val);
    return new Promise(testMessage);  // 磨练考证码是不是准确
}).then(function(val){
    console.log(val);
    return val;
});

回调函数采纳了嵌套的体式格局顺次挪用testRegister()、sendMessage() 和testMessage()，而Promise运用then将它们链接起来。

比拟回调函数而言，Promise代码可读性更高，代码的实行递次一览无余。

Promise的体式格局虽然处理了回调地狱，然则最大题目是代码冗余，本来的使命被Promise 包装了一下，不管什么操纵，一眼看去都是一堆 then，本来的语义变得很不清晰。代码流程不能很好的示意实行流程。

人人初中学过电路，这个就像电路的串连，假如没学过也没紧要，你一定晓得jquery有链式操纵，这个就很相似链式操纵的写法，比较相符我们的头脑逻辑。

1.3 async/await体式格局

async语法是对new Promise的包装，await语法是对then要领的提炼。

 async function doRegister(url) {
  let data  = await testRegister();     // 考证用户是不是注册
  let data2 = await sendMessage(data);  // 给手机发送考证码
  let data3 = await testMessage(data2); // 磨练考证码是不是准确
  return data3
}

上面的代码虽然短，然则每一句都极为主要。data 是 await testRegister的返回效果，data2 又运用了 data 作为sendMessage的参数，data3 又运用了data2 作为testMessage的参数。

只需在doRegister前面加上关键词async，在函数内的异步使命前增加await声明即可。假如疏忽这些分外的关键字，几乎就是完完全全的同步写法。

2、async用法

2.1 返回 Promise 对象

async函数返回一个 Promise 对象。

async函数内部return语句返回的值，会成为then要领回调函数的参数。

async function f() {
  return 'aaa';
}

f().then(v => console.log(v))
//aaa
//Promise {<resolved>: undefined}

2.2 await 敕令

一般状况下，await敕令背面是一个 Promise 对象，返回该对象的效果。假如不是 Promise 对象，就直接返回对应的值。

/*胜利状况*/
async function f() {
  return await 123;
}
f().then(value => console.log(value));  // 123
/*失利状况*/
async function f() {
  return Promise.reject('error');
}
f().catch(e => console.error(e));   // error

注意事项：

await敕令只能用在async函数当中，假如用在一般函数，就会报错。

/* 毛病处置惩罚 */
function f(db) {
  let docs = [1, 2, 3];
  for(let doc of docs) {
    await db.push(doc);
  }
  return db; // Uncaught SyntaxError: Unexpected identifier
}





/* 准确处置惩罚(递次实行) */
async function f(db) {
  let docs = [1, 2, 3];
  for(let doc of docs) {
    await db.push(doc);
  }
  return db;
}

2.3 async中非常处置惩罚

经由过程运用 async/await，我们就能够合营 try/catch 来捕捉异步操纵历程当中的题目，包含 Promise 中reject 的数据。

await背面能够存在reject，须要举行try…catch代码块中

async function f() {
  try {
    await Promise.reject('出错了');
  } catch(e) {
    console.error(e);
  }
  return Promise.resolve('hello');
}
f().then(v => console.log(v));   // 出错了 hello

3、并联中的await

async/await 语法确切很简朴好用，但也轻易运用不当，还要依据详细的营业场景需求来定。

比方我们须要猎取一批图片的大小信息：

async function allPicInfo (imgs) {
  const result = [];
  for (const img of imgs) {
    result.push(await getSize(img));
  }
}

代码中的每次 getSize 挪用都须要守候上一次挪用完成，一样是一种机能糟蹋，而且消费的时候也长。一样的功用，用如许的体式格局会更适宜：

async function allPicInfo (imgs) {
  return Promise.all(imgs.map(img => getSize(img)));
}

多个异步操纵，假如没有继续关联，最好同时触发。

4、总结

从最早的回调函数，到 Promise 对象，每次都有所改进，但又让人觉得不完全。它们都有分外的复杂性，都须要明白笼统的底层运转机制。

比方有三个请求须要发作，第三个请求是依赖于第二个请求的效果，第二个请求依赖于第一个请求的效果。若用 ES5完成会有3层的回调，致使代码的横向生长。若用Promise 完成最少须要3个then，致使代码的纵向生长。但是，async/await 处理了这些题目。

从完成上来看 async/await 是在 生成器、Promise 基础上构建出来的新语法：以生成器完成流程控制，以 Promise 完成异步控制。

然则，不要因而小视 async/await，运用同步的体式格局写异步代码实在非常壮大。

async/await 在语义化、简化代码、毛病处置惩罚等方面有许多的上风，毕竟用async/ wait编写前提代码要简朴很多，还可以运用雷同的代码构造（尽人皆知的try/catch语句）处置惩罚同步和异步毛病，所以常被称为JavaScript异步编程的最终处理方案，可见其主要性和上风。

愿望小伙们在今后的实战项目中，多多演习，才控制async/await的真正精要。