axios的各种传参方式

axios的各种传参方式

 

1、 params方式

axios({

  url: '/users',

  method: 'get',

  params: {

   id: '11111',

   name: '22222'

  }

})

 

请求地址：/users?id=11111&name=22222

请求体：无

 

注：get请求是没有请求体的，所以get请求只能使用params传参。

 

2、 data方式

（1）application/x-www-form-urlencoded（表单方式）

axios({

  url: '/users',

  method: 'post',

  data: qs.stringify({

    id: '11111',

    name: '22222'

  })

})

 

请求地址：/users

请求体：id=11111&name=22222

 

（2）application/json（JSON方式）

axios({

  url: '/users',

  method: 'post',

  data: {

    id: '11111',

    name: '22222'

  }

})

 

请求地址：/users

请求体：{"id":"11111","name":"22222"}

 

（3）multipart/form-data（文件方式）

const formData = new FormData()

formData.append('id', '11111')

formData.append('name', '22222')

formData.append('file', 此处是<input type='file'>的value)

 

axios({

  url: '/users/upload',

  method: 'post',

  headers: { 'Content-Type': 'multipart/form-data' },

  data: formData

})

 

请求地址：/users

请求体：

-----------------------------2024497587069

Content-Disposition: form-data; name="id"

11111

-----------------------------2024497587069

Content-Disposition: form-data; name="name"

22222

-----------------------------2024497587069

Content-Disposition: form-data; name="file"; filename="2019年前端资源估算.xls"

Content-Type: application/vnd.ms-excel

ÐÏࡱá