axios 和响应数据集拆分到多个数组

Question

我正在尝试使用

等 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});
    }

Answer 1

Axios 请求是异步的并且 return 承诺，因此您需要稍微调整您的示例，以便您的函数 return 是一个承诺。

/**
 * @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
       })
}

Answer 2

您可以更新 componentDidMount 函数：

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

axios 和响应数据集拆分到多个数组

Axios and response data set split to multiple arrays

javascript

arrays

response

reactjs

axios