如何将第一个 API 调用的返回值用作第二个 API 调用的参数？

Question

我正在尝试进行异步 API 调用，该调用将返回 adminId。 我想使用返回的值进行第二次 API 调用，该调用返回客户信息。

从下面的代码中，出于测试目的，我将const adminId作为字符串输入，但如果要删除它，如何将values[0].data.user[0].adminId传递给第二个 URL 参数?

import React, { useState, useContext, useEffect } from "react";
import { makeStyles } from "@material-ui/core/styles";
import CssBaseline from "@material-ui/core/CssBaseline";
import AppBar from "@material-ui/core/AppBar";
import Toolbar from "@material-ui/core/Toolbar";
import Typography from "@material-ui/core/Typography";
import IconButton from "@material-ui/core/IconButton";
// import Badge from "@material-ui/core/Badge";
import AccountCircleIcon from "@material-ui/icons/AccountCircle";
// import NotificationsIcon from "@material-ui/icons/Notifications";
import ToggleMenu from "./ToggleMenu";
import axios from "axios";
import AuthApi from "../utils/createContext";
import TablePage from "../components/TablePage";
import FormDialog from "./FormDialog";
import moment from "moment";

const m = moment();
const today = m.format("LL");

const useStyles = makeStyles((theme) => ({
  root: {
    display: "flex",
  },
  toolbar: {
    paddingRight: 24, // keep right padding when drawer closed
  },
  title: {
    flexGrow: 1,
  },
  appBarSpacer: theme.mixins.toolbar,
  content: {
    flexGrow: 1,
    height: "100vh",
    overflow: "auto",
  },
}));

export default function Dashboard() {
  const classes = useStyles();

  const { value } = useContext(AuthApi);

  const [userData, setUserData] = useState({});


  const readData = async () => {
    const adminId = "b581828d-cb7a-483e-9d21-81cbab1606ef";
    const fetchUserInfo = await axios.post(`/auth/getemail/${value}`);
    const fetchCustomerInfo = await axios.post(
      `/customerinfo/getcustomer/${adminId}`
    );

    Promise.all([fetchUserInfo, fetchCustomerInfo])
      // .then((values) => {
      //   return Promise.all(values);
      // })
      .then((values) => {
        console.log(values[0].data.user[0].adminId);
      });
  };

  useEffect(() => {
    readData();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);


return (
    <div className={classes.root}>
      <CssBaseline />
      <AppBar position="absolute">
        <Toolbar className={classes.toolbar}>
          <Typography
            component="h1"
            variant="h6"
            color="inherit"
            noWrap
            className={classes.title}
          >
            Dashboard {today}
          </Typography>
          <AccountCircleIcon />
          <Typography color="inherit" noWrap align="right">
            {userData.email}
          </Typography>
          <IconButton color="inherit">
            {/* <Badge badgeContent={4} color="secondary">
              <NotificationsIcon />]]]]]'''''
            </Badge> */}
          </IconButton>
          <ToggleMenu />
        </Toolbar>
      </AppBar>
      <main className={classes.content}>
        <div className={classes.appBarSpacer} />
        {/* <FormDialog adminId={adminId} /> */}
        <TablePage />
      </main>
    </div>
  );
}

Answer 1

就像这样：

const fetchUserInfo = await axios.post(`/auth/getemail/${value}`);

const fetchCustomerInfo = await axios.post(
    `/customerinfo/getcustomer/${fetchUserInfo.data.user[0].adminId}`
);

当您使用async await时，不需要Promise.all您正在同步进行 API 调用。

Answer 2

你可以简单地这样做，如果你得到 adminId 比只有第二个 api 会调用并且你正在使用 await 所以，删除 promises.all()。

const fetchUserInfo = await axios.post(`/auth/getemail/${value}`);

let adminId = fetchUserInfo.data.user[0].adminId && fetchUserInfo.data.user[0].adminId;
if (adminId) {
    const fetchCustomerInfo = await axios.post(
        `/customerinfo/getcustomer/${adminId}`
    )
}