/

JavaScript 中如何使用 async/await

JavaScript 中如何使用 async/await

了解在 JavaScript 中使用异步函数的现代方法。 JavaScript 在很短的时间内从回调函数演变为 Promises，而自从 ES2017 以来，使用 async/await 语法的异步 JavaScript 变得更加简单。

介绍

JavaScript 在很短的时间内从回调函数演变为 promises（ES2015），而自从 ES2017 以来，使用异步 JavaScript 的 async/await 语法变得更加简单。

异步函数是 promises 和 generators 的组合，基本上它们是对 promises 的更高级抽象。请记住：async/await 是建立在 promises 之上的。

为什么引入 async/await？

它们减少了 promises 的样板代码，并且消除了 promises 链式调用的“不中断链条”的限制。

在 ES2015 中引入 Promise 时，它们被用来解决异步代码的问题，并且确实解决了这个问题，但是在 ES2015 和 ES2017 之间的两年时间里，很明显 promises 不能成为最终解决方案。

Promises 被引入用来解决著名的“回调地狱”问题，但是它们自身引入了复杂性和语法复杂性。

它们是一个很好的原语，可以为开发人员提供更好的语法，所以在适当的时候，我们得到了 async 函数。

它们使代码看起来像是同步的，但在幕后是异步的和非阻塞的。

它是如何工作的

异步函数返回一个 promise，就像这个例子中的那样：

1
2
3
4
5
const doSomethingAsync = () => {
 return new Promise(resolve => {
 setTimeout(() => resolve('I did something'), 3000)
 })
}

当您想要调用此函数时，您在前面加上 await，调用代码将等到 promise 被解析或拒绝之前停止。一个注意事项：客户端函数必须定义为async。以下是一个示例：

1
2
3
const doSomething = async () => {
 console.log(await doSomethingAsync())
}

一个简单的示例

这是一个简单的示例，它使用 async/await 异步运行一个函数：

1
2
3
4
5
6
7
8
9
10
11
12
13
const doSomethingAsync = () => {
 return new Promise(resolve => {
 setTimeout(() => resolve('I did something'), 3000)
 })
}

const doSomething = async () => {
 console.log(await doSomethingAsync())
}

console.log('Before')
doSomething()
console.log('After')

上面的代码将在浏览器控制台打印以下内容：

1
2
3
Before
After
I did something //after 3s

Promises 全覆盖

在任何函数前加上 async 关键字意味着该函数将返回一个 promise。

即使它没有明确地这样做，它也会在内部使其返回一个 promise。

这就是这段代码有效的原因：

1
2
3
4
5
const aFunction = async () => {
 return 'test'
}

aFunction().then(alert) // 这会提示“test”

它与以下代码相同：

1
2
3
4
5
const aFunction = async () => {
 return Promise.resolve('test')
}

aFunction().then(alert) // 这会提示“test”

代码更易读

正如您在上面的示例中看到的那样，我们的代码看起来非常简单。将其与使用普通 promises、链式调用和回调函数的代码进行比较。

当代码更加复杂时，将会有更大的优势。

例如，下面是使用 promises 获取并解析 JSON 资源的方式：

1
2
3
4
5
6
7
8
9
const getFirstUserData = () => {
 return fetch('/users.json') // 获取用户列表
 .then(response => response.json()) // 解析 JSON
 .then(users => users[0]) // 选择第一个用户
 .then(user => fetch(`/users/${user.name}`)) // 获取用户数据
 .then(userResponse => userResponse.json()) // 解析 JSON
}

getFirstUserData()

以下是使用 await/async 提供相同功能的方式：

1
2
3
4
5
6
7
8
9
10
const getFirstUserData = async () => {
 const response = await fetch('/users.json') // 获取用户列表
 const users = await response.json() // 解析 JSON
 const user = users[0] // 选择第一个用户
 const userResponse = await fetch(`/users/${user.name}`) // 获取用户数据
 const userData = await userResponse.json() // 解析 JSON
 return userData
}

getFirstUserData()

串行多个异步函数

异步函数可以很容易地链接在一起，并且语法比使用普通 promises 更加可读：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
const promiseToDoSomething = () => {
 return new Promise(resolve => {
 setTimeout(() => resolve('I did something'), 10000)
 })
}

const watchOverSomeoneDoingSomething = async () => {
 const something = await promiseToDoSomething()
 return something + ' and I watched'
}

const watchOverSomeoneWatchingSomeoneDoingSomething = async () => {
 const something = await watchOverSomeoneDoingSomething()
 return something + ' and I watched as well'
}

watchOverSomeoneWatchingSomeoneDoingSomething().then(res => {
 console.log(res)
})

将打印：

1
I did something and I watched and I watched as well

更容易调试

调试 promises 很困难，因为调试器不会逐步执行异步代码。

Async/await 让这个过程变得非常容易因为对编译器来说，它就像是同步代码一样。