当前位置: 首页 > news >正文

项目实战-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 => {
      // ...
    })
    // ...

相关文章:

  • Angular js 常用指令ng-if、ng-class、ng-option、ng-value、ng-click是如何使用的?
  • 五个举措:现代化Jenkins 和终结“Jenkinsteins”
  • Vue官网教程学习过程中值得记录的一些事情
  • sass安装
  • LGPL与闭源程序
  • 聊聊flink的checkpoint配置
  • 堆的python实现及其应用
  • 创建一种深思熟虑的文化
  • 亚马逊Alexa借助神经网络生成播音员声音
  • 将VCSA 6.5添加到AD域
  • nginx 4层tcp代理获取真实ip
  • 刘鹏教授在新闻出版大数据应用管理技术专题培训班上作报告!
  • Mybatis配置返回为修改影响条数
  • spring源码-aop源码-5.1
  • 洛谷P2805 植物大战僵尸
  • 网络传输文件的问题
  • ES6指北【2】—— 箭头函数
  • “寒冬”下的金三银四跳槽季来了,帮你客观分析一下局面
  • C++11: atomic 头文件
  • chrome扩展demo1-小时钟
  • java B2B2C 源码多租户电子商城系统-Kafka基本使用介绍
  • Netty源码解析1-Buffer
  • Promise面试题2实现异步串行执行
  • python3 使用 asyncio 代替线程
  • redis学习笔记(三):列表、集合、有序集合
  • uva 10370 Above Average
  • 爱情 北京女病人
  • 开源中国专访:Chameleon原理首发,其它跨多端统一框架都是假的?
  • 来,膜拜下android roadmap,强大的执行力
  • 面试总结JavaScript篇
  • 第二十章:异步和文件I/O.(二十三)
  • ​如何在iOS手机上查看应用日志
  • $jQuery 重写Alert样式方法
  • (8)STL算法之替换
  • (bean配置类的注解开发)学习Spring的第十三天
  • (附源码)ssm智慧社区管理系统 毕业设计 101635
  • (每日持续更新)jdk api之FileFilter基础、应用、实战
  • (每日持续更新)信息系统项目管理(第四版)(高级项目管理)考试重点整理 第13章 项目资源管理(七)
  • (提供数据集下载)基于大语言模型LangChain与ChatGLM3-6B本地知识库调优:数据集优化、参数调整、Prompt提示词优化实战
  • (转)我也是一只IT小小鸟
  • .“空心村”成因分析及解决对策122344
  • .bat批处理(十):从路径字符串中截取盘符、文件名、后缀名等信息
  • .NET : 在VS2008中计算代码度量值
  • .NET 应用架构指导 V2 学习笔记(一) 软件架构的关键原则
  • .net2005怎么读string形的xml,不是xml文件。
  • .NET面试题(二)
  • .Net通用分页类(存储过程分页版,可以选择页码的显示样式,且有中英选择)
  • @require_PUTNameError: name ‘require_PUT‘ is not defined 解决方法
  • [2021ICPC济南 L] Strange Series (Bell 数 多项式exp)
  • [ai笔记3] ai春晚观后感-谈谈ai与艺术
  • [BZOJ 1032][JSOI2007]祖码Zuma(区间Dp)
  • [c]统计数字
  • [C++]模板与STL简介
  • [C++]拼图游戏
  • [codevs 1296] 营业额统计