译带你理解-Asyncawait

38次阅读

共计 4762 个字符，预计需要花费 12 分钟才能阅读完成。

「async/await」是 promises 的另一种更便捷更流行的写法，同时它也更易于理解和使用。

Async functions

让我们以 async 这个关键字开始。它可以被放置在任何函数前面，像下面这样：

async function f() {return 1;}

在函数前面的「async」这个单词表达了一个简单的事情：即这个函数总是返回一个 promise。即使这个函数在语法上返回了一个非 promise 的值，加了「async」这个关键字就会指示 JavaScript 引擎自动将返回值包装成一个解析后的 promise。

例如，以下的代码就返回了一个以 1 为结果的解析后的 promise, 让我们试一下：

async function f() {return 1;}

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

… 我们也可以显式返回一个 promise，结果是一样的：

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

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

所以说，async 确保了函数的返回值是一个 promise，也会包装非 promise 的值。很简单是吧？但是还没完。还有一个关键字叫 await，它只在 async 函数中有效，也非常酷。

Await

语法如下：

// 只在 async 函数中有效
let value = await promise;

关键字 await 让 JavaScript 引擎等待直到 promise 完成并返回结果。

这里的例子就是一个 1 秒后解析的 promise：

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

  let result = await promise; // 等待直到 promise 解析（*）alert(result); // "done!"
}

f();

这个函数在执行的时候，「暂停」在了 (*) 那一行，并且当 promise 完成后，拿到 result 作为结果继续往下执行。所以「done!」是在一秒后显示的。

划重点：await 字面的意思就是让 JavaScript 引擎等待直到 promise 状态完成，然后以完成的结果继续执行。这个行为不会耗费 CPU 资源，因为引擎可以同时处理其他任务：执行其他脚本，处理事件等。

相比 promise.then 来获取 promise 结果，这只是一个更优雅的语法，同时也更易书写。

不能在普通函数中使用 await
如果我们尝试在非 async 函数中使用 await 的话，就会报语法错误：

function f() {let promise = Promise.resolve(1);
  let result = await promise; // 语法错误
}

如果函数前面没有 async 关键字，我们就会得到一个语法错误。就像前面说的，await 只在 async 函数 中有效。

让我们拿 Promises 链那一章的 showAvatar() 例子改写成 async/await 的形式：

  1. 用 await 替换掉 .then 的调用
  2. 在函数前面加上 async 关键字
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 不能在顶层代码运行
刚开始使用 await 的人常常会忘记 await 不能用在顶层代码中。如，下面这样就不行：


// 用在顶层代码中会报语法错误
let response = await fetch('/article/promise-chaining/user.json');
let user = await response.json();

我们可以将其包裹在一个匿名 async 函数中，如：

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

await 可以接收「thenables」
像 promise.then 那样，await 被允许接收 thenable 对象（具有 then 方法的对象）。有些对象虽然不是 promise，但是却兼容 promise，如果这些对象支持 .then，那么就可以对它们使用 await。

下面是一个 Thenable 类，await 接收了该类的实例：

class Thenable {constructor(num) {this.num = num;}
  then(resolve, reject) {alert(resolve);
    // 1 秒后解析为 this.num*2
    setTimeout(() => resolve(this.num * 2), 1000); // (*)
  }
};

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

f();

如果 await 接收了一个非 promise 的但是提供了 .then 方法的对象，它就会调用这个 then 方法，并将原生函数 resolve，reject 作为参数传入。然后 await 等到这两个方法中的某个被调用（在例子中发生在（*）的那一行），再处理得到的结果。

Async methods
如果想定义一个 async 的类方法，在方法前面添加 async 就可以了：

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

new Waiter()
  .wait()
  .then(alert); // 1

异常处理

如果一个 promise 正常解析，await promise 返回的就是其结果。但是如果 promise 被拒绝，就会抛出一个错误，就像在那一行有个 throw 语句那样。

这里的代码：

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

… 和下面是一样的：

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

在真实的环境下，promise 被拒绝前通常会等待一段时间。所以 await 会等待，然后抛出一个错误。

我们可以用 try...catch 来捕获上面的错误，就像对一般的 throw 语句那样：

async function f() {

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

f();

如果有错误发生，代码就会跳到 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 就会被拒绝。我们可以在函数调用后添加 .catch 来处理错误：

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

// f() 变为一个被拒绝的 promise
f().catch(alert); // TypeError: failed to fetch // (*)

如果我们忘了添加 .catch，我们就会得到一个未处理的 promise 错误（显示在控制台）。我们可以通过在错误处理与 Promise 章节讲的全局事件处理器来捕获这些。

async/await 和 promise.then/catch
当我们使用 async/await 时，几乎就不会用到 .then 了，因为为我们await 处理了异步等待。并且我们可以用 try...catch 来替代 .catch。这通常更加方便（当然不是绝对的）。

但是当我们在顶层代码，外面并没有任何 async 函数，我们在语法上就不能使用 await 了，所以这时候就可以用 .then/catch 来处理结果和异常。

就像上面代码的 (*) 那行一样。

async/await 可以和 Promise.all 一起使用
当我们需要同时等待多个 promise 时，我们可以用 Promise.all 来包裹他们，然后使用 await：

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

如果发生错误，也会正常传递：先从失败的 promise 传到 Promise.all，然后变成我们能用 try...catch 处理的异常。

Microtask queue

我们在微任务和事件循环章节讲过，promise 回调是异步执行的。每个 .then/catch/finally 回调首先被放入「微任务队列」然后在当前代码执行完成后被执行。

Async/await 是基于 promise 的，所以它内部使用相同的微任务队列，并且相对宏任务来说具有更高的优先级。

例如，看代码：

  • setTimeout(handler, 0)，应该以零延迟运行 handler 函数。
  • let x = await f()，函数 f() 是异步的，但是会立即运行。

那么如果 await 在 setTimeout 下面，哪一个先执行呢？


async function f() {return 1;}

(async () => {setTimeout(() => alert('timeout'), 0);

    await f();

    alert('await');
})();

这里很确定：await 总是先完成，因为（作为微任务）它相比 setTimeout 具有更高的优先级。

总结

函数前面的关键字 async 有两个作用：

  1. 让这个函数返回一个 promise
  2. 允许在函数内部使用 await

这个 await 关键字又让 JavaScript 引擎等待直到 promise 完成，然后：

  1. 如果有错误，就会抛出异常，就像那里有一个 throw error 语句一样。
  2. 否则，就返回结果，并赋值。

这两个关键字一起用就提供了一个很棒的方式来控制异步代码，并且易于读写。

有了 async/await 我们就几乎不需要使用 promise.then/catch，但是不要忘了它们是基于 promise 的，所以在有些时候（如在最外层代码）我们就可以用 promise 的形式。再有就是 Promise.all 可以帮助我们同时处理多个异步任务。

原文链接

正文完
async-await
发表至： javascript
2019-06-16
 0
请行动2019 | 一切过往，皆是序章
React学习之初入React世界
从零编写一个Koa-graphQL的案例
深度理解PromisePromise的特点和方法详解