Nuxt.js中axios配置以及api接口统一管理

此篇文章基于Nuxt.js version:2.15.8，建议使用Nuxt.js内置的axios，nuxtjs/axios(https://axios.nuxtjs.org/)
原文链接：https://www.aerowang.cn/articles/3lwhaw2l

本篇文章记录Nuxt.js项目开发时一些关于axios的配置，另外提及的就是统一管理一下api接口。

如果有什么不足之处或是意见建议，欢迎各位大佬交流~

使用cross-env设置环境变量

一般项目开发、测试以及上线，会有不同的环境配置，最常见的也就是接口的基准地址BASE_URL。不同环境的 api 请求基准地址并不一样，每次手动修改axios的baseURL都略显麻烦。在我看到的一些的vue项目中，通常会为不同的环境建立不同的.env文件，比如.env.development，然后在里面配置基础路径变量，如 VUE_APP_BASE_API = https://xxx.com/。

不过在nuxt.js项目中（nuxt versions > 2.12+），官方推荐使用Runtime config properties（运行时配置属性），其中包括publicRuntimeOptions 和 privateRuntimeOptions。

1.安装cross-env

yarn add cross-env -D
# 或者
npm install --save-dev cross-env

2.使用

在 package.json 的 scripts 中设置环境变量，格式就是先写个 cross-env，接着配置环境变量，可以写多个，最后写上原本的命令，例如：

 "scripts": {
    "dev": "cross-env BASE_URL=http://localhost:8090 BROWSER_BASE_URL=http://localhost:8090 nuxt",
    "build": "nuxt build",
    "start": "cross-env BASE_URL=http://localhost:8090 BROWSER_BASE_URL=https://abcd.com nuxt start"
  }

这样一来，在执行不同命令的同时，项目中获取到的BASE_URL也不相同。

注意：BROWSER_BASE_URL是 @nuxtjs/axios 在 nuxt.config.js 中才有的配置属性。

与此相关的nuxt.config.js配置

export default {  
  // Axios module configuration: https://go.nuxtjs.dev/config-axios
  axios: {
    retry: false // 默认值，自动拦截失败的请求并在可能的情况下重试它们3次
  },
  env: {
    baseUrl: process.env.BASE_URL || 'http://localhost:8090'
  },
  // 客户端相关
  publicRuntimeConfig: {
    axios: {
      browserBaseURL: process.env.BROWSER_BASE_URL // 浏览器请求
    }
  },
  // 服务端
  privateRuntimeConfig: {
    axios: {
      baseURL: process.env.BASE_URL // 服务器请求
    }
  }
}

这里即可以通过process.env获取通过 cross-env 设置的环境变量。

这里是可以在publicRuntimeOptions 和 privateRuntimeOptions中设置 baseURL 的，详情请见 https://axios.nuxtjs.org/options#runtime-config

  env: {
    baseUrl: process.env.BASE_URL || 'http://localhost:8090'
  },

此处配置也很好理解，如果当前环境变量配置中含有 BASE_URL，则当前 process.env.BASE_URL 即为设置的变量值，否则为默认值 'http://localhost:8090'

  // 客户端相关
  publicRuntimeConfig: {
    axios: {
      browserBaseURL: process.env.BROWSER_BASE_URL // 浏览器请求
    }
  },
  // 服务端
  privateRuntimeConfig: {
    axios: {
      baseURL: process.env.BASE_URL // 服务器请求
    }
  }

在进行同构的时候，privateRuntimeConfig配置中的baseURL只有在服务器端请求才会生效，而browserBaseURL则是客户端请求的时候的baseURL地址。

例如，服务器中API服务器监听了8090端口，因此在服务器端，nuxt.js程序通过'http://127.0.0.1:8090'请求API，而客户端则通过https://域名请求API。

这样一来，服务端渲染时，请求数据的地址为本地内网，客户端请求为外网地址，如果不这样设置，可能导致内网也通过外网域名进行API请求，会导致CDN流量增加（如果使用CDN的话）。

api接口统一管理

在项目根目录下新建一个api文件夹，存放各类接口模块，例如article.js：

export default $axios => ({
  getArticleList () {
    return $axios.$get('/api/posts')
  },
  // 其它接口
})

其它接口模块亦如此。

其次在plugins目录下新建 api.js ，并在 $root 和上下文中注入，详情例子见 https://nuxtjs.org/docs/directory-structure/plugins#inject-in-root–context

import articleModule from '../api/article'
export default function ({ $axios }, inject) {
  const apiModules = {}
  $axios.onRequest((config) => {
  	// 相关配置
  })
  apiModules.article = articleModule($axios)
  // Inject to context as $api
  inject('api', apiModules)
}

最后不要忘记在nuxt.config.js中引入该插件：

export default {
  // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
  plugins: [
    './plugins/api'
  ],
  // 其它配置
}

使用示例

asyncData中：

  async asyncData ({ $api }) {
    const { data: articleList } = await $api.article.getArticleList()
    return { articleList }
  },

methods中：

    getArticleList () {
      this.$api.article.getArticleList().then((res) => {
        console.log(res)
      })
    }