前端发送request请求时，参数params和data的区别？

目录

一、前言

二、params参数的使用

1. 什么是Params？

2. 使用场景

三、data参数的使用

1. 什么是Data？

2. 使用场景

四、params和data的区别和实例

1. 主要区别总结

2. 实践示例

五、总结

一、前言

在前端开发过程中，当我们通过JavaScript或其框架（如Axios）向服务器发送HTTP请求时，经常会遇到需要传递参数的情况。根据不同的需求，这些参数可以通过params或data的方式进行传递。了解这两者的区别对于正确构建请求、确保数据准确传输至关重要。

二、params参数的使用

1. 什么是Params？

params通常用于GET请求中，它代表的是URL查询字符串中的键值对。当你使用params时，这些参数会直接附加到请求的URL后面，以“?”开头，多个参数之间用“&”分隔。例如：

https://example.com/api?name=value1&age=value2

这种方式非常适合用来传递少量的非敏感信息，因为它们直接暴露在URL中，易于阅读但不适合传输敏感数据。

2. 使用场景

• 过滤和排序：比如搜索结果页面，用户输入的关键字可以作为params的一部分来过滤结果。
• 分页：指定当前页数和每页显示的数量等信息。

三、data参数的使用

1. 什么是Data？

data则用于POST、PUT等请求体中，它是请求的一部分，不会出现在URL里。这意味着与GET请求不同，POST请求的数据不会被缓存、保存在浏览器历史记录中或通过书签访问。这对于发送大量数据或者包含敏感信息的数据特别有用。

2. 使用场景

• 提交表单：当用户填写完注册或登录信息后，通常会将这些信息作为data提交给服务器。
• 文件上传：大文件上传通常也需要通过data字段来实现。

四、params和data的区别和实例

1. 主要区别总结

2. 实践示例

下面的例子中可以看到如何分别使用params和data：

// 方式一 直接使用request.postexportfunctiongetQuestionList(params) {
  return request.post('/api/questionBank/getQuestionList', params)
}
// 方式二 使用request配置对象// 发送请求体数据  POST /api/questionBank/getQuestionList (带请求体)exportfunctiongetQuestionList(data) {
  returnrequest({
    url: '/api/questionBank/getQuestionList',
    method: 'post',
    data  // 作为请求体发送
  })
}
// 发送 URL 参数  GET /api/questionBank/getQuestionList?key=valueexportfunctiongetQuestionList2(params) {
  returnrequest({
    url: '/api/questionBank/getQuestionList',
    method: 'get',  // 或 post
    params  // 作为 URL 参数发送
  })
}
// 同时发送请求体和 URL 参数  POST /api/questionBank/getQuestionList?key=value (同时带请求体)exportfunctiongetQuestionList3(data, params) {
  returnrequest({
    url: '/api/questionBank/getQuestionList',
    method: 'post',
    data,    // 请求体数据
    params   // URL 参数
  })
}

五、总结

理解何时以及如何使用params和data是构建高效且安全的Web应用程序的关键之一。希望这篇文章能够帮助你更好地掌握这两种方式的区别及其应用场景。