axios post请求,请求数据的两种格式：JSON字符串和form表单，分别实现和如何选择

您所在的位置：网站首页 › 前端怎么定义接口和数据格式 › axios post请求,请求数据的两种格式：JSON字符串和form表单，分别实现和如何选择

axios post请求,请求数据的两种格式：JSON字符串和form表单，分别实现和如何选择

2024-06-24 15:14| 来源: 网络整理| 查看: 265

前端向后台发送的请求数据有：JSON字符串和form表单两种格式。一般情况下可以两种格式都OK，但在某些情况下就需要根据情况来进行选择。 1.首先来看一下两种数据格式在请求中的体现形式： JSON字符串：在这里插入图片描述 Form Data: 看起来区别不是很大，都可以通过键值来获取相应的值。再来看一组更复杂的数据： JSON字符串： Form Data: 这个时候的区别就体现出来了，Form表单会将数组按照索引进行拆分，所以这个时候后台不能直接通过dataArr来获取这个数组数据，只能根据索引来一一获取。当数组length不确定时，处理起来就比较麻烦了，所以这种情况传参使用JSON字符串的形式比较合适。具体要如何选择这两种数据格式，后面再介绍 2.两种传参的实现： 2.1 JSON字符串：在这里插入图片描述 request是axios创建的实例，axios的封装见axios的封装附上代码：

request({ url:"/api/post", method:"post", data:JSON.stringify({ mess:'hello', dataArr:[{name:'test',vlaue:[1,2,3]},{name:"match",vlaue:[1,2]}] }), headers:{ 'content-type':"application/json" } }).then(res=>{ console.log('响应成功',res) },reject=>{ console.log('响应失败',reject) })

2.2 Form Data: FormData的实现方法有很多种： 1.form表单，现在基本不用了，这里不再介绍。 2.引入qs,通过QS.stringify 在这里插入图片描述 3. new FormData()，通过append方法添加参数这里还用到了文件上传，file.file就是同upload组件传入的文件 3.如何选择： 1.当参数的数据结构比较复杂时，如不仅仅是简单的键值对，而是对象或数组嵌套结构时，建议使用JSON字符串传参 2.涉及文件上传时建议使用FormData 3.其他一般情况两者皆可 4.涉及文件上传同时又需要携带比较复杂的数据：Form Data+JSON.stringify 在这里插入图片描述或：

【本文地址】

axios post请求,请求数据的两种格式：JSON字符串和form表单，分别实现和如何选择

axios post请求,请求数据的两种格式：JSON字符串和form表单，分别实现和如何选择

今日新闻

推荐新闻