Axios and response data set split to multiple arrays

Question

I'm trying to get data from an API using axios command like

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

but that will produce sets of arrays which will store arrays of JSONs from response.data in count of 100 per array set.

I haven't had problem using fetch() to retrieve all data. How I can get similar response of one large array of JSON objects instead of a split?

PS. I have triggered that function in the

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

Robert · Accepted Answer · 2019-10-16 20:31:43Z

1

Axios requests are asynchronous and return promises, so you need to adjust your example a bit so that your function returns a 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;
        })
 }

Now, when you consume this API do so asynchronously.

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

answered Oct 16, 2019 at 20:31

Robert

9911 gold badge15 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

JackTheKnife Over a year ago

Looks promising but I need to get it triggered from React componentDidMount(). Before I was calling fetchData there. I have update OP with that

nthn · Accepted Answer · 2019-10-16 21:20:18Z

1

You can update the componentDidMount function:

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

answered Oct 16, 2019 at 21:20

nthn

1861 silver badge6 bronze badges

1 Comment

JackTheKnife Over a year ago

Yeah, exactly what I have done based on Robert's answer. On another hand is it better to do that from componentDidMount or componentWillMount? I'm trying to minimize as much as possible displaying empty table before retrieving the data.

Collectives™ on Stack Overflow

Axios and response data set split to multiple arrays

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related