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

【问题标题】：How to attach axios / axios interceptor to Nuxt globally ?如何将 axios/axios 拦截器全局附加到 Nuxt？
【发布时间】：2018-11-06 03:35:14
【问题描述】：

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

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

谢谢

【问题讨论】：

标签： vue.js axios nuxt.js

【解决方案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',
    ],

    //....
};

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

【讨论】：

有没有办法从这个插件访问状态？
是的，您可以导入商店并使用它import store from '@/store/index'; store.getters['user/name']; 在商店中您必须导出getter、动作等export const getters = { name: (state, getters) => {...} }

【解决方案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',
    ],

    //....
};

【讨论】：

为什么是插件？为什么不用中间件

【解决方案3】：

创建一个新模块，例如将其命名为 request.js。

import axios from 'axios'
const instance = axios.create({
  baseURL: 'http://example.org' // if you have one
})

// Put all interceptors on this instance
instance.interceptors.response.use(r => r)

export default instance

然后只需在需要时导入该实例并像使用普通 axios 实例一样使用它：

import request from './request'

await request.get('/endpoint')
// or use promises
request.get('/endpoint').then(data => data)

如果您确实需要全局，您可以在应用程序的入口点中使用以下代码：

import request from './request'
global.request = request
// use it:
await request.get('example.org')

或者你可以将它添加到 vue 原型中

Vue.prototype.$request = request
// in your component:
this.$request.get()

我建议不要这样做。

【讨论】：

id 仍然需要在每个组件中导入请求模块...有没有办法将它附加到全局 nuxt 对象？
@rvsted 是的，你可以，我已经相应地更新了我的答案，但我不建议这样做，因为模块导入更干净。如果需要，您还可以通过将其添加到原型中来将其附加到 vue 实例。

【解决方案4】：

也许会对某人有所帮助。它只是为每个请求设置 lang 参数。

创建一个名为 axios (/plugins/axios.js) 的插件。把它放在那里：

export default function ({ $axios, app, redirect }) {
  $axios.onRequest(config => {
    config.params = config.params || {}; // get existing parameters
    config.params['lang'] = app.i18n.locale;
  })

  $axios.onError(error => {
    const code = parseInt(error.response && error.response.status)
    if (code === 400) {
      redirect('/400')
    }
  })
}

在 nuxt.config.js 中添加：

module.exports = {
    plugins: [
      '~/plugins/axios'
    ]
};

【讨论】：