1

问题

  • 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 => {
      // ...
    })
    // ...

拳头巴掌
120 声望0 粉丝

引用和评论

0 条评论