如何在全局范围内将 axios/axios 拦截器附加到 Nuxt？

Question

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

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

谢谢

Answer 1

创建一个新模块，例如命名为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()

不过我不建议这样做。

Answer 2

您可以创建一个名为 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 3

也许会对某人有所帮助。它只是为每个请求设置 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'
    ]
};

Answer 4

它隐藏在文档中 - 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',
    ],

    //....
};

如何在全局范围内将 axios/axios 拦截器附加到 Nuxt？

How to attach axios / axios interceptor to Nuxt globally ?

vue.js

axios

nuxt.js