前端JavaScript篇之await 在等待什么呢？async/await 如何捕获异常

---

await 在等待什么呢？

await 关键字实际上是等待一个表达式的结果，这个表达式的计算结果可以是 Promise 对象或者其他值。如果 await 后面的表达式不是 Promise 对象，那么 await 表达式的运算结果就是它等到的东西；如果 await 后面的表达式是 Promise 对象，那么 await 会阻塞后面的代码，等待 Promise 对象的状态变化，然后得到 Promise 对象 resolved 的值，作为 await 表达式的运算结果。

下面是一个使用 await 等待普通函数调用的示例代码：

function getSomething() {
  return 'something'
}

async function test() {
  const result = await getSomething()
  console.log(result)
}

test()

在上面的代码中，我们定义了一个普通函数 getSomething()，它会返回一个字符串。然后我们定义了一个异步函数 test()，在函数内部使用 await 关键字等待 getSomething() 函数的返回值，并将其赋值给变量 result，然后打印出 result 的值。

需要注意的是，await 关键字只能在异步函数内部使用，如果在同步函数内部使用 await 关键字会导致语法错误。同时，在使用 await 关键字时需要注意避免出现死循环和阻塞主线程的问题，以免影响程序的性能和稳定性。

下面是一个使用 await 等待 Promise 对象的示例代码：

function testAsy(x) {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve(x)
    }, 3000)
  })
}

async function testAwt() {
  let result = await testAsy('hello world')
  console.log(result) // 3秒钟之后出现hello world
  console.log('cuger') // 3秒钟之后出现cuger
}

testAwt()
console.log('cug') // 立即输出cug

在上面的代码中，我们定义了一个异步函数 testAsy()，它会返回一个 Promise 对象，这个 Promise 对象会在 3 秒钟后 resolve，并将参数 x 作为 resolve 的值。然后我们定义了一个异步函数 testAwt()，在函数内部使用 await 关键字等待 testAsy() 函数返回的 Promise 对象的状态变化，并将其 resolved 的值赋值给变量 result，然后打印出 result 的值和字符串 cuger。最后我们调用 testAwt() 函数，并在函数外部打印出字符串 cug。

需要注意的是，testAwt() 函数会在等待 testAsy() 函数返回的 Promise 对象的过程中被阻塞，直到 Promise 对象的状态变为 resolved，然后才会继续执行后面的代码。因此，在调用 testAwt() 函数之后，会先输出字符串 cug，然后等待 3 秒钟之后才会输出字符串 hello world 和 cuger。

async/await 如何捕获异常

使用 async/await 可以像同步代码一样使用 try…catch 块来处理可能出现的异常。在异步函数中使用 try…catch 块时，需要将可能出现异常的代码放在 try 代码块中，然后在 catch 代码块中处理异常，如下所示：

async function fetchData() {
  try {
    const response = await fetch('https://example.com/data')
    const data = await response.json()
    console.log(data)
  } catch (error) {
    console.error('Error fetching data:', error)
  }
}

在上面的代码中，fetchData 是一个异步函数，使用 try…catch 块来处理可能出现的异常。在 try 代码块中，我们使用 await 关键字来等待 fetch 请求和 json 解析完成，如果出现异常，会被 catch 代码块捕获并打印错误信息。

需要注意的是，如果在异步函数中使用 try…catch 块来捕获异常，只能捕获到异步函数内部的异常，如果异步函数外部的代码出现异常，需要在调用异步函数的代码中使用 try…catch 块来处理异常。

持续学习总结记录中，回顾一下上面的内容：
在async/await中，await关键字用于等待一个Promise对象的解析结果。它会暂停当前函数的执行，直到Promise对象被解析（即状态变为resolved）并返回结果。
使用try-catch语法可以捕获async/await中的异常。当await关键字等待的Promise对象发生错误（状态变为rejected），它会抛出一个异常。我们可以使用try块来包裹await语句，并使用catch块来捕获这个异常，然后进行相应的错误处理。
总结起来，await用于等待Promise对象的解析结果，而捕获异常则通过使用try-catch语法来实现。这样我们可以优雅地处理异步操作的结果和异常情况。