Axios发送请求时params和data的区别【request payload 和 query string parameters】

1,错误示例—query string parameterspromise = service.delete(url, {params: params} )export const removeGroupById = (param) => {return ajax('/trap', `/agentGroup`, param, 'DELETE')}# id_arr 为数组this.remove

fuzuxian

4247人浏览 · 2020-08-07 23:33:32

fuzuxian · 2020-08-07 23:33:32 发布

1, 错误示例—query string parameters

promise = service.delete(url, {params: params} )

export const removeGroupById = (param) => {
  return ajax('/trap', `/agentGroup`, param, 'DELETE')
}

# id_arr 为数组
this.removeGroupById(id_arr)

在这里插入图片描述

2，正确示例—request payload

只是将

promise = service.delete(url, {params: params} )
改成
promise = service.delete(url, {data: params} )

在这里插入图片描述

3-1，解析 request payload 和 query string parameters

后端接口要求-------- 请求参数的位置写在body中！！！
在这里插入图片描述

【1】GET产生一个TCP数据包，POST产生两个TCP数据包。
【2】对于GET方式的请求，浏览器会把http header和data一并发送出去，服务器响应200（返回数据）；
【3】而对于POST，浏览器先发送header，服务器响应100 continue，浏览器再发送data，服务器响应200 ok（返回数据）。

http中的get方法传递参数一般是 query string parameters，请求的url 会以 ？+参数 拼接形式

Request Payload，请求的参数放在request body中

3-2， Axios发送请求时params和data的区别

因为params是添加到url的请求字符串中的，用于get请求。

而data是添加到请求体（body）中的，用于post请求。

比如对于下面的get请求：
axios({
	method: "get",
	url: "http://www.tuling123.com/openapi/api?key=20ff1803ff65429b809a310653c9daac",
	params: {
		info: "西安天气"
	},
})
如果我们将params修改为data，显然是不能请求成功的，因为get请求中不存在data这个选项。

POST表单请求提交时，使用的Content-Type是application/x-www-form-urlencoded，
而使用原生AJAX的POST请求如果不指定请求头RequestHeader，默认使用的Content-Type是text/plain;charset=UTF-8。

在html中form的Content-type默认值：Content-type：application/x-www-form-urlencoded

如果使用ajax请求，在请求头中出现 request payload导致参数的方式改变了 ,
那么解决办法就是：
headers: {‘Content-Type’:‘application/x-www-form-urlencoded’}
或者使用ajax设置：
$.ajaxSetup({contentType: ‘application/x-www-form-urlencoded’});

4，补充第三种form表单数据类型提交—form data

在这里插入图片描述

axios.request({
    method: 'post',
    url: url,
    params: { key1: val1},
    paramsSerializer: function(params) {
      // arrayFormat可以格式化你的数组参数
      return qs.stringify(params, { arrayFormat: 'brackets' })
    }
  })