用 async/await 重写 promise，寻求澄清

Question

我的前端有两个处理 Facebook 登录/注销的函数，它们都是用 Promise 编写的。我想用async/await重写这些。

带有承诺的原始代码：

export function login() {
  return new Promise<facebookSdk.IAuthResponse>((resolve, reject) => {
    FB.login((response) => {
      if (response.authResponse) {
        resolve(response)
      } else {
        reject(errors.facebookLoginError)
      }
    })
  })
}

export function logout() {
  return new Promise<facebookSdk.IAuthResponse>((resolve) => {
    FB.logout((response) => {
      resolve(response)
    })
  })
}

这是我使用async/await 编写它们的方式：

function promiseFacebookLogin(): Promise<facebookSdk.IAuthResponse | Error> {
  return new Promise<facebookSdk.IAuthResponse>((resolve, reject) => {
    FB.login((response) => {
      if (response.authResponse) {
        resolve(response)
      } else {
        reject(errors.facebookLoginError)
      }
    })
  })
}

export async function login(): Promise<facebookSdk.IAuthResponse | Error> {
  try {
    return await promiseFacebookLogin()
  } catch (err) {
    throw err
  }
}

export async function logout(): Promise<facebookSdk.IAuthResponse | void> {
  try {
    return await FB.logout((response) => {
      return response
    })
  } catch (err) {
    throw err
  }
}

生成的代码按预期工作，但我想澄清一些事情。如您所见，我可以摆脱logout 函数的整个promise 语法。但是，当涉及到 login 函数时，我无法这样做。我不得不单独包装承诺并等待结果。据我研究，这似乎是回调函数的常见做法。

有人能解释一下为什么不能在 login 函数上完全摆脱 Promise 语法吗？

Answer 1

您不需要在 Promise 包装器中包装 FB.logout 函数的原因是因为您没有使用 FB.logout 的解析值，您基本上是在“解雇和忘记”。您可以编写相同的方法而无需像下面这样具有相同的效果：

export function logout(): void {
  try {
    FB.logout((response) => {
      // no-op
    })
  } catch (err) {
    throw err
  }
}

因为您需要FB.login 解析的值，所以您必须将其包装在Promise 中才能与async/await 一起使用。

Answer 2

我们使用关键字async 来调用返回Promise 实例的函数。此类函数可以在其他 async 函数的主体中 awaited。

将回调样式 API 转换为基于 Promise 的常见模式：

function fbLogin(..., cb) { ... }

async function genFbLogin(...args): Promise<*> {
  return new Promise((resolve, reject) => {
    fbLogin(...args, (error, result) => {
      if (error) {
        reject(error);        
      } else {
        resolve(result);
      }
    });
  });
}

如您所见，您的示例中的login 已经采用这种形式。它返回Promise，因此您可以在其声明之前放置async 关键字。与logout 相同。这些已经是基于 Promise 而不是基于回调的。那么logout函数的正确使用方法如下：

async function myLogoutHandler() {
  try {
    const response = await logout();
    console.log(response); // do sth with the result      
  } catch (e) {
    console.log('error', e);
  }
}

注意try-catch 块。将异步函数的主体包装在其中以捕获等待承诺可能引发的任何错误非常重要。

Answer 3

由于FB.login 和FB.logout 函数的使用限制，恐怕你无法重写导出函数。原因是他们不返回承诺。但是，如果例如 FB 进行了调整，并更改了函数行为以返回解析为 response 的承诺（或者如果 response.authResponse 是 false 则抛出错误），那么您可以使用 @Saravana 在他的fiddle.

所以目前，尝试重写您当前的login 和logout 函数只会引入更多代码。你可以做的是让它们保持这种状态（因为它们可以这样），当你在某个地方调用函数时，你可以等待它们，因为你知道它们已经返回了一个 Promise。例如

// at some distant part of your code base
async function someFunc() {
  try:
    // await the response which is the one resolved in the callback function
    // inside the FB.login call
    let fbLoginResponse = await login();

    // ... do something with the response here ...

  catch (err) {
    // the error here is errors.facebookLoginError because
    // it's the one rejected in the callback function in the FB.login call
    console.log('You are not authenticated! Please try again.');
  }
}