前端排坑指南(四)

前端排坑指南(四)

axios开发模板

​ 最近突然发现，公司很多小项目都是后端大佬们临时使用脚手架创建的，或者是前端开发们紧急搭建的，没有考虑和设计交互时的细节，请求响应时间控制，请求连接特殊处理，请求进度，上传文件请求头处理，下载文件处理等等。仅仅就是写了一个干巴巴的request.js。

​ 也就导致axios配置的千奇百怪，后续开发过程中痛不欲生。

​ 所以 作者 建设性的提供一个标准参考模板，希望大家可以查询使用。

第一步：构造全局变量

1. 创建request.js文件
2. 引入axios
3. 创建全局控制变量
   • 根据环境变量，保存不同环境的接口网关(就是/api)
   • 保存请求超时时间
   • 保存 构造axios操作对象
   • 下载文件名称
   • 是否自定义处理报错信息标识
4. 引入自定义的错误消息 提示方法
5. 引入token错误 处理方法

第二步：请求前拦截

1. 添加axios请求前拦截函数
2. 请求前拦截处理
   • 添加请求网关，有需要自定义的使用自定义，没有使用全局网关
   • 添加token，有不需要tiken的可以添加自定义标识，进行判断
   • 设置下载文件名称，有自定义下载文件名称，赋值给全局变量。
   • 单独处理报错，有自定义处理报错消息，修改全局变量 处理报错标识
   • 单独设置超时，有自定义的使用自定义，没有就使用全局超时时间
   • 参数转get，保持请求函数统一性，get和params入参方式统一
   • 参数转表单形式，处理参数以表单形式传入
   • (获取请求进度 – 选)
   • (取消请求 – 选)

第三步：请求后拦截

1. 添加``axios`请求后拦截函数

2. 请求后拦截函数处理

   • 根据res.header判断文件类型，进行预处理。

     _{如：二进制流图片，可以直接使用，二进制图片转图片url，进行处理，然后返回处理结果}

   • 根据全局变量-自定义报错处理，判断是否需要直接返回请求结果

   • 根据约定接口业务参数，判断是否返回接口请求接口，并进行对应的报错。

   • 判断成功直接返回请求结果 res.data

     _{尽量避免返回报文其他内容}

   • 判断失败，使用报错函数处理，同时返回Promise.reject(res.data)

这里需要注意的是，后端可以控制接口请求状态，status = 200, 404

也可以控制请求成功后，返回结果业务状态。code = 0, 1, -1

• 请求后拦截：第一个回调函数是请求成功后，对业务状态的判断

• 请求后拦截：第二个回调函数是请求失败后，对接口请求状态的判断

第五步：其他请求封装

1. 二进制图片转图片utl
2. post请求下载
3. get请求下载
4. json转.xlsx文件下载
5. 统一处理下载后数据函数
6. 文件上传(文件单独上传，或文件和数据分离上传)
7. 文件上传(文件和参数一个params上传)
8. .xlsx转json数据

第六步：解决方案参考

csdn搜索：axios-ajax-WebSocket紧急救援