axios 传递json axios发送json数据

前端向后台发送的请求数据有:JSON字符串和form表单两种格式。一般情况下可以两种格式都OK,但在某些情况下就需要根据情况来进行选择。

1.首先来看一下两种数据格式在请求中的体现形式

JSON字符串:

axios 传递json axios发送json数据_JSON

Form Data:

axios 传递json axios发送json数据_Data_02

看起来区别不是很大,都可以通过键值来获取相应的值。

再来看一组更复杂的数据:

JSON字符串:

axios 传递json axios发送json数据_Data_03

Form Data:

axios 传递json axios发送json数据_Data_04

这个时候的区别就体现出来了,Form表单会将数组按照索引进行拆分,所以这个时候后台不能直接通过dataArr来获取这个数组数据,只能根据索引来一一获取。当数组length不确定时,处理起来就比较麻烦了,所以这种情况传参使用JSON字符串的形式比较合适。具体要如何选择这两种数据格式,后面再介绍

2.两种传参的实现

2.1 JSON字符串:

axios 传递json axios发送json数据_Data_05

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)
    })
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.

2.2 Form Data:

FormData的实现方法有很多种:

1.form表单,现在基本不用了,这里不再介绍。

2.引入qs,通过QS.stringify

axios 传递json axios发送json数据_JSON_06

axios 传递json axios发送json数据_字符串_07

3. new FormData(),通过append方法添加参数

axios 传递json axios发送json数据_字符串_08

axios 传递json axios发送json数据_axios 传递json_09

这里还用到了文件上传,file.file就是同upload组件传入的文件

3.如何选择

1.当参数的数据结构比较复杂时,如不仅仅是简单的键值对,而是对象或数组嵌套结构时,建议使用JSON字符串传参

2.涉及文件上传时建议使用FormData

3.其他一般情况两者皆可

4.涉及文件上传同时又需要携带比较复杂的数据:Form Data+JSON.stringify

axios 传递json axios发送json数据_字符串_10

或:

axios 传递json axios发送json数据_字符串_11

原文:axios 传递json axios发送json数据_deanyuancn的技术博客_51CTO博客