axios 和响应数据集拆分为多个数组答案

【问题标题】：Axios and response data set split to multiple arraysaxios 和响应数据集拆分为多个数组
【发布时间】：2020-02-13 16:04:36
【问题描述】：

我正在尝试使用 axios 命令从 API 获取数据，例如

function fetchData(apiURL){
    let data = [];
    let options = {
        method: "GET",
        url: apiURL,
        headers: {
            "Access-Control-Allow-Origin": "*"
        },
        credentials: "include"
    };

    axios(options)
        .then(response => {
            data = response.data;
            console.log(data);
        })
        .catch(function (error) {
            console.log("System error : " + error);
        });

    return data;
}

但这将产生数组集，这些数组将存储来自response.data 的 JSON 数组，每个数组集的计数为 100。

我没有遇到使用fetch() 检索所有数据的问题。我怎样才能得到一个大型 JSON 对象数组而不是拆分的类似响应？

PS。我已经在

中触发了该功能

 componentDidMount() {
        const apiURL = process.env.REACT_APP_API;
        let tableData = fetchData(apiURL);
        console.log("DATA " + JSON.stringify(tableData));
        this.setState({tblData : tableData});
    }

【问题讨论】：

标签： javascript arrays reactjs axios response

【解决方案1】：

Axios 请求是异步的并返回 Promise，因此您需要稍微调整您的示例，以便您的函数返回 Promise。

/**
 * @return {Promise<T>}
 */
function fetchData(apiURL){
    const options = {
        method: "GET",
        url: apiURL,
        headers: {
            "Access-Control-Allow-Origin": "*"
        },
        credentials: "include"
    };

    return axios(options)
        .then(response => {
            return response.data;
        })
 }

现在，当您使用此 API 时，请异步执行此操作。

function somethingThatUpdatesThatUI() {
    fetchData("/api/foo/bar")
       .then((data) => {
           //perform updates to UI or state here
       })
       .catch((err) => {
           //alert the users that an error has happened here
       })
}

【讨论】：

看起来很有希望，但我需要从 React componentDidMount() 触发它。在我在那里打电话给fetchData 之前。我已经更新了 OP

【解决方案2】：

你可以更新componentDidMount函数：

componentDidMount() { 
  const apiURL = process.env.REACT_APP_API; 
  fetchData(apiURL).then(data => { 
    console.log(data ${JSON.stringify(tableData)}) 
    this.setState({tblData : data});
  }) 
}

【讨论】：

是的，这正是我根据罗伯特的回答所做的。另一方面，从componentDidMount 或componentWillMount 这样做更好吗？我试图在检索数据之前尽可能减少显示空表。