如何将 axios / axios 拦截器全局附加到 Nuxt？

Question

我将如何将 axios / axios 拦截器全局附加到 nuxt（因此它随处可用），与 i18n 的附加方式相同？

这个想法是我想要一个全局 axios 拦截器，每个请求都通过该拦截器。

谢谢

Answer 1

你可以创建一个名为 axios 的插件（/plugins/axios.js）

import Vue from 'vue';
import axios from 'axios';

axios.interceptors.request.use((config) => {
  // Do something before request is sent
  return config;
}, function (error) {
  // Do something with request error
  return Promise.reject(error);
});

Vue.use(axios);

然后在 nuxt.config.js 中定义它

module.exports = {
    //....

    plugins: [
      '~/plugins/axios',
    ],

    //....
};

就是这样，你的拦截器现在在全球范围内工作

Answer 2

它隐藏在文档中 - https://nuxtjs.org/docs/2.x/directory-structure/plugins

见第一张照片的数字3：

// plugins/axios.js
export default function ({ $axios, redirect }) {
    $axios.onError(error => {
        if (error.response.status == 404) {
            redirect('/sorry')
        }
    })
}

然后在 nuxt.config.js 中定义它

module.exports = {
    //....

    plugins: [
      '~/plugins/axios',
    ],

    //....
};