Nuxt Axios模块读取状态代码

时间:2018-04-30 13:47:41

标签: axios nuxt.js

我正在调用Rest API,该API返回至少2个成功状态代码。 正常的200 OK和202 Accepted状态代码。 两者都返回正文中的内容。 如果我在邮递员中执行我的电话,我可能会得到像

这样的东西

状态代码:202已接受。使用Body“Queued”或其他一些值 enter image description here enter image description here

状态代码:200 OK。使用Body“ValueOfSomeToken” enter image description here 在我的nuxt应用程序中使用axios进行调用:

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

..有效,但我实际上想获取状态代码(因为202有身体反应的其他值)

我不知道如何阅读状态代码。

我尝试使用(响应,代码)=> ...但代码却没有。

2 个答案:

答案 0 :(得分:2)

您可以从status codes

中的响应对象中提取axios

如果打印响应对象(如下图所示),您可以看到响应对象内的所有对象。其中一个是status object

enter image description here

response.status将为您提供从服务器发送的状态代码

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()方法明确发送任何状态代码,有关详细信息,请参阅this documentation

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

<强>更新

默认情况下,@nuxtjs/axios会在response.data

中返回.then((response))

$axios.onResponse事件可以访问完整的响应对象。

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

在插件目录下创建一个插件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返回给我们的程序。

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

现在,当axios返回res.data时,我们可以访问res.data.status承诺中response对象中的.then((response))

您可以使用response.status

中的this.$axios访问状态
this.$axios.$get("url").then((response) =>{
    console.log("status ",response.status);
}).catch((err) => {
    console.log("res err ",err);
});

答案 1 :(得分:2)

您可以使用$之类的非this.$axios.get()前缀的函数来代替this.$axios.$get(),以获得完整的响应

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

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

source