带有 axios 助手的 axios 拦截器答案

【问题标题】：Axios interceptor with axios helper带有 axios 助手的 axios 拦截器
【发布时间】：2020-01-19 09:14:15
【问题描述】：

我正在使用 vuejs、nuxt 和 axios 构建一个应用程序，并且我正在尝试使用 axios 拦截器和 axios 助手制作一个插件，如下所示：

它们各自按预期工作，但由于某种原因，两者一起工作时，总是只会调用帮助程序，这意味着只会显示第三个 console.log。但是助手仅用于错误，并且没有任何请求失败。那么是什么导致了这个以及为什么第一个或第二个 console.log 没有显示。

【问题讨论】：

请将您的代码添加到问题中。
顺便说一句。您还可以为响应设置拦截器。这可能会解决您的问题。
我在那里添加了一张图片，但我不知道是否需要一个响应拦截器。我想我忘了提，但我想验证后端的 POST 和 PUT 请求的数据
您应该始终将代码添加为文本。响应拦截器不正是您想要使用onError 实现的吗？顺便提一句。 onError 不在 axios 的文档中。在此处阅读有关拦截器的信息：github.com/axios/axios#interceptors 还要记住，拦截器总是全局处理请求和响应。因此，如果您的验证因接口而异，则不应在拦截器中全局执行此操作。
这实际上很有帮助，也很有意义，谢谢！

标签： vue.js axios nuxt.js

【解决方案1】：

在$axios上下文中定义axios的拦截器时，可以像“onError”一样定义“request”和“response”拦截器。

// axios plugin

export default function ({$axios}) {
    // request
    $axios.onRequest(config => {
        // ...
    })

    // response
    $axios.onResponse(res => {
        // ...
    })

    // error
    $axios.onError(config => {
        // ...
    })
}

nuxt 模块是一个简化的重新定义的 axios 模块。

【讨论】：

【解决方案2】：

您可以使用 axios 响应拦截器来捕获您的错误。在the documentation 中，您将找到全局捕获 REST 错误所需的一切。

下面是一个使用响应拦截器和请求拦截器以及console.log() 语句的示例：

axios.interceptors.request.use(function (config) {
  console.log(1);
  return config;
}, function (error) {
  console.log(2);
  return Promise.reject(error);
});

axios.interceptors.response.use(function (response) {
  return response;
}, function (error) {
  console.log(3);
  return Promise.reject(error);
});

【讨论】：