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

发ajax请求调后端接口请求数据是前后端通信的手段之一, npm上也有好多发ajax请求的工具,那怎么才能更方便的为我们所用呢,咱们今天拿react + axois 来进入我们今天的话题(ps:即使你用的是其他的,思想掌握了,也很容易举一反三)。
对于刚入门的同学来说,使用axios无非就先npm install --save axios 操作一波,然后哪个react组件中用到,import 进来接着axios.get(url).then().catch()操作一波。
但用多了,我们会浅浅发现问题,如:请求不同请求方式,传参的方式不同,没有统一的调用格式;如:这样分散的方式每次拿的都是不同的axois实例,一位着我们每次都要重新配置一些相同的参数等等。下面边上代码边说怎么解决。
首先要让项目公用一个axois实例,这样方便进行公用参数的配置,例如请求拦截器之类的。
首先建立一个api文件夹以及相应的js文件:
在前端项目中如何对请求进行二次分装以及对api进行统一管理_第1张图片
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的方式,我们需要写两个工具方法
在前端项目中如何对请求进行二次分装以及对api进行统一管理_第2张图片
然后做一些axois通用配置,配置内容查看axois文档根据项目需要添加
在前端项目中如何对请求进行二次分装以及对api进行统一管理_第3张图片
接下来就是请求方法的封装,这里我吧axios的几方法整了一遍
在前端项目中如何对请求进行二次分装以及对api进行统一管理_第4张图片
在前端项目中如何对请求进行二次分装以及对api进行统一管理_第5张图片
在前端项目中如何对请求进行二次分装以及对api进行统一管理_第6张图片
在前端项目中如何对请求进行二次分装以及对api进行统一管理_第7张图片
在前端项目中如何对请求进行二次分装以及对api进行统一管理_第8张图片
在前端项目中如何对请求进行二次分装以及对api进行统一管理_第9张图片
在前端项目中如何对请求进行二次分装以及对api进行统一管理_第10张图片
至此,项目常用的请求方式都整完了。
那怎么对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常量
在前端项目中如何对请求进行二次分装以及对api进行统一管理_第11张图片
然后在methods.js里定义我们的api方法,接收相应的参数并调用相应的tools方法
在前端项目中如何对请求进行二次分装以及对api进行统一管理_第12张图片
在组件中我们只需将methods引入调用相应api方法并传入参数即可

在前端项目中如何对请求进行二次分装以及对api进行统一管理_第13张图片
在前端项目中如何对请求进行二次分装以及对api进行统一管理_第14张图片
对与复杂点的传参如
url: /studentInfo/124/ddd?name=dbj
data: {age: 30}
在前端项目中如何对请求进行二次分装以及对api进行统一管理_第15张图片
在前端项目中如何对请求进行二次分装以及对api进行统一管理_第16张图片
效果:
在前端项目中如何对请求进行二次分装以及对api进行统一管理_第17张图片
在前端项目中如何对请求进行二次分装以及对api进行统一管理_第18张图片
在获取异步请求结果的时候除了.then的方式外,亦可用async await来处理
在前端项目中如何对请求进行二次分装以及对api进行统一管理_第19张图片
这样我们就可以愉快的玩项目了!

你可能感兴趣的:(在前端项目中如何对请求进行二次分装以及对api进行统一管理)