在一个反应组件中调用两个 API 调用答案

【问题标题】：Call two API calls in a react component在一个反应组件中调用两个 API 调用
【发布时间】：2021-05-13 06:31:00
【问题描述】：

我有以下组件

import React, { useState, setState, useEffect } from "react";
import ReactTable from "../_components/ReactTable/ReactTable";
import { Container, Row, Col } from "reactstrap";
import GlobalSearch from "../_components/ReactTable/GlobalSearch";
import axios from "axios";
import DefaultColumnFilter from "../_components/ReactTable/DefaultFilter";
import DefaultFilter from "../_components/ReactTable/DefaultFilter";

const HomePage = () => {
    const [data, setData] = useState([]);
    const [filteredData, setFilteredData] = useState([]);
    const columns = React.useMemo(() => [
        { Header: "Reference", accessor: "reference", sortable: true },
        { Header: "Name", accessor: "name", sortable: true }
    ]);

     const getData = async () => {
        const result = await axios.get("api/contact");
         const test = await result.data;
         return test;
     }

    const handleData = async () => {
        const resp = await axios.get("api/city");
        const data = await resp.data.content;
        setData(data);
        setFilteredData(data);
        //setData(data);
    };

    useEffect(() => {
        handleData();
        getData();
    }, []);

    const defaultColumn = React.useMemo(
        () => ({
            // Let's set up our default Filter UI
            Filter: DefaultColumnFilter
        }),
        []
    );
    
    const globalSearch = filteredDataOp => {
        setFilteredData(filteredDataOp);
     };

    return (

        <Container className="App">
             <h2>Contact overview</h2>
               <hr />
            <div >
               <span>Contact Name :  </span>
               <span>Contact Number : </span>
            </div>
            <div className="header-grid">
              <h3>City :</h3>
            </div>
            <GlobalSearch
                data={data}
                filteredData={filteredData}
                handleDataArray={globalSearch}
            />
            <hr />
            <Row>
                <Col md={12} xs={12}>
                    <ReactTable
                        columns={columns}
                        data={filteredData}
                        defaultColumn={defaultColumn}
                        showPagination={true}
                        defaultPageSize={5}
                    />
                </Col>
            </Row>
        </Container>
    );
};

export default HomePage;

我使用函数 handleData() 来显示 react-table 表格，该函数允许通过 axios 检索网格的元素

const handleData = async () => {
        const resp = await axios.get("api/city");
        const data = await resp.data.content;
        setData(data);
        setFilteredData(data);
        };

我想使用函数getData()

const getData = async () => {
        const result = await axios.get("api/contact");
         const test = await result.data;
         return test;
     }

在渲染中显示函数 getData() 的值的解决方案是什么

  <h2>Contact overview</h2>
               <hr />
            <div >
               <span>Contact Name : {...}  </span>
               <span>Contact Number : {...} </span>
            </div>

如果你有想法？

【问题讨论】：

是同步调用还是异步调用？如果您希望两个 api 一起调用，请使用 Promise.all 或 axios.all
@techie_questie 这些是异步函数。
你能不能只为getData的返回值添加另一个状态钩子？
只需使用 await axios.all 包装您的 api 调用。

标签： javascript reactjs axios react-hooks

【解决方案1】：

您可以将 axios.all 或 Promise.all 与 await 一起用于需要并行调用的异步 API。

import axios from 'axios';

const getData = async () => {
  await axios.all([api1, api2]).then(axios.spread((...responses) => {
  const resp1 = responses[0]
  const resp2 = responses[1]
   // use the results 
  })).catch(errors => {
   // errors.
  })
}

【讨论】：

【解决方案2】：

如果你想同时得到两个api的响应，使用Promise.allSettled(promises)

const handleData = async () => {
        const [respCity,respContact] = await 
 Promise.allSettled([axios.get("api/city"),axios.get("api/contact")]);
        const dataCities = await respCity.data.content;
        const dataContacts = await respContact.data.content;
        // you can merge data or do what you want 
        };

【讨论】：