项目实战-Api的解决方案

问题

• vue-cli3 下环境变量切换问题
  调用远程api时候，希望本地开发使用内网IP地址（开发人员本地版本），部署后使用部署版本
• 封装 axios
• api 管理

解决方案

• 环境变量切换
  在 vue-cli3 中，环境变量是通过 '.env.XXX' 的隐藏文件来配置的，可在 环境变量和模式 中找到解决方案。
  所以就直接项目情况，建立了两个文件:

  • .env

    # 所有环境
    # 网络请求公用地址
    VUE_APP_API=

  • .env.development

    # 开发环境
    # 网络请求公用地址
    VUE_APP_API=http://api.youproject.com/

• 封装 axios
  对axios进行封装，包括基础设置，错误处理，跨域请求的基础设置

  // @/plugin/axios
  import axios from 'axios'
  import router from '@/router'
  import { Toast } from 'vant'
  
  // 创建一个 axios 实例
  const service = axios.create({
    baseURL: process.env.VUE_APP_API,
    timeout: process.env.NODE_ENV === 'development' ? 120000 : 30000 // 请求超时时间 30s
  })
  
  service.defaults.headers.get['Content-Type'] = 'application/json'
  service.defaults.headers.put['Content-Type'] = 'application/json'
  service.defaults.headers.post['Content-Type'] = 'application/json'
  service.defaults.headers.delete['Content-Type'] = 'application/json'
  
  // 响应拦截器
  service.interceptors.response.use(
    function (response) {
      /* 
        返回的数据约定
        {
          code: 0, // 99 token 无效
          message: "",
          success: true,
          data: {} // 返回的数据
        }
      */
      // dataAxios 是 axios 返回数据中的 data
      const dataAxios = response.data
      // 这个状态码是和后端约定的
      const { code, success, message } = dataAxios
      // 根据 code 进行判断
      if (code === undefined) {
        // 直接返回数据的情况
        return dataAxios
      } else if (!code) {
        if (success) {
          if (dataAxios.data === null || dataAxios.data === undefined) {
            return true
          } else {
            return dataAxios.data
          }
        } else {
          Toast.fail(message)
          return null
        }
      } else {
        // 有 code 代表这是一个后端接口 可以进行进一步的判断
        switch (code) {
          case 0:
          case 200:
            // [ 示例 ] code === 0/200 代表没有错误
            return dataAxios.data
          case 99:
            Toast.fail('token无效，请重新登录')
            router.replace({
              name: 'Unauthorized'
            })
            break
          default:
            Toast.fail(`${dataAxios.code} - ${dataAxios.message}`)
        }
      }
    },
    function (error) {
      if (error && error.response) {
        switch (error.response.status) {
          case 400: error.message = '请求错误' break
          case 401: error.message = '授权错误，请登录' break
          case 403: error.message = '拒绝访问' break 
          case 404: error.message = `请求地址出错: ${error.response.config.url}` break 
          case 408: error.message = '请求超时' break 
          case 422: error.message = '验证出错' break 
          case 500: error.message = '服务器内部错误' break 
          case 501: error.message = '服务未实现' break 
          case 502: error.message = '网关错误' break 
          case 503: error.message = '服务不可用' break 
          case 504: error.message = '网关超时' break 
          case 505: error.message = 'HTTP版本不受支持' break
        }
      }
      Toast.clear()
      Toast.fail(error.message)
      return Promise.reject(error)
    }
  )
  
  export default service

• api 管理
  在实际项目中，我期望的是api能放在一个统一的地方进行管理，这样在有大变化的时候不用多个文件去查找修改，在编码的时候也方便很多，代码也会清晰点，实现如下

  // src/api/index.js
  import common from './common'
  // ...
  export default {
    common,
    // ...
  }
  
  // src/api/common.js
  import axios from '@/plugin/axios'
  
  export default {
    getCurrentUserInfo () {
      return axios.get('/api/common/getCurrentUserInfo.json')
    },
  }

  如何使用呢：

  // src/main.js
  import Vue from 'vue'
  import api from './api'
  
  Vue.prototype.$api = api
  
  // src/views/business.vue
  // ...
  this.$api.common.getCurrentUserInfo().then(res => {
    // ...
  })
  // ...