在前端项目中如何对请求进行二次分装以及对api进行统一管理

发ajax请求调后端接口请求数据是前后端通信的手段之一， npm上也有好多发ajax请求的工具，那怎么才能更方便的为我们所用呢，咱们今天拿react + axois 来进入我们今天的话题（ps:即使你用的是其他的，思想掌握了，也很容易举一反三）。
对于刚入门的同学来说，使用axios无非就先npm install --save axios 操作一波，然后哪个react组件中用到，import 进来接着axios.get(url).then().catch()操作一波。
但用多了，我们会浅浅发现问题，如：请求不同请求方式，传参的方式不同，没有统一的调用格式；如：这样分散的方式每次拿的都是不同的axois实例，一位着我们每次都要重新配置一些相同的参数等等。下面边上代码边说怎么解决。
首先要让项目公用一个axois实例，这样方便进行公用参数的配置，例如请求拦截器之类的。
首先建立一个api文件夹以及相应的js文件：

methods.js:用了存放项目中的aip方法 ；
tools.js:用来存放通用请求方法-----本篇文章的主题；
url.js:用了存放api相应的url。
之后我们的目标就是调用的时候能一个统一的传参格式：
1、params = {name: “123”, age: “9”} ------ 会得到url?name=123&age=9；
2、data = {school: “dbj”} ------ 会将内容通过请求体传输；
3、id = “1111” ------ 会得到 url/1111
4、id = [“aaa”, ''bbb", “ccc”] ------ 会得到url/aaa/bbb/ccc
获取你会想问，为什么要这样做，其实项目接触多了，你就会发现，请求传参的方式无非就是上面方式的一个组合。
届着上代码，在tools.js引入axois

之后，为了实现上面1，3，4的方式，我们需要写两个工具方法

然后做一些axois通用配置，配置内容查看axois文档根据项目需要添加

接下来就是请求方法的封装，这里我吧axios的几方法整了一遍







至此，项目常用的请求方式都整完了。
那怎么对api进行统一管理呢，都有那些事需要做呢？
1、对url进行统一管理；
2、多项目中的请求方法进行统一管理；
一个url可能对应一个请求方法，也可能对应多哥请求方法。
如对一个学生信息进行增删改查公用同一个url，这是http请求的方式不同
查寻姓名问“dbj”的学生信息
method：get
url：/studentInfo
params：{name: “dbj”}
删除姓名为“dbj”的学生信息
method：delete
url：/studentInfo
params：{name: “dbj”}
更新id为"123"的学生信息
method：put
url：/studentInfo
params：{id: “123”}
data：{name: “dbj2”}
我们就可以在url.js里定义一个url常量

然后在methods.js里定义我们的api方法，接收相应的参数并调用相应的tools方法

在组件中我们只需将methods引入调用相应api方法并传入参数即可

对与复杂点的传参如
url: /studentInfo/124/ddd?name=dbj
data: {age: 30}


效果：


在获取异步请求结果的时候除了.then的方式外，亦可用async await来处理

这样我们就可以愉快的玩项目了！