CODEWITHSUNDEEP
axiosnuxt.js
CodeHacker
CodeHacker

Reputation: 2138

Nuxt Axios Module read status code

I'm calling a Rest API that returns at least 2 success status codes . A normal 200 OK and a 202 Accepted status code. Both return a Content in the body. If I execute in postman my calls I might get something like

Status code: 202 Accepted. With Body "Queued" or some other values enter image description here enter image description here or

Status code: 200 OK. With Body "ValueOfSomeToken" enter image description here Making the call with axios in my nuxt app: 

this.$axios.$get('/Controller/?id=1')
  .then((response)=>{
     if(response=='Queued'){
         //Do something
     }
     else if (response=='Expired'){
       //Do something
     }
     else{
       //Do something
     }
  })
  .catch((error)=>{
            console.log(error);
  });

..works, but I actually would like to get the status code (because 202 has other values for the body responses)

I have no idea how to read the status codes.

I tried using (response,code) =>... but code is then nothing.

Upvotes: 4

Views: 7050

Answers (2)

Seybsen
Seybsen

Reputation: 15587

You can use non $-prefixed functions like this.$axios.get() instead of this.$axios.$get() to get the full response

// Normal usage with axios
let { data } = await $axios.get('...'));

// Fetch Style
let data = await $axios.$get('...');

(source)

Upvotes: 13

divine
divine

Reputation: 4912

You can extract the status codes from the response object in axios

if you print the response object (as shown in below image) you can see the all the objects inside the response object. One among them is status object

enter image description here

response.status will give you the status code that is sent from the server

axios.get("http://localhost:3000/testing").then((response)=>{
    console.log("response ",response);
    if(response.status == 200){
        //do something
    }
    else if(response.status == 202){
        //do something
    }
    else if(response.status == 301){
        //do something
    }
}).catch((err)=>{
    console.log("err11 ",err);
})

In the server side, you can explicitly send any status code using res.status() method, for more details refer this documentation 

app.get('/testing',(req, res)=> {
  res.status(202).send({"res" : "hi"});
});

Update:

By default, @nuxtjs/axios returns response.data in the .then((response))

The $axios.onResponse event will have access to the complete response object.

You need to setup an interceptor to intercept the $axios.onResponse event and modify the response object

Under plugin directory create a plugin, plugin/axios.js

Update the plugins section plugins : ['~/plugins/axios'] in nuxt.config.js 

export default function ({ $axios, redirect }) {
    $axios.onResponse(res=>{
        console.log("onResponse ", res);
        res.data.status = res.status;        
        return res;
    })
}

In the res object in this interceptor you will have the all the values (as it is shown in my first screenshot). But this res object is not returned as it is, only res.data is returned to our program.

We can update contents inside res.data and then return the res object as shown in my program res.data.status = res.status; .

Now when axios returns res.data we will have access to res.data.status value in response object in the .then((response)) promise

You can access the status using response.status inside this.$axios

this.$axios.$get("url").then((response) =>{
    console.log("status ",response.status);
}).catch((err) => {
    console.log("res err ",err);
});

Upvotes: 6

Related Questions