Async/Await 也就是大家知道的异步函数,它是一个用来控制 JavaScript 异步流程的一个记号。而在很多现代浏览器上也曾实现过这样的设想。它的灵感来源于 C# 和 F#,现在 Async/Await 在 ES2017 已经平稳着陆。
通常我们认为 async function 是一个能返回 Promise 的 function 。你也可以在 async function 使用 await 关键字。 await 关键字可以放在一个需要返回 Promise 的表达式前,所得到的值被从 Promise 里面剥离开,以便能用更直观的同步体验。我们来看一下实际的代码更直观。
- // 这是一个简单的返回 Promise 函数
- // 功能是在两秒以后 resolve("MESSAGE") .
- function getMessage() {
- return new Promise((resolve, reject) = >{
- setTimeout(() = >resolve("MESSAGE"), 2000);
- });
- }
- async function start() {
- const message = await getMessage();
- return `The message is: ${message}`;
- }
- start().then(msg => console.log(msg));
- // "The message is: MESSAGE"
Async/Await 提供了一个看起来相对同步的方法来执行异步代码。同时也提供了一种简洁而直观的方法来处理异步的错误,因为它实现了 try…catch 标记,这是 JavaScript 里面最常见的一种同步模式。
在我们开始冒险之前,我们应该清楚,Async/Await 是建立在 JavaScript Promises 上的,而且关于它的知识是很重要的。
要创建一个 async 函数,一般就要把 async 关键字放在声明函数之前,就像这样:
- async function fetchWrapper() {
- return fetch('/api/url/');
- }
- const fetchWrapper = async () => fetch('/api/url/');
- const obj = {
- async fetchWrapper() {
- // ...
- }
- }
- async function updateBlogPost(postId, modifiedPost) {
- const oldPost = await getPost(postId);
- const updatedPost = { ...oldPost, ...modifiedPost };
- const savedPost = await savePost(updatedPost);
- return savedPost;
- }
在这里的 await 是用在其他返回 promise 的函数前。在第一行,oldPost 被赋值为 getPost 执行 resolve 后返回的 value。在下一行,我们使用了解构赋值来演示怎样把 oldPost 和 modifiedPost 合并。最终我们把 post 储存下来,返回了 savedPost 的结果。
来源: https://juejin.im/post/5a39e0986fb9a044ff319aa0