一、Async/await 是以更舒适的方式使用 promise 的一种特殊语法，同时它也非常易于理解和使用。
二、函数前面的关键字async有两个作用：

让这个函数总是返回一个 promise。
允许在该函数内使用await。

三、Promise 前的关键字await使 JavaScript 引擎等待该 promise settle，然后：

如果有 error，就会抛出异常 — 就像那里调用了throw error一样。
否则，就返回结果。
Async function
一、让我们以async这个关键字开始。它可以被放置在一个函数前面，如下所示：
```
async function f() {
return 1;
}
```
二、在函数前面的 “async” 这个单词表达了一个简单的事情：即这个函数总是返回一个 promise。其他值将自动被包装在一个 resolved 的 promise 中。
【示例1】下面这个函数返回一个结果为1的 resolved promise，让我们测试一下： ```javascript async function f() { return 1; }

f().then(alert); // 1 ……我们也可以显式地返回一个 promise，结果是一样的：

async function f() { return Promise.resolve(1); }

f().then(alert); // 1

1、所以说，async确保了函数返回一个 promise，也会将非 promise 的值包装进去。很简单，对吧？但不仅仅这些。还有另外一个叫await的关键词，它只在async函数内工作，也非常酷。
<a name="SzHNL"></a>
# Await
一、语法如下：
```javascript
// 只在 async 函数内工作
let value = await promise;

二、关键字await让 JavaScript 引擎等待直到 promise 完成（settle）并返回结果。
【示例1】一个 1 秒后 resolve 的 promise：

async function f() {

  let promise = new Promise((resolve, reject) => {
    setTimeout(() => resolve("done!"), 1000)
  });

  let result = await promise; // 等待，直到 promise resolve (*)

  alert(result); // "done!"
}

f();

1、这个函数在执行的时候，“暂停”在了(*)那一行，并在 promise settle 时，拿到result作为结果继续往下执行。所以上面这段代码在一秒后显示 “done!”。
2、让我们强调一下：await实际上会暂停函数的执行，直到 promise 状态变为 settled，然后以 promise 的结果继续执行。这个行为不会耗费任何 CPU 资源，因为 JavaScript 引擎可以同时处理其他任务：执行其他脚本，处理事件等。
3、相比于promise.then，它只是获取 promise 的结果的一个更优雅的语法，同时也更易于读写。
三、不能在普通函数中使用await
1、如果我们尝试在非 async 函数中使用await的话，就会报语法错误：

function f() {
  let promise = Promise.resolve(1);
  let result = await promise; // Syntax error
}

2、如果我们忘记在函数前面写async关键字，我们可能会得到一个这个错误。就像前面说的，await只在async函数中有效。

示例

一、让我们拿Promise 链那一章的showAvatar()例子，并将其改写成async/await的形式：

我们需要用await替换掉.then的调用。
另外，我们需要在函数前面加上async关键字，以使它们能工作。 ```javascript async function showAvatar() {

// 读取我们的 JSON let response = await fetch(‘/article/promise-chaining/user.json’); let user = await response.json();

// 读取 github 用户信息 let githubResponse = await fetch(https://api.github.com/users/${user.name}); let githubUser = await githubResponse.json();

// 显示头像 let img = document.createElement(‘img’); img.src = githubUser.avatar_url; img.className = “promise-avatar-example”; document.body.append(img);

// 等待 3 秒 await new Promise((resolve, reject) => setTimeout(resolve, 3000));

img.remove();

return githubUser; }

showAvatar();

二、await不能在顶层代码运行<br />【示例1】下面这样就不行：
```javascript
// 用在顶层代码中会报语法错误
let response = await fetch('/article/promise-chaining/user.json');
let user = await response.json();

【示例2】我们可以将其包裹在一个匿名 async 函数中，如下所示：

(async () => {
  let response = await fetch('/article/promise-chaining/user.json');
  let user = await response.json();
  ...
})();

1、新特性：从 V8 引擎 8.9+ 版本开始，顶层 await 可以在模块中工作。
三、await接受 “thenables”
1、像promise.then那样，await允许我们使用 thenable 对象（那些具有可调用的then方法的对象）。这里的想法是，第三方对象可能不是一个 promise，但却是 promise 兼容的：如果这些对象支持.then，那么就可以对它们使用await。
【示例1】这有一个用于演示的Thenable类，下面的await接受了该类的实例：

class Thenable {
  constructor(num) {
    this.num = num;
  }
  then(resolve, reject) {
    alert(resolve);
    // 1000ms 后使用 this.num*2 进行 resolve
    setTimeout(() => resolve(this.num * 2), 1000); // (*)
  }
}

async function f() {
  // 等待 1 秒，之后 result 变为 2
  let result = await new Thenable(1);
  alert(result);
}

f();

2、如果await接收了一个非 promise 的但是提供了.then方法的对象，它就会调用这个.then方法，并将内建的函数resolve和reject作为参数传入（就像它对待一个常规的Promiseexecutor 时一样）。然后await等待直到这两个函数中的某个被调用（在上面这个例子中发生在(*)行），然后使用得到的结果继续执行后续任务。
四、Class 中的 async 方法
1、要声明一个 class 中的 async 方法，只需在对应方法前面加上async即可：

class Waiter {
  async wait() {
    return await Promise.resolve(1);
  }
}

new Waiter()
  .wait()
  .then(alert); // 1（alert 等同于 result => alert(result)）

2、这里的含义是一样的：它确保了方法的返回值是一个 promise 并且可以在方法中使用await。

Error 处理

一、如果一个 promise 正常 resolve，await promise返回的就是其结果。但是如果 promise 被 reject，它将 throw 这个 error，就像在这一行有一个throw语句那样。
1、这个代码：

async function f() {
  await Promise.reject(new Error("Whoops!"));
}

2、和下面是一样的：

async function f() {
  throw new Error("Whoops!");
}

二、在真实开发中，promise 可能需要一点时间后才 reject。在这种情况下，在await抛出（throw）一个 error 之前会有一个延时。
三、我们可以用try..catch来捕获上面提到的那个 error，与常规的throw使用的是一样的方式：

async function f() {

  try {
    let response = await fetch('http://no-such-url');
  } catch(err) {
    alert(err); // TypeError: failed to fetch
  }
}

f();

四、如果有 error 发生，执行控制权马上就会被移交至catch块。我们也可以用try包装多行await代码：

async function f() {

  try {
    let response = await fetch('/no-user-here');
    let user = await response.json();
  } catch(err) {
    // 捕获到 fetch 和 response.json 中的错误
    alert(err);
  }
}

f();

五、如果我们没有try..catch，那么由异步函数f()的调用生成的 promise 将变为 rejected。我们可以在函数调用后面添加.catch来处理这个 error：

async function f() {
  let response = await fetch('http://no-such-url');
}

// f() 变成了一个 rejected 的 promise
f().catch(alert); // TypeError: failed to fetch // (*)

六、如果我们忘了在这添加.catch，那么我们就会得到一个未处理的 promise error（可以在控制台中查看）。我们可以使用在使用 promise 进行错误处理一章中所讲的全局事件处理程序unhandledrejection来捕获这类 error。
七、async/await和promise.then/catch
1、当我们使用async/await时，几乎就不会用到.then了，因为await为我们处理了等待。并且我们使用常规的try..catch而不是.catch。这通常（但不总是）更加方便。
2、但是当我们在代码的顶层时，也就是在所有async函数之外，我们在语法上就不能使用await了，所以这时候通常的做法是添加.then/catch来处理最终的结果（result）或掉出来的（falling-through）error，例如像上面那个例子中的(*)行那样。
八、async/await可以和Promise.all一起使用
1、当我们需要同时等待多个 promise 时，我们可以用Promise.all把它们包装起来，然后使用await：

// 等待结果数组
let results = await Promise.all([
  fetch(url1),
  fetch(url2),
  ...
]);

2、如果出现 error，也会正常传递，从失败了的 promise 传到Promise.all，然后变成我们能通过使用try..catch在调用周围捕获到的异常（exception）。

Async/await

Async function

示例

Error 处理