在项目开发的时候大多会使用fetch或者借助第三方axios工具来进行数据请求，已经很少去自主封装ajax了，因为目前主流的数据交互方案都是依靠promise来解决，而fetch和axios都是基于Promise来实现的，所以我在做项目的时候都是直接用fetch或者axios，如果只是简单尝试一个效果的话就直接用fetch，在正式的项目中还是会采用axios，因为axios可以做出一些整体性的配置及拦截器，实现更丰富的能力。

　　我在项目中会这样去封装axios请求工具：

　　1、通过axios.create(config)来创建一个request实例，在其中可以根据环境变量配置基础路径、超时时间等。

　　2、配置请求拦截器和响应拦截器

　　1、请求拦截器

　　- 从store中取出token，绑定在请求头上

　　- 全局loading设置为true （事件总线）

　　2、响应拦截器

　　- 配置了请求成功及失败的类型（根据标识性状态码区分）

　　- 接收请求时携带的参数等等特殊处理

　　+ silent 默认post请求会做出成功和失败提示，silent为true则不提示

　　+ loud 默认get请求不会做出提示，loud为true则做出提示

　　+ more 默认返回全局的数据

　　- 根据成功及失败的结果，做出全局提示

　　- 成功的时候返回res.data.data, 如果more为true，就返回res.data

　　- 如果请求成功了，但是接口返回的数据是是失败的数据（响应的code不为200）throw 抛出一个错误，方便在逻辑中利用try catch进行成功和失败的分流。

上一篇

为什么React的Hooks不能在条件语句和循环语句中使用？

下一篇

怎么对组件进行封装二次封装