Nuxt Axios Module 读取状态码

Posted 2023-02-22

【中文标题】Nuxt Axios Module 读取状态码

【英文标题】：Nuxt Axios Module read status code

【发布时间】：2018-10-10 15:08:33

【问题描述】：

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

状态代码：202 已接受。使用正文“排队”或其他一些值 或

状态码：200 正常。带有正文“ValueOfSomeToken” 在我的 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 对正文响应有其他值）

我不知道如何读取状态码。

我尝试使用 (response,code) =>... 但是代码什么都不是。

【参考方案1】：

您可以使用非$ 前缀函数，例如this.$axios.get()，而不是this.$axios.$get()，以获得完整响应

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

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

(source)

【参考方案2】：

您可以从axios中的响应对象中提取status codes

如果您打印响应对象（如下图所示），您可以看到响应对象内的所有对象。其中之一是status object

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 在.then((response)) 中返回response.data

$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 时，我们将可以访问response 承诺中response 对象中的res.data.status 值

您可以在this.$axios 中使用response.status 访问状态

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

【讨论】：

感谢您的回答。但正如我所说，我想使用 NUXT.js axios 模块..而不是 axios 作为单独的包。我知道使用 axios 它可以工作。我想知道为什么它不适用于 axios nuxt 模块。即使你有邮递员，我也看到发回的正确状态。我的回复只有字符串......没有数据对象或状态/状态文本

@CodeHacker 我已经用@nuxtjs/axios 模块的详细信息更新了答案。让我知道它是否有帮助

这就是我正在寻找的答案。效果很好！

@divine 感谢您的详细解释，但是我无法使用任何事件处理程序（onError、onResponse ...）。我总是收到$axios.onResponse is not a function 错误。知道这是为什么吗？

@Anonymous 可能是它的配置问题。你能在github上分享你的代码吗？