反應 - 將 api 調用結果返回到原始 function

Question

我正在我的應用程序中創建一個用戶管理頁面，其中針對用戶池組的用戶列表被合並然后呈現。 我正在使用 AWS cognito 來托管用戶和組。

我正在嘗試遵循代碼編寫一次的最佳實踐原則，因此我為 AWS api 調用創建了一個單獨的文件。

我無法將響應返回到原始 function。

這是容器 function 文件：

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，而不是回調，但我沒有經驗來正確處理它。

我假設我需要更改容器 function 以等待 api 調用完成。

如何將結果 object 返回到 apiUsers 變量？

Answer 1

將您的代碼包裝在 ListUsers() function 中的 promise 中，用於 api 調用文件，並且基本上傳遞您想要返回的值以解決回調，如果您收到一些錯誤，則可以拒絕，
以下是您更新的代碼。

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 在容器 function 文件中標記為異步的 function 中調用它。