•  阅读 5 分钟

JavaScript 中 async/await 的有趣解释

JavaScript 中,有三种方式编写异步任务。

第一种方法是使用回调。当一个异步操作完成后,执行一个回调函数(意思是当操作完成后再回调我):

const callbackFunction = (result = {
  // Called when the operation completes
})
asyncOperation(params, callbackFunction)

但只要处理多个异步操作,回调函数就会互相嵌套,最后陷入回调地狱。

promise 是一个异步任务结果的占位对象。使用 promise,你可以更容易地处理异步操作。

const promise = asyncOperation(params)

promise.then((result) => {
  // Called when the operation completes
})

有没有看到 .then().then()...then() promise 链 🚂🚃🚃🚃🚃?promise 问题是它们很冗长。

最终,async/await 语法被设计出来(ES2017)。它可以让你简单地以同步方式编写异步代码:

;(async function () {
  const result = await asyncOperation(params)
  // Called when the operation completes
})()

在这篇文章中,我将逐步解释如何在 JavaScript 中使用 async/await

注意:async/await 是在 Promise 之上的语法糖,建议在继续之前先熟悉一下 Promise

同步扩展

因为帖子的标题提到了一个有趣的解释,所以我将就一个贪婪的老板的故事逐步解释 async/await

让我们从一个简单的(同步)函数开始,它的任务是计算加薪:

function increaseSalary(base, increase) {
  const newSalary = base + increase
  console.log(`New salary: ${newSalary}`)
  return newSalary
}

increaseSalary(1000, 200) // => 1200
// logs "New salary: 1200"

increaseSalary() 是一个将 2 个数相加的函数,n1 + n2 是一个同步操作。

老板不希望员工的工资快速增加 ☹。所以你不允许在 increaseSalary() 函数中使用加法运算符 +

相反,你必须使用一个慢速函数,需要 2 秒的时间来总结数字。让我们把这个函数命名为 slowAddition()

function slowAddition(n1, n2) {
  return new Promise((resolve) => {
    setTimeout(() => resolve(n1 + n2), 2000)
  })
}

slowAddition(1, 5).then(sum => console.log(sum))
// After 2 seconds logs "6"

slowAddition() 返回一个承诺,在延迟 2 秒后解析为参数之和。如何更新 increaseSalary() 函数来支持慢加法?

异步扩展

第一个天真地尝试是用调用 slowAddition(n1,n2) 代替 n1 + n2 的表达式:

function increaseSalary(base, increase) {
  const newSalary = slowAddition(base, increase)
  console.log(`New salary: ${newSalary}`)
  return newSalary
}

increaseSalary(1000, 100) // => [object Promise]
// Logs "New salary [object Promise]"

不幸的是,函数 increaseSalary() 不知道如何处理承诺。该函数认为 promise 是常规对象:它不知道如何以及何时从 promise 中提取值。

现在是时候让 increaseSalary() 知道如何使用 async/await 语法处理 slowAddition() 返回的 promise。

首先,你需要在函数声明附近添加 async 关键字。然后,在函数体内部,你需要使用 await 操作符来使函数等待 promise 被解析。

让我们对 increaseSalary() 函数进行这些修改:

async function increaseSalary(base, increase) {
  const newSalary = await slowAddition(base, increase)
  console.log(`New salary: ${newSalary}`)
  return newSalary
}

increaseSalary(1000, 200) // => [object Promise]
// After 2 seconds logs "New salary 1200"

JavaScript 以如下方式评估 const newSalary = await slowAddition(base, increase)

  1. await slowAddition(base, increase) 暂停了 increaseSalary() 函数的执行。
  2. 在 2 秒后,由 slowAddition(base,increase) 返回的承诺会被解析出来。
  3. increaseSalary() 函数恢复执行。
  4. newSalary 是用 promise 的解析值 1200(1000 + 200) 来分配的。
  5. 函数执行照常进行。

简单来说,当 JavaScript 在一个异步函数中遇到 await promise 时,它会暂停函数的执行,直到 promise 被解析。promise 的解析值就成了 await promise 评估的结果。

尽管 return newSalary 返回的是数字 1200,但如果你看看函数 increaseSalary(1000, 200) 返回的实际值—它仍然是一个 promise!

一个 async 函数总是返回一个 promise,它解析为函数体内部的返回值:

increaseSalary(1000, 200).then((salary) => {
  salary // => 1200
})

async 函数返回 promise 是一件好事,因为你可以嵌套异步函数。

错误异步扩展

老板提出了慢慢加薪的要求,这是不公平的。你决定破坏慢速加法 slowAddition() 函数。

你修改慢加法函数,拒绝数字加法:

function slowAdditionBroken(n1, n2) {
  return new Promise((resolve, reject) => {
    setTimeout(() => reject(new Error('Unable to sum numbers')), 3000)
  })
}

slowAdditionBroken(1, 5).catch(e => console.log(e.message))
// After 3 seconds logs "Unable to sum numbers"

怎样在 calculateSalary() 异步函数中针对 rejected promise?只需要把 await 操作包含在 try/catch 块中:

async function increaseSalaryBroken(base, increase) {
  let newSalary
  try {
    newSalary = await slowAdditionBroken(base, increase)
  }
  catch (e) {
    console.log(`Error: ${e.message}`)
    newSalary = base * 2
  }
  console.log(`New salary: ${newSalary}`)
  return newSalary
}

increaseSalaryBroken(1000, 200)
// After 3 seconds logs
// "Error: Unable to sum numbers", "New salary: 2000"

在表达式 await slowAdditionBroken(base, increase) 处,JavaScript 暂停函数的执行,并等待 promise 的实现(promise 成功解决)或拒绝(发生错误)。

3 秒后,用 new Error('Unable to sum numbers') 拒绝 promise。因为拒绝,函数执行跳入 catch (e){ } 子句,在该子句中,基本工资乘以 2。

Miser 支付了两倍的工资。现在老板要支付双倍工资。很好!

如果你没有抓住一个被拒绝的 promise,那么错误就会传播,async 异步函数返回的 promise 就会被拒绝:

async function increaseSalaryBroken(base, increase) {
  const newSalary = await slowAdditionBroken(base, increase)
  return newSalary
}

increaseSalaryBroken(1000, 200).catch((e) => {
  e.message // => "Unable to sum numbers"
})

嵌套异步函数

尽管在异步函数内部的 return <value> 表达式返回的是有效载荷值而不是 promise,但当异步函数被调用时,它仍然会返回一个 promise。

这是件好事,因为你可以嵌套异步函数!

例如,让我们写一个使用 slowAddition() 函数增加工资数组的异步函数:

async function increaseSalaries(baseSalaries, increase) {
  const newSalaries = []
  for (const baseSalary of baseSalaries) {
    newSalaries.push(await increaseSalary(baseSalary, increase))
  }
  console.log(`New salaries: ${newSalaries}`)
  return newSalaries
}

increaseSalaries([950, 800, 1000], 100)
// After 6 seconds logs "New salaries: 1050,900,1100"

await salaryIncrease(baseSalary, increase) 对数组中的每个工资都被调用 3 次。每次 JavaScript 都会等待 2 秒,直到计算出总和。

这样就可以把 async 函数嵌套到 async 函数中。

并行 async

在前面的求和工资数组的例子中,求和是按顺序进行的:每增加一个工资,函数就暂停 2 秒。

但是你可以并行地进行工资增加! 让我们使用 Promise.all() 实用函数来同时启动所有的加薪。

async function increaseSalaries(baseSalaries, increase) {
  const salariesPromises = []
  for (const baseSalary of baseSalaries) {
    salariesPromises.push(increaseSalary(baseSalary, increase))
  }
  const newSalaries = await Promise.all(salariesPromises)
  console.log(`New salaries: ${newSalaries}`)
  return newSalaries
}

increaseSalaries([950, 800, 1000], 100)
// After 2 seconds logs "New salaries: 1050,900,1100"

加薪任务马上开始(在 increaseSalary(baseSalary, increase) 附近没有使用 await),并在 salariesPromises 中收集 promise。

await Promise.all(salitsPromises) 则暂停函数的执行,直到所有并行处理的异步操作完成。最后,只有在 2 秒后,newSalaries 变量才会包含增加的薪水。

你成功地在短短 2 秒内增加了所有员工的工资,即使每个操作都很慢,需要 2 秒。你又骗过了老板!

async 函数例子

当你想使用 async/await 语法时,常见情况是获取远程数据。

fetch() 方法是与 async/await 一起使用的一个很好的候选方法,因为它返回一个 promise,该 promise 解析到远程 API 返回的值。

例如,以下是你如何从远程服务器获取电影列表的方法:

async function fetchMovies() {
  const response = await fetch('https://api.example.com/movies')
  if (!response.ok) {
    throw new Error('Failed to fetch movies')
  }
  const movies = await response.json()
  return movies
}

await fetch('https://api.example.com/movies') 要暂停执行 fetchMovies(),直到请求完成。然后你可以使用 await response.json() 来提取实际。

总结

async/await 是在 promise 之上的语法糖,提供了一种以同步方式处理异步任务的方法。

async/await 有 4 条简单的规则:

  1. 一个处理异步任务的函数必须使用 async 关键字来标记。
  2. await promise 操作符暂停函数的执行,直到 promise 被成功解析或被拒绝。
  3. 如果 promise 解析成功, await 操作符返回解析值: const resolvedValue = await promise。否则,你可以在 try/catch 里面捕获一个被拒绝的 promise。
  4. 一个异步函数总是返回一个 promise,这就提供了嵌套异步函数的能力。

本文由 吳文俊 翻译,原文地址 An Interesting Explanation of async/await in JavaScript

> 分享并评论 Twitter / Facebook
> cd ..