分享一个使用axios全球标准nuxtjs的方法？

Question

我想将它用于所有组件和页面以及我的配置：

~/plugins/axios

import axios from 'axios'

export default axios.create({
  baseURL: 'http://127.0.0.1:3001/'
})

但是通过这种方式，我必须在组件和页面中import axios from '~/plugins/axios' 我想使用这样的选择：

this.$axios.post('url',data).then(res=>{
// do something in here 
}).catch({
// do something in here 
})

不需要导入更多的axios

Answer 1

我建议你使用 Nuxt.js 的官方“Axios 模块”：https://github.com/nuxt-community/axios-module

npm install @nuxtjs/axios

首先，您可以在nuxt.config.js 或环境变量中设置您的baseURL（请参阅https://axios.nuxtjs.org/options）：

modules: [
  '@nuxtjs/axios'
],
axios: {
  baseURL: 'http://127.0.0.1:3001/' // or, Environment variable API_URL_BROWSER can be used to override browserBaseURL.
}

然后在<page>.vue 中，不再导入，将axios 注入到app var 中（见https://axios.nuxtjs.org/usage）：

<script>
export default {
 asyncData ({ app }) {
   app.$axios.$get(`/api/users`).then(
      // do something in here 
    );
    //...
  }
}
</script>

最后，您可以使用自定义插件全局处理错误（请参阅https://axios.nuxtjs.org/extend）

$axios.onError(error => {
  // do something in here 
})