实习的时候第一次写项目,之前接触的都是看别人现成封装好的api,自己也照着写,前几天用到post的时候发现发请求的时候发现后端接收不到,然后自己才去真正的学习了一下这两种请求的一些区别以及携带参数的格式

1.get请求

        项目中一般是获取数据的时候用这个方法比较多,携带params参数是添加到url的请求字符串中的。

        之前看大佬封装api的方式,我也就跟着写,一段时间还没出问题,后面遇到一个没有封装,直接在组件中用axios发请求的形式,传params参数时就搞不懂了,携带参数过去,获取不到数据。


        贴上大佬封装和调用方法时的写法,让我一直以为params就是个形参,调用方法是传进来的对象就是params参数,可能有点蠢,毕竟前端的东西都是自学的,很多理论不懂。然后直接调用时就出问题了,发现直接传键值对的形式后端接收不到请求,像下面这样

然后要改成{params:{name:keyword}}这种形式才可以,如下

意思就是,发get请求传参数时,携带过去的对象其实是作为params的键值传进去的,这句话很关键,因此,封装的时候其实完整的写法是像下面这样的,形参是data。

2.post请求

        一般要携带参数去修改数据库的数据时用这个方法比较多,携带的参数data是添加到请求体(body)中的。

        说实话post请求就更离谱了,我之前以为和get没什么区别,用哪个完全看爱好,也完全不知道大佬在封装api时写qs.stringify(data)的意义。

        前两天在封装post请求时,我也跟往常一样去用qs转换数据格式,发现出问题了,后端接收不到,报错参数格式不正确。(这里是因为换了一个项目,之前那个项目和这个项目后端接收参数的格式不一样)。

        然后发现,其实post请求携带参数的格式其实有两种,分别是From Data 和Request Payload,区别就在这,前者对应的content-type是application/x-www-form-urlencoded,后者的是application/json;具体用什么格式要看后端给的接口文档来判断。

①Request Payload格式,这个是post请求发送时默认的格式,后端接收到时就是json格式

默认封装如下:

 然后我们可以在控制台中查看携带数据的格式和Content-Type

 ②From Data格式,这个转换后的格式,后端接收到的就是name=1&key=2这种形式

封装如下:需要先引入qs库,这个库会在下载axios时自动下载,因此直接引入就行

然后在data前面用qs的stringify方法转换一下即可

         

同理,我们可以再控制台中看一下携带数据的格式和请求头的内容类型

 

可以发现,使用qs转换之后,格式就不再是json了

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐