带有axios助手的Axios拦截器

Question

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

它们各自按预期工作，但由于某种原因，两者一起将始终仅调用帮助程序，这意味着将仅显示第三个console.log。但是该帮助程序仅用于错误，没有一个请求失败。那么，这是什么原因以及为什么不显示第一或第二console.log的原因。

Answer 1

您可以使用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);
});

Answer 2

在$ 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模块。