javascript - React - 将api调用结果返回给原始函数

Question

我正在我的应用程序中创建一个用户管理页面，其中针对用户池组的用户列表被合并然后呈现。我正在使用 AWS cognito 来托管用户和组。
我正在尝试遵循代码编写一次的最佳实践原则，因此我为 AWS api 调用创建了一个单独的文件。
我无法将响应返回到原始函数。
这是容器函数文件:

import ListUsers from "../../../API/cognito/ListUsers";
import { useState, useEffect } from "react";

export default function ManageUsers() {
  let groups = ["admin", "ntig-exec", "tlo-officers", "tlo-users"];

  const [users, setUsers] = useState();
  //const apiUsers = useRef();

  useEffect(() => {
    async function getUsers() {
      let apiUsers = await ListUsers();
      console.log("apiUsers: ", apiUsers);
      setUsers(apiUsers);
    }
    getUsers();
  }, []);

  return (
      <h2>demo page</h2>
  );
}

这是api调用文件

import AWS from "aws-sdk";
import { useState, useEffect } from "react";
import awsmobile from "../../aws-exports";
import { Auth } from "aws-amplify";
import { onError } from "../../libs/userFeedback/errorLib";
import { useAuthContext } from "../../libs/context/authenticatedLib";

export default async function ListUsers() {
  let idToken = "";
  await Auth.currentAuthenticatedUser().then((user) => {
    idToken = user.signInUserSession.idToken.getJwtToken();
  });

  AWS.config.region = awsmobile.aws_cognito_region;
  AWS.config.credentials = new AWS.CognitoIdentityCredentials({
    IdentityPoolId: awsmobile.aws_cognito_identity_pool_id,
    RoleArn: myarn,
    Logins: { mylogin: idToken }
  });

  let cognitoidentityserviceprovider = new AWS.CognitoIdentityServiceProvider();
  let params = {
    UserPoolId: awsmobile.aws_user_pools_id
  };

  cognitoidentityserviceprovider.listUsers(params, function (err, result) {
    if (err) {
      console.log(err);
      onError(err);
      return;
    }
    if (result) {
      console.log("result", result);
      return result;
    }
  });
}

这是控制台日志:

apiUsers:  undefined
result Object { Users: (6) […] }

我已经尝试过几种方式重写代码，包括尝试使 api 调用成为一个 promise ，而不是回调，但我没有经验来让它正确。
我假设我需要在容器函数中进行更改以等待 api 调用完成。
如何让结果对象返回给 apiUsers 变量？

Answer 1

将您的代码包装在 API 调用文件的 ListUsers() 函数中的 Promise 中，并基本上传递您想要返回的值以解决回调，如果您遇到一些错误，您可以在拒绝回调中传递该错误。
以下是您更新的代码。

import awsmobile from "../../aws-exports";
import { Auth } from "aws-amplify";
import { onError } from "../../libs/userFeedback/errorLib";
import { useAuthContext } from "../../libs/context/authenticatedLib";

export default async function ListUsers() {
    return new Promise((resolve, reject) => {
        let idToken = "";
        await Auth.currentAuthenticatedUser().then((user) => {
            idToken = user.signInUserSession.idToken.getJwtToken();
        });

        AWS.config.region = awsmobile.aws_cognito_region;
        AWS.config.credentials = new AWS.CognitoIdentityCredentials({
            IdentityPoolId: awsmobile.aws_cognito_identity_pool_id,
            RoleArn: myarn,
            Logins: { mylogin: idToken }
        });

        let cognitoidentityserviceprovider = new AWS.CognitoIdentityServiceProvider();
        let params = {
            UserPoolId: awsmobile.aws_user_pools_id
        };

        cognitoidentityserviceprovider.listUsers(params, function (err, result) {
            if (err) {
                console.log(err);
                //onError(err);
                reject(err);
                return;
            }
            if (result) {
                console.log("result", result);
                // return result;
                resolve(result);
            }
        });
    });
}

并且由于 ListUsers() 正在返回 promise ，因此您已经正确地使用 await 在容器函数文件中标记为 async 的函数中调用它。