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 or

Status code: 200 OK. With Body "ValueOfSomeToken" 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.

回答1:

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

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

回答2:

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)

来源：https://stackoverflow.com/questions/50101903/nuxt-axios-module-read-status-code

标签

axios

nuxt.js