前端排坑指南(四)
axios开发模板
最近突然发现,公司很多小项目都是后端大佬们临时使用脚手架创建的,或者是前端开发们紧急搭建的,没有考虑和设计交互时的细节,请求响应时间控制,请求连接特殊处理,请求进度,上传文件请求头处理,下载文件处理等等。仅仅就是写了一个干巴巴的request.js。
也就导致axios配置的千奇百怪,后续开发过程中痛不欲生。
所以 作者 建设性的提供一个标准参考模板,希望大家可以查询使用。
第一步:构造全局变量
- 创建
request.js
文件 - 引入
axios
- 创建全局控制变量
- 根据环境变量,保存不同环境的接口网关(就是
/api
) - 保存请求超时时间
- 保存 构造
axios
操作对象 - 下载文件名称
- 是否自定义处理报错信息标识
- 根据环境变量,保存不同环境的接口网关(就是
- 引入自定义的错误消息 提示方法
- 引入token错误 处理方法
第二步:请求前拦截
- 添加
axios
请求前拦截函数 - 请求前拦截处理
- 添加请求网关,有需要自定义的使用自定义,没有使用全局网关
- 添加token,有不需要tiken的可以添加自定义标识,进行判断
- 设置下载文件名称,有自定义下载文件名称,赋值给全局变量。
- 单独处理报错,有自定义处理报错消息,修改全局变量 处理报错标识
- 单独设置超时,有自定义的使用自定义,没有就使用全局超时时间
- 参数转get,保持请求函数统一性,get和params入参方式统一
- 参数转表单形式,处理参数以表单形式传入
- (获取请求进度 – 选)
- (取消请求 – 选)
第三步:请求后拦截
-
添加``axios`请求后拦截函数
-
请求后拦截函数处理
-
根据
res.header
判断文件类型,进行预处理。如:二进制流图片,可以直接使用,二进制图片转图片url,进行处理,然后返回处理结果
-
根据全局变量-自定义报错处理,判断是否需要直接返回请求结果
-
根据约定接口业务参数,判断是否返回接口请求接口,并进行对应的报错。
-
判断成功直接返回请求结果
res.data
尽量避免返回报文其他内容
-
判断失败,使用报错函数处理,同时返回
Promise.reject(res.data)
-
这里需要注意的是,后端可以控制接口请求状态,status = 200, 404
也可以控制请求成功后,返回结果业务状态。code = 0, 1, -1
-
请求后拦截:第一个回调函数是请求成功后,对业务状态的判断
-
请求后拦截:第二个回调函数是请求失败后,对接口请求状态的判断
第五步:其他请求封装
- 二进制图片转图片utl
- post请求下载
- get请求下载
- json转.xlsx文件下载
- 统一处理下载后数据函数
- 文件上传(文件单独上传,或文件和数据分离上传)
- 文件上传(文件和参数一个params上传)
- .xlsx转json数据
第六步:解决方案参考
csdn搜索:axios-ajax-WebSocket紧急救援