Nuxt Axios模块读取状态码 [英] Nuxt Axios Module read status code

问题描述

我正在调用Rest API，该API至少返回2个成功状态代码. 正常的200 OK和202接受的状态代码. 两者都在正文中返回内容. 如果我用邮递员执行电话，我可能会收到类似

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

状态码:202已接受.使用排队"正文或其他一些值 或

Status code: 202 Accepted. With Body "Queued" or some other values or

状态码:200 OK.与正文"ValueOfSomeToken" 在我的nuxt应用程序中使用axios拨打电话:

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，但是我实际上想获取状态代码(因为202的身体响应具有其他值)

..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.

我尝试使用(response，code)=> ...，但是代码什么都没有.

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

推荐答案

您可以从axios

如果打印响应对象(如下图所示)，则可以看到响应对象内的所有对象.其中之一是status object

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将为您提供从服务器发送的状态代码

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

在服务器端，您可以使用res.status()方法显式发送任何状态代码，有关更多详细信息，请参考

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

更新:

默认情况下，@nuxtjs/axios在.then((response))

$axios.onResponse事件将有权访问完整的响应对象.

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

您需要设置一个拦截器来拦截$axios.onResponse事件并修改响应对象

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

在插件目录下创建一个插件，plugin/axios.js

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

更新plugins部分plugins : ['~/plugins/axios'] 在nuxt.config.js

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

在此拦截器的res object中，您将具有所有值(如我的第一个屏幕截图所示).但是不会按原样返回此res object，仅将res.data返回到我们的程序.

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.

我们可以更新res.data中的内容，然后返回res object，如我的程序res.data.status = res.status;所示.

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

现在，当axios返回res.data时，我们将可以访问.then((response))承诺

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

您可以使用this.$axios

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

这篇关于Nuxt Axios模块读取状态码的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！