When response.data is an empty array:- Uncaught (in promise) TypeError: Cannot read property 'data' of undefined

0
votes

I am facing difficulty when I am using one axios request in another. Especially when the response.data array is empty. Whenever response.data array is empty it gives me this error:-

Uncaught (in promise) TypeError: Cannot read property 'data' of undefined

I know many people have asked Uncaught but not with response.data Here is my code:-

axios.get(URL+'/xyz?variable='+variablevalue, headerconfig)
    .then(response => {
     this.tempvariable= (response.data);
    axios.get(URL+'/abc?variable='+variablevalue,headerconfig)
        .then((response) => {
          this.tempvariable = (response.data);
          //inside for loop by using this.tempvariable
          this.some_variable= this.anothervari.reduce((a,b) => Number(a) > Number(b) ? a : b);
        })
        .catch(e => {
            alert(e.response.data);
        })       

    })
    .catch(e => {
        alert(e.response.data);
    })
3
javascriptvue.jsaxios
What do you get on console.log(response)? – Ankit Agarwal
Do you know which line this error is being thrown from? – gillyhl
I think the problem is that you are using same variable (response) on both requests. – Salman Ullah Khan
You should take a look at the response, do you find the data in it? – aircraft
in console.log(response), I got this{data: Array(0), status: 200, statusText: "OK", headers: {…}, config: {…}, …} – JustStartedProgramming

3 Answers

1
votes

Error has come from the line this.some_variable= this.anothervari.reduce((a,b) => Number(a) > Number(b) ? a : b); that was missing in the original question.

You need to give the reduce function a starting value when reducing to an array, so change to this: this.some_variable= this.anothervari.reduce((a,b) => Number(a) > Number(b) ? a : b, []);

0
votes

The error could have happened during the request setup before any response was returned in which case the response object is undefined https://github.com/axios/axios#handling-errors

-1
votes

In case axios receives no response from the server, the error object has no response object. If you look at the example documentation here, you can see that while catching the error, they check if the response object exists or not. In your case, your request probably fails without never reaching the server so you don't have a response. In cases like this it is recommended to see if the response object exists before accessing it, as otherwise you will have an exception.

    axios.get('/user/12345')
    .catch(function (error) {
    if (error.response) {
      // The request was made and the server responded with a status code
      // that falls out of the range of 2xx
      console.log(error.response.data);
      console.log(error.response.status);
      console.log(error.response.headers);
    } else if (error.request) {
      // The request was made but no response was received
      // `error.request` is an instance of XMLHttpRequest in the browser and an instance of
      // http.ClientRequest in node.js
      console.log(error.request);
    } else {
      // Something happened in setting up the request that triggered an Error
      console.log('Error', error.message);
    }
    console.log(error.config);
  });