js axios 网络请求参数中的 params 和 data 的区别 图示

前端开发中，我们常用的是axios这个网络请求库来发送我们的网络请求， 在axios中，params和data是有区别的，他们分别应对的是不同的使用场景。

params 发送请求参数

axios会将所有的请求数据附加到请求的url地址中，有请求数据长度的限制。一般用于GET请求。

应用场景： 且请求参数不多，数据流很小的情况下，一般情况和GET配合使用。同时由于请求参数都暴露在了url里面，所以有安全风险，仅适用于非敏感数据的发送。

params请求参数示例

如： 我们在params参数中发送一个ids数组类型的请求参数，则最后会生成类似这样的URL请求地址： /api/monitor/loginLog?ids[]=1&ids[]=2&ids[]=3    这里的请求key变成了ids[] , 

api请求代码

// 删除登录日志
export function delLoginLog(id) {
  return request({
    url: '/monitor/loginLog',
    method: 'delete',
    params: {ids: toArr(id)}
  })
}

一般而言，params只和get方法配合使用，你要用其他的请求方式也是可以的，不过在后端获取数据的时候要做相应的调整。 上面的这个示例中最佳的方式应该是是使用data来传递请求参数。

data方式发送请求参数

通过data方式传递的请求数据，最后会将所有的请求数据放到请求body里面发送。没有请求数据长度的限制，可发送大文件，字符串或者数据流等，相对于params方式，安全性更高。

适用场景： 适用于所有非GET的请求方式，没有发送数据长度的形式，相对于params方式，请求数据的安全性更好。

api请求示例：

对于数组类型的请求数据，最佳的就是使用data方式发送。

// 删除登录日志
export function delLoginLog(id) {
  return request({
    url: '/monitor/loginLog',
    method: 'delete',
    data: {ids: toArr(id)}
  })
}

最后的请求效果如下：

请求载荷

从上图中，我们可以看到，我们发送的数组类型的请求数据，在请求载荷里面它就是一个数组的形式，他最终是被封装成一个JSON格式发送的。这样我们在后端获取数据的时候，如果是在go语言里面我们就可以非常轻松的使用json.Unmarshal将这个请求数据直接绑定到我们自定义的结构体中。

总结：axios请求参数中的params方式发送请求数据仅适合于参数少，数据量小，而且非私密的请求数据发生情况下使用，而data方式发送的请求数据适合于所有非GET方式的请求场景下使用，且安全性更高。