异步 JavaScript 之 async...await这是我参与8月更文挑战的第28天，活动详情查看：8月更文挑战

这是我参与8月更文挑战的第28天，活动详情查看：8月更文挑战

学习贵在坚持, 笔记是灵魂, 温故而知新, 时不时翻一翻, 回顾一下知识点, 加深记忆, 事半功倍!

前文我们学习了关于 JavaScript 中的 基于对象编程的JavaScript 函数-递归`

今天来学习 异步函数关键字 async - await

1. JavaScript async 和 await

关键点小总结

ES2017 新增 async & await 关键字, 我们可以编写伪同步代码表示异步.
任何使用 await 的代码本身都是异步的,
所以只能在以 async 关键字声明的函数内部使用 await
可以在 async 函数内部嵌套 await 表达式, 嵌套多深都没关系
对于复制的代码, async...await 这种表示方法比 promise 更简洁、方便、易读

代码运行实际上是完全线性的-同步执行-总是在下一个操作之前要等待上一个操作完成.

ES2017 提出了新的关键字: async 和 await, 这样就可以使用 JavaScript 编写伪同步代码来表示异步计算.

异步函数 `async 函数名...`

上一篇文章我们学到函数的创建方式之一: 通过 function 关键字创建一个功能函数.

声明一个异步函数

而异步函数只需在 function关键字前面加上关键字 async标记, 也可以在函数名前面加上 async, 以此来使一个函数异步.

async function getStudentScore(){
  let response = await fetch('api/student/score')
  let profile = await response.json()
  return profile.highScore
}

调用异步函数

在调用这样一个异步函数的时候, 它会返回一个 promise, 并在其函数体内以一种我们看似同步的方式 await 等待其他 promise. 一旦被调用的函数返回某个值的时候, 该 promise 就是得到解决, 而出现异常, 该promise 则被拒绝

在 async 异步函数内部使用关键字 await 放在一个表达式之前, 以等待 promise 解决, 然后继续执行该函数.

async 函数不再像常规的 JavaScript 函数从一开始就一直运行. 因其内部的 await, 则其可以在任何具有 await 的地方暂停, 并且在之后可以恢复运行.

async 使用途径

可以对任何函数使用关键字 async, 处理文章开头提到的 function 之前, 还可以在 箭头函数/ 类 以及对象字面量的简写方法使用

async 异步函数工作原理

理解 async 异步函数的工作原理

比如有如下一个 async 函数

  async function fn(x) { 函数体... }

function fn(x) {
  return new Promise(function() {

  })
}

跟上节奏, 一步一步向全栈进击!

接下来会继续详细学习 JavaScript 的其他相关方法, 冲鸭!! xdm

学习用到的效率工具, 提高开发效率, 为我们的开发提效赋能!

跟上前进的步伐, 向前加油吧

加油!! go~~

异步 JavaScript 之 async...await

1. JavaScript async 和 await

关键点 小总结

异步函数 async 函数名...

声明一个 异步函数

调用 异步函数