axios请求的封装

经过这段时间vue项目的积累, 总结一下自己对axios请求的封装, 我们可以通过以下点来拆分:
1.请求的url
2.请求的方式
3.请求的参数
4.请求拦截器
5.响应拦截器
6.调用方式

请求的url

假设url为http://10.0..:8080/test/task/32682?appCode=001&userId=test, 我们可以把url拆分为

• 基础路径baseURL=http://10.0..:8080
  我们可以把baseURL的值存到全局配置config文件中, 然后通过webpack
  ProvidePlugin添加到全局变量 config.baseURL
  获取baseURL
  
  WeChat44c47fe85238878d09bcbd8412a4d197.png

屏幕快照 2019-10-24 上午10.24.52.png

• 业务路径path=/test/task/{taskId}
  对于业务路径我们可以定义一个path.js文件, 统一管理这些路径,如下图:
  

  WechatIMG433.jpeg

  另外 path中{taskId}, 这里给大家解释下, 后台按照restful api设计的时
  候, 会把针对某个实体的操作, 此实体的id拼接在path上, 所以我们需要动态的把
  {taskId}替换为32682, 代码见下个步骤

• url请求参数appCode=001&userId=test
  最后我们需要把请求的参数拼接到url上, 这里强调下把参数拼接到url上, 并不仅
  仅是get请求方式, 而是get请求方式只能放到url上, 一般来说其他请求方式在url
  请求上拼接参数, 这类参数基本上是一些业务系统每个接口都需要的一些信息,
  我们通过util中封装的方法统一处理url如下:
  

  屏幕快照 2019-10-24 上午10.36.59.png

• 请求方式
  axios为我们提供了get/delete/head/post/put/patch等

  
  
  屏幕快照 2019-10-24 上午11.09.37.png

• 请求拦截器
  我们在发出请求时, 可以对请求进行一些处理, 比如说我们移动端的token添加
  request header, 以及在发出请求时的出错
  

  屏幕快照 2019-10-24 上午10.49.34.png

• 响应拦截器
  我们在收到响应时, 可以统一对响应成功和失败,进行一些处理, 不同系统后台处
  理可能会不一样, 比如id不能为空, 在不同系统可能有如下2种:

  1. 返回200状态码, 在responseData中, 再通过某个字段来区分成功或失败, 失败
     的话, 再专门进行失败处理

  2. 返回400状态码, 400状态码一般代表, 客户端传递参数有问题, 导致后台出错,
     这时, 后台一般会自定义一些异常类去捕获, 异常类一般有2个属性, code和
     message, 后台定义的code在接下来我们前端处理codeMessage对象中, 要保持
     一致, 而codeMessage中的message不一定需要与后台异常类中message保持一
     致, 因为后台的message一般是英文提示, 此提示直接展示给用户不够友好, 所以
     我们前端可以翻译或者自定义message

     
     
     屏幕快照 2019-10-24 上午11.00.25.png

屏幕快照 2019-10-24 上午11.00.00.png

• axios请求构造

  
  
  屏幕快照 2019-10-24 上午11.12.32.png

• 业务模块具体调用请求
  我们可以进行一下抽象, control -> service -> http请求

1. control我们可以理解为业务组件调用层, 构造请求参数
2. service我们可以理解为业务模块服务层, 我们在这里可以对请求参数处理, 以及url处理, 此处我们可以按照业务场景分模块
   比如: moduleA下的请求集中一起, moduleB下的请求集中一起

3. http请求即为我们导出的axios对象, 此对象提供了我们进行http请求的基础实现

   
   
   屏幕快照 2019-10-24 上午11.24.31.png
   
   
   屏幕快照 2019-10-24 上午11.28.06.png

至此, 完成对axios请求的封装, 欢迎提问, 一起进步!