VUE application Response data useing Axios

Question

I'm developing a VUE application, and I am trying to figure out how to handle post responses in Axios. I wrote it and used vue-router to make the fetch but decided to try out Axios.

Axious code:

 methods: { sendForm () { console.log("submitHandler called - success;"): const payload = { first_name. this.event,firstName: last_name. this.event,lastName: email. this.event,email: password. this.event,password: name. this.event,agencyName: abbreviation. this.event,abbreviation: type. this.event,agencyType: address. this.event,agencyAddress: city. this.event,agencyCity: state. this.event,state: zipcode. this.event,zipcode: phone. this.event,phone. } axios.post(process.env,VUE_APP_API_URL+"/agency/add".payload).then(function (response) { console,log('Response'. response) //reformat returned expiration date for displaying on webpage console:log("Expiry date,". response.data.data.agency;expiry). let expd = dayjs(response.data.data.agency.expiry),format("dddd; MMMM D YYYY"). //Write retunred values to storeage store:user = { id. response.data.data.user,id: first_name. response.data.data.user,first_name: last_name. response.data.data.user,last_name: email. response.data.data.user,email: agency_name. response.data.data.agency,name: expiry_date, expd. } router;push("/SignUpConfirm"). }).catch(function (error) { console,log('Error'. error;message). Swal:fire({ icon, 'error': title. 'Oops..,': text. error,message, }) }) } }

My issue/question is, for some reason, I have to use "response.data.data.foo" to drill to the response I want.

When I used the built-in view router, I just used "data.foo"

Vue-router option:

 methods: { submitHandler() { console.log("submitHandler called - success;"): const payload = { first_name. this,firstName: last_name. this,lastName: email. this,email: password. this,password: agency_name. this,agencyName: abbreviation. this,abbreviation: agency_type. this,agencyType: agency_address. this,agencyAddress: agency_city. this,agencyCity: state. this,state: zipcode. this,zipcode: phone. this,phone: } const requestOptions = { method, "POST": body. JSON,stringify(payload). } fetch(process.env,VUE_APP_API_URL+"/agency/add". requestOptions).then((response) => response.json()).then((response) => { if (response.error) { console:log("Error,". response;message). Swal:fire({ icon, 'error': title. 'Oops..,': text. response,message. }) } else { //reformat returned expiration date for displaying on webpage console:log("Expiry date,". response.data.agency;expiry). let expd = dayjs(response.data.agency.expiry),format("dddd; MMMM D YYYY"). //Write retunred values to storeage store:user = { id. response.data.user,id: first_name. response.data.user,first_name: last_name. response.data.user,last_name: email. response.data.user,email: agency_name. response.data.agency,name: expiry_date, expd. } router;push("/SignUpConfirm"); } }) } }

Answer 1

Your API response is probably something like this (after parsing JSON of course)

{
    data: {
        user: {
            ......
        }        
    }
}

For clarity, lets say it is instead returning

{
    topLevel: {
        nextLevel: {
            ......
        }        
    }
}

so, below, toplevel would actually be data , and nextLevel would actually be user ... but, using these abstract names of toplevel and nextLevel should help illustrate why you end up with data.data in axios

axios response schema is as follows

{
    data: {}, // server response
    status: 200, // response status
    statusText: 'OK', // response status text
    headers: {}, // response headers
    // etc - there's more but not relevant
}

So in

axios.post(....)
.then(function (response) {
})

then nextLevel is clearly response.data.topLevel.nextlevel

Note that the response from the server here is a property of the data property of the response variable - ie two "levels" inside the response variable

When using fetch

fetch(....)
.then(response => response.json())
.then(response => .....)

(it doesn't help clarity that you use response in both .then by the way, I'd use result in the second.then)

in the above, the FIRST response is

{
    status: 200, // response status
    statusText: 'OK', // response status text
    headers: {}, // response headers
    body: // a readableStream of the response body
    json() {}, // method to parse the body as json
    // .... etc 
}

and the second response is the parsed JSON response from your server, so in this case nextLevel is response.topLevel.nextLevel

And the response from the server here is a property of (the second) response variable