Question

我如何将axios / axios拦截器全局附加到nuxt（因此它可以在任何地方使用），同样如何连接i18n？

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

由于

Answer 1

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

    //....
};

Answer 2

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

  function renderElements() {
      if (this.legend) {
       this.legend.destroy();
      }
      //distance between 2 elements
      let itemDistance = this.legend.options.itemDistance;
      //the biggest element
      let maxItemWidth = this.legend.maxItemWidth;
      //make the width of the legend in the size of 2 largest elements + 
      //distance  
      let nextLegendWidth = (maxItemWidth * 2) + itemDistance;
      //container width
      let boxWidth = this.plotBox.width;
      //if the length of the 2 largest elements + the distance between them 
      //is less than the width of           container, we make 1 row, else 
      //set legend width 2 max elements + distance between
    if (boxWidth < nextLegendWidth) {
     this.legend.options.width = maxItemWidth;
    } else {
     this.legend.options.width = nextLegendWidth;
  }

  this.render()   
}

chart: {
    events: {
      load: renderElements,
      redraw: renderElements
  }
}

然后在nuxt.config.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);

仅此而已，您的拦截器现在可以在全球范围内工作

Answer 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 protype

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

我建议不要这样做。

Answer 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'
    ]
};

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

4 个答案: