javascript - 异步/等待 : do async nested functions automatically need to be awaited a level above?

Question

我有几个关于 async/await 如何跨级别流动的问题。一些示例代码:

class Auth
  async validateJwt() { // A
    const result = await fetch(...) // #1
    return await result.json(); // #1.5
  }

  async createJwtOrValidateExisting() { // B
    const token = await validateJwt(); // #2
    return token.data;
  }
}

const auth = new Auth();

// React.js top level component
const App = props => {

  useEffect(() => { // C
    const tokenData = auth.createJwtOrValidateExisting(); // #3    
  }
}

我需要在第 2 步和第 3 步都等待吗？

如果是这样，我想我也需要在 C 行上使用 async 关键字。

我知道await会暂停执行，这是在fetch()和.json()步骤中需要的。在第一种方法中，这是直观的。

但是当您在步骤 #2 处等待时，我相信这还需要更高级别函数上的 async 关键字，这意味着必须从中返回一个 promise 。这似乎不合适，因为 .json() 步骤已在步骤 1.5 中处理/解决。

如果这种解释不正确，并且我确实需要在步骤 B/#2 上进行 async/await，这意味着我还必须将 useEffect 回调转换为异步函数。

任何有关上述关键字正确使用的解释都会有很大帮助，谢谢。

Answer 1

Do I need to await at both steps 2 and 3?

对于#2，是的。 validateJwt 是一个async 函数。如果您在没有 await 的情况下调用它，您会得到一个 promise 。如果您使用 await 调用它，您将获得该 promise 的解析值。

对于 #3，useEffect 不是异步函数，因此您必须使用 then 来处理 createJwtOrValidateExisting 返回的 Promise 。或者，您可以将 useEffect 设为异步函数，并在 createJwtOrValidateExisting 上使用 await。

此外，在 #1.5 中，return wait result.json() 上的 await 不是必需的。 response.json() 返回一个 Promise，您可以立即从异步函数返回该 Promise。请参阅https://eslint.org/docs/rules/no-return-await

这应该是:

class Auth
  async validateJwt() {
    const result = await fetch(...)
    return result.json()
  }

  async createJwtOrValidateExisting() {
    const token = await validateJwt()
    return token.data
  }
}

const auth = new Auth();

const App = props => {

  async useEffect(() => {
    const tokenData = await auth.createJwtOrValidateExisting()
  }
}

经验法则是异步函数只是一个返回 Promise 的函数。如果您想在不使用 then 的情况下提取其值，则使该函数异步，并对该 Promise 使用 await 。