Angular中如何将amazon-cognito-identity-js回调转为Promise

我正在使用amazon-cognito-identity-js，现有代码如下：

cognitoUser?.getUserAttributes((err, results) => {
  if (err) {
    console.log(err.message || JSON.stringify(err));
    return err.message || JSON.stringify(err);
  }
  if (results != undefined) {
    return results[2].Value;
  }
  return undefined;
});

我能打印出results[2]的正确值，但无法返回该值。尝试过util-promisify但该包适配Webpack，请问在Angular应用中如何改用Promise实现？

getUserAttributes()的声明如下：

public getUserAttributes(
callback: NodeCallback<Error, CognitoUserAttribute[]>
): void;

不用依赖第三方包，直接手动封装原生Promise即可，Angular环境完全支持这种写法：

function getUserAttributesPromise(cognitoUser: CognitoUser): Promise<string | undefined> {
  return new Promise((resolve, reject) => {
    cognitoUser.getUserAttributes((err, results) => {
      if (err) {
        const errorMsg = err.message || JSON.stringify(err);
        console.log(errorMsg);
        reject(errorMsg);
        return;
      }
      resolve(results?.[2]?.Value);
    });
  });
}

封装完成后，你可以用两种方式调用：

方式1：async/await（代码更简洁直观） #

// 必须在async标记的函数内使用
async function fetchTargetAttribute() {
  try {
    const targetValue = await getUserAttributesPromise(cognitoUser);
    // 在这里拿到返回值做后续处理
    console.log(targetValue);
  } catch (error) {
    // 捕获并处理错误
    console.error(error);
  }
}

方式2：.then()链式调用 #

getUserAttributesPromise(cognitoUser)
  .then(targetValue => {
    console.log(targetValue);
    // 后续业务逻辑
  })
  .catch(error => {
    console.error(error);
  });

关键说明 #

原回调里的return无法把值传到外部，因为回调是异步执行的，外部代码不会等待它执行完毕。用Promise封装后，通过resolve传递结果、reject抛出错误，外部就能通过异步语法获取到返回值，同时规范处理错误。

内容的提问来源于stack exchange，提问作者devteamatl