async/await 是什么

async/await 是 ES7 引入的新的异步代码 范例，它供应了一种新的编写异步代码的体式格局，这类体式格局在语法层面供应了一种形式上非常靠近于同步代码的异步非壅塞代码作风，在此之前我们运用的多是异步回调、 Promise 形式。
从完成上来看 async/await 是在 生成器、Promise 基础上构建出来的新语法：以 生成器 完成流程掌握，以 Promise 完成异步掌握。
Node 自 v8.0.0 起已完全支撑 async/await 语法，babel 也已完全支撑 async/await 语法的转译。

下面，我们以一个一个实例的体式格局，由浅入深引见 async/await 语法的运用。

一个简朴的实例

我们来完成一个猎取登录用户信息的函数，逻辑以下：

1. 猎取用户登录态
2. 如果用户已登录，返回对应的用户信息
3. 如果用户未登录，跳转到登录页

以回调体式格局完成

回调 在最初版本的 JS 就已涌现，可谓历史悠久，到如今也还保持着相称的生机。
如果以回调体式格局完成上述需求，代码也许以下：

function getProfile(cb) {
  isUserLogined(req.session, (err, isLogined) => {
    if (err) {
      cb(err);
    } else if (isLogined) {
      getUser(req.session, (err, profile) => {
        if (err) {
          cb(err);
        } else {
          cb(null, profile);
        }
      });
    } else {
      cb(null, false);
    }
  });
}

感受到臭味了吗？这里我们还只是完成了两层的异步挪用，代码中就已有很多题目，比方反复的 if(err) 语句；比方层层嵌套的函数。
别的，如果在层层回调函数中涌现非常，调试起来是非常让人奔溃的 —— 因为 try-catch 没法捕捉异步的非常，我们只能不停不停的写 debugger 去追踪，几乎步步惊心。
这类层层嵌套致使的代码臭味，被称为 回调地狱，在过去是疑心社区的一个大题目。

以 Promise 体式格局完成

Promise 形式最早只是社区涌现的一套解决计划，但依附其文雅的链式挪用语句，获得愈来愈多人的喜爱，终究被列为 ES6 的正式范例。
上面的需求，如果以 Promise 形式完成：

function getProfile() {
  return isUserLogined(req.session)
    .then(isLogined => {
      if (isLogined) {
        return getUser(req.session);
      }
      return false;
    })
    .catch(err => {
      console.log(err);
    });
}

ok，这减少了些模板代码，也有了一致的非常 catch 计划。但这内里也有其他的一些坑，比方，如果我们要 resolve 两个差别 Promise 的值？假定上面的例子中，我们还须要返回用户的日记纪录：

function getProfile() {
  return isUserLogined(req.session)
    .then(isLogined => {
      if (isLogined) {
        return getUser(req.session).then(profile => {
          return getLog(profile).then(logs => Promise.resolve(profile, logs));
        });
      }
      return false;
    })
    .catch(err => {
      console.log(err);
    });
}

上面的代码在 getUser.then 中嵌套了一层 getLog.then ，这在代码上破坏了 Promise 的链式挪用轨则，而且，getUser.then 函数中发作的非常是没法被外层的 catch 函数捕捉的，这破坏了非常处置惩罚的一致性。

Promise 的另一个题目，是在 catch 函数中的非常客栈不够完全，致使难以追随真正发作毛病的位置。比方以下代码中：

function asyncCall(){
    return asyncFunc()
      .then(()=>asyncFunc())
      .then(()=>asyncFunc())
      .then(()=>asyncFunc())
      .then(()=>throw new Error('oops'));
}

asyncCall()
  .catch((e)=>{
    console.log(e);
    // 输出：
    // Error: oops↵    at asyncFunc.then.then.then.then (<anonymous>:6:22)
  });

因为抛出非常的语句是在一个匿名函数中，运转时会以为毛病发作的位置是 asyncFunc.then.then.then.then，如果代码中大批运用了 asyncFunc 函数，那末上面的报错信息就很难协助我们正确定位毛病发作的位置。
我们固然能够给每一个 then 的回调函数给予一个有意义的名词，但这又丧失了箭头函数、匿名函数的简约。

以 async/await 体式格局完成

末了，终究轮到我们此次的主题 —— async/await 体式格局的异步代码，虽然这是一个 ES7 范例，但合营壮大的 babel，如今已能够斗胆勇敢运用。
以上需求的完成代码：

async function getProfile() {
  const isLogined = await isUserLogined(req.session);
  if (isLogined) {
    return await getUser(req.session);
  }
  return false;
}

代码比上面两种作风要简朴了很多，形式上就是同步操纵流程，与我们的需求形貌也非常非常的靠近。

async 关键字用于声明一个函数是异步的，能够涌如今任何函数声明语句中，包含：一般函数、箭头函数、类函数。一般函数的 constructor 是 Function， 而被 async 关键字润饰的函数则是 AsyncFunction 范例的：

Object.getPrototypeOf(function() {}).constructor;
// output
// Function() { [native code] }

Object.getPrototypeOf(async function() {}).constructor;
// output
// AsyncFunction() { [native code] }

await 关键字只能在 async 函数中运用，用于声明一个异步挪用，比方上面例子中的 const isLogined = await isUserLogined(req.session);，当 async 作风的 getProfile 函数实行到该语句时，会挂起当前函数，将后续语句加入到 event loop 轮回中，这一点与 生成器 实行特征雷同。
直到 isUserLogined 函数 resovle 后，才继承实行背面的语句。

我们能够在 async 函数中编写恣意数目标 await 语句，async 函数的实行会一向处在 实行-挂起-实行 的轮回中，这类特征获得了言语层面的支撑，并不须要我们为此编写过剩的代码，这就为庞杂的异步场景供应便利的完成计划，比方：

async function asyncCall() {
  const v1 = await asyncFunc();
  const v2 = await asyncFunc(v1);
  const v3 = await asyncFunc(v2);
  return v3;
}

到这里，我们已简朴了解了 async/await 的用法，这类同步作风的异步处置惩罚计划，比拟而言会更轻易保护。

async 中的非常处置惩罚

上面我们提到，在 Promise 形式中，catch 函数难以获得完全的非常信息，致使在 Promise 下做调试变得困难重重，那在 async/await 中呢？
我们来看一段代码：

async function asyncCall() {
  try {
    await asyncFunc();
    throw new Error("oops");
  } catch (e) {
    console.log(e);
    // output
    // Error: oops  at asyncCall (<anonymous>:4:11)
  }
}

比拟 Promise 形式，上面代码中非常发作的位置是 asyncCall 函数！相对而言，轻易定位了很多。

并联的 await

async/await 语法确切很简朴好用，但却轻易用岔了。以下面代码为例：

async function retriveProfile(email) {
  const user = await getUser(email);
  const roles = await getRoles(user);
  const level = await getLevel(user);
  return [user, roles, level];
}

上面代码完成了猎取用户基本信息，然后经由过程基本信息猎取用户角色、级别信息的功用，个中 getRoles 与 getLevel 两者之间并没有依靠，是两个并联的异步操纵。
但代码中 getLevel 却须要守候 getRoles resolve 以后才实行。并非所有人都邑犯这类毛病，而是同步作风很轻易引诱我们疏忽掉真正的异步挪用序次，而堕入过于简化的同步头脑中。写这一段的目标恰是为了警省人人，async 只是形式上的同步，根本上照样异步的，请注重不要让运用者把时候糟蹋在无谓的守候上。
上面的逻辑，用一种轻微 绕 一些的体式格局来完成，就可以够防止这类机能消耗：

async function retriveProfile(email) {
    const user = await getUser(email);
    const p1 = getRoles(user);
    const p2 = getLevel(user);
    const [roles, levels] = await Promise.all(p1, p2);
    return [user, roles, levels];
}

注重，代码中的 getRoles 、getLevel 函数都没有跟在 await 关键字以后，而是把函数返回的 Promise 存放在变量 p1、p2 中，后续才对 p1、p2 实行 await 声明， getRoles 、getLevel 就可以同时实行，不需守候另一方的完成。

这个题目在轮回场景下迥殊轻易发作，假定我们须要猎取一批图片的大小信息：

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

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

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

这实际上已回退到了 Promise 形式，所以为了写出优越的 async/await 代码，发起照样认真进修进修 Promise 形式