盘点JavaScript中Async/Await知识

大家好，我是进阶学习者。

一、前言

Async/await 是以更舒适的方式使用 promise 的一种特殊语法，同时它也非常易于理解和使用。

二、Async function

让以 async 这个关键字开始。它可以被放置在一个函数前面。

如下所示：

 
 
 
 
    
  
  
  
  
  1. async function f() {
    2. 
  
  
  
  
  2.   return 1;
    3. 
  
  
  
  
  3. }
    4.

在函数前面的 “async” 这个单词表达了一个简单的事情：即这个函数总是返回一个 promise。其他值将自动被包装在一个 resolved 的 promise 中。

例如，下面这个函数返回一个结果为 1 的 resolved promise。

让测试一下：

 
 
 
 
    
  
  
  
  
  1. async function f() {
    2. 
  
  
  
  
  2.   return 1;
    3. 
  
  
  
  
  3. }
    4. 
  
  
  
  
  4. f().then(alert); // 1
    5.

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

 
 
 
 
    
  
  
  
  
  1. async function f() {
    2. 
  
  
  
  
  2.   return Promise.resolve(1);
    3. 
  
  
  
  
  3. }
    4. 
  
  
  
  
  4. f().then(alert); // 1
    5.

注：

async 确保了函数返回一个 promise，也会将非 promise 的值包装进去。很简单，对吧?但不仅仅这些。还有另外一个叫 await 的关键词，它只在 async 函数内工作，也非常酷。

三、Await

1. 语法

 
 
 
 
    
  
  
  
  
  1. // 只在 async 函数内工作
    2. 
  
  
  
  
  2. let value = await promise;
    3.

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

这里的例就是一个 1 秒后 resolve 的 promise：

 
 
 
 
    
  
  
  
  
  1. async function f() {
    2. 
  
  
  
  
  2.   let promise = new Promise((resolve, reject) => {
    3. 
  
  
  
  
  3.     setTimeout(() => resolve("done!"), 1000)
    4. 
  
  
  
  
  4.   });
    5. 
  
  
  
  
  5.   let result = await promise; // 等待，直到 promise resolve (*)
    6. 
  
  
  
  
  6.   alert(result); // "done!"
    7. 
  
  
  
  
  7. }
    8. 
  
  
  
  
  8. f();
    9.

代码解析：

这个函数在执行的时候，“暂停”在了 (*) 那一行，并在 promise settle 时，拿到 result 作为结果继续往下执行。所以上面这段代码在一秒后显示 “done!”。

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

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

不能在普通函数中使用 await。

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

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

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

showAvatar() 例子，并将其改写成 async/await 的形式：

需要用 await 替换掉 .then 的调用。

另外，需要在函数前面加上 async 关键字，以使它们能工作。

 
 
 
 
    
  
  
  
  
  1. async function showAvatar() {
    2. 
  
  
  
  
  2.   // 读取的 JSON
    3. 
  
  
  
  
  3.   let response = await fetch('/article/promise-chaining/user.json');
    4. 
  
  
  
  
  4.   let user = await response.json();
    5. 
  
  
  
  
  5.   // 读取 github 用户信息
    6. 
  
  
  
  
  6.   let githubResponse = await fetch(`https://api.github.com/users/${user.name}`);
    7. 
  
  
  
  
  7.   let githubUser = await githubResponse.json();
    8. 
  
  
  
  
  8.   // 显示头像
    9. 
  
  
  
  
  9.   let img = document.createElement('img');
    10. 
  
  
  
  
  10.   img.src = githubUser.avatar_url;
    11. 
  
  
  
  
  11.   img.className = "promise-avatar-example";
    12. 
  
  
  
  
  12.   document.body.append(img);
    13. 
  
  
  
  
  13.   // 等待 3 秒
    14. 
  
  
  
  
  14.   await new Promise((resolve, reject) => setTimeout(resolve, 3000));
    15. 
  
  
  
  
  15.   img.remove();
    16. 
  
  
  
  
  16.   return githubUser;
    17. 
  
  
  
  
  17. }
    18. 
  
  
  
  
  18. showAvatar();
    19.

简洁明了，是吧?比之前可强多了。await 不能在顶层代码运行。

这有一个用于演示的 Thenable 类

下面的 await 接受了该类的例子：

 
 
 
 
    
  
  
  
  
  1. class Thenable {
    2. 
  
  
  
  
  2.   constructor(num) {
    3. 
  
  
  
  
  3.     this.num = num;
    4. 
  
  
  
  
  4.   }
    5. 
  
  
  
  
  5.   then(resolve, reject) {
    6. 
  
  
  
  
  6.     alert(resolve);
    7. 
  
  
  
  
  7.     // 1000ms 后使用 this.num*2 进行 resolve
    8. 
  
  
  
  
  8.     setTimeout(() => resolve(this.num * 2), 1000); // (*)
    9. 
  
  
  
  
  9.   }
    10. 
  
  
  
  
  10. };
    11. 
  
  
  
  
  11. async function f() {
    12. 
  
  
  
  
  12.   // 等待 1 秒，之后 result 变为 2
    13. 
  
  
  
  
  13.   let result = await new Thenable(1);
    14. 
  
  
  
  
  14.   alert(result);
    15. 
  
  
  
  
  15. }
    16. 
  
  
  
  
  16. f();
    17.

运行结果：

注：

如果 await 接收了一个非 promise 的但是提供了 .then 方法的对象，它就会调用这个 .then 方法，并将内建的函数 resolve 和 reject 作为参数传入(就像它对待一个常规的 Promise executor 时一样)。

然后 await 等待直到这两个函数中的某个被调用(在上面这个例子中发生在 (*) 行)，然后使用得到的结果继续执行后续任务。

2. Class 中的 async 方法

要声明一个 class 中的 async 方法，只需在对应方法前面加上 async 即可：

 
 
 
 
    
  
  
  
  
  1. class Waiter {
    2. 
  
  
  
  
  2.   async wait() {
    3. 
  
  
  
  
  3.     return await Promise.resolve(1);
    4. 
  
  
  
  
  4.   }
    5. 
  
  
  
  
  5. }
    6. 
  
  
  
  
  6. new Waiter()
    7. 
  
  
  
  
  7.   .wait()
    8. 
  
  
  
  
  8.   .then(alert); // 1
    9.

运行结果：

注：

它确保了方法的返回值是一个 promise 并且可以在方法中使用 await。

四、总结

本文基于JavaScript基础，介绍了async的使用。函数前面的关键字 async 有两个作用：让这个函数总是返回一个 promise。允许在该函数内使用 await。

这两个关键字一起提供了一个很好的用来编写异步代码的框架，这种代码易于阅读也易于编写。通过案例的分分析，图文结合的方式，进行详细的讲解，使用JavaScript语言，能够让读者更好的理解。

代码很简单，希望能够帮助你更好的学习。

分享题目：盘点JavaScript中Async/Await知识
URL分享：http://www.shufengxianlan.com/qtweb/news45/479695.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

App设计知识

同城分类信息

营销网站定位　　 　服务器托管　　 　响应式网站　　 　网络营销推广　　 　成都标志设计　　 　内江广告　　 　响应式网站设计方案　　 　成都网站维护　　 　绵竹做网站　　 　成都装修公司　　 　网站维护报价　　 　营销推广　　 　普特斯腐植酸　　 　阿坝网站设计　　 　标志设计　　 　绵阳网站建设　　 　梓潼网站设计　　 　网络营销推广　　 　香港空间腾讯云　　 　南宁旺客科技