为代码新星揭秘：async 函数中 await、return 和 return await 的不同之处

2023-09-30 04:33:14

当我们在异步函数中使用 await、return 和 return await 时，经常会感到困惑，因为它们看起来似乎很相似。但是，它们之间还是存在一些细微的差异，掌握这些差异对于编写出正确的异步代码非常重要。

await

await 操作符用于暂停一个异步函数的执行，直到异步操作完成。在等待期间，函数会自动挂起，而不会阻塞主线程。一旦异步操作完成，函数就会继续执行。

例如，我们有一个名为 fetchUser() 的异步函数，用于从服务器获取用户信息：

async function fetchUser() {
  const response = await fetch('https://api.example.com/user');
  const user = await response.json();
  return user;
}

在这个例子中，await 操作符用于等待 fetch() 和 response.json() 操作完成。在等待期间，函数会挂起，而主线程不会被阻塞。一旦这两个操作完成，函数就会继续执行并返回 user 对象。

return

return 语句用于从函数中返回一个值。它可以用来返回一个同步值或一个异步值。如果返回的是一个异步值，那么函数就会自动挂起，直到异步操作完成。

例如，我们有一个名为 greetUser() 的异步函数，用于向用户打招呼：

async function greetUser() {
  const user = await fetchUser();
  return `Hello, ${user.name}!`;
}

在这个例子中，return 语句用于返回一个字符串，而字符串的内容是根据从服务器获取的用户信息生成的。由于 fetchUser() 是一个异步函数，所以 return 语句会自动挂起，直到 fetchUser() 操作完成。一旦 fetchUser() 操作完成，函数就会继续执行并返回打招呼的字符串。

return await

return await 语句用于从函数中返回一个异步值。它与 return 语句的区别在于，return await 语句会立即返回一个异步值，而 return 语句会等到异步操作完成之后再返回一个值。

例如，我们有一个名为 getUserData() 的异步函数，用于从服务器获取用户数据：

async function getUserData() {
  const response = await fetch('https://api.example.com/user-data');
  return await response.json();
}

在这个例子中，return await 语句用于返回 response.json() 操作的异步值。函数会立即返回这个异步值，而不会等到 response.json() 操作完成。因此，在使用 return await 语句时，我们需要特别注意，因为函数可能会在异步操作完成之前就返回。