需要等待回调内部的函数

Question

我正在使用 Auth0 在我的 React 应用中执行身份验证。

在 Auth0 获取信息后执行的默认重新路由后，我需要解析它返回的哈希值，然后使用返回的部分将 auth Token 保存到存储区以供以后执行其他任务。然而，这个处理 authToken 存储的函数发生在 parseHash（一个 auth0 函数）的回调中。

如何等待 handleLogin()（回调中调用的函数）完成，然后再继续执行其他任务？我无法使 parseHash() 异步，因为我没有真正的访问权限。

Root.tsx

`if (this.props.location.hash) {
      this.props.authClient.parseHash(
        { hash: this.props.location.hash },
        (err, authResult) => handleLogin(err, authResult, this.props.dispatch)
      );
    }
  }`

handleLogin.ts

`export const handleLogin = (
  err: Auth0ParseHashError | null,
  authResult: Auth0DecodedHash | null,
  dispatch: Dispatch
) => {
  if (authResult) {
    const userId = authResult.idTokenPayload.sub;
    dispatch(
      setAuthToken({
        token: {
          accessToken: authResult.idToken,
          userId
        }
      })
    );
  }
};`

这是从 Auth0 提供的关于 parseHash() 的信息

`parseHash(
    options: ParseHashOptions,
    callback: Auth0Callback<Auth0DecodedHash | null, Auth0ParseHashError>
  ): void;`

  `Decodes the id_token and verifies  the nonce.
  @param callback: function(err, {payload, transaction})`

Answer 1

如果您使用redux thunk，那么调度将返回一个承诺。例如，您应该可以使用.then

handleLogin(err, authResult, this.props.dispatch).then(() => {/*other task code here*/})

您还需要从 handleLogin 函数返回调度

Answer 2

const test = async () => {
  await example();
  console.log(`finished !`);
}

function example() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve();
    }, 2000);
  });
}

test();

那么对于你的情况，我会说： 在异步函数中

// Async anonymous function that directly executes
(async() => {
    const ret = await (err, authResult) => handleLogin(err, authResult, this.props.dispatch);

    if (this.props.location.hash) {
        this.props.authClient.parseHash(
            { hash: this.props.location.hash },
            ret
        );
    }
})()

问题是，handleLogin() 似乎没有返回任何东西，所以ret 可能保持为空。可能你的逻辑有问题。

记住：

(x) => x

等同于：

(x) => { return x; }

，带有箭头功能。