axios 通报参数的方式(data 与 params)

系列文章目录

  提示：这里可以添加系列文章的全部文章的目录，目录须要自己手动添加
工作案例：在 vue 项目利用 axios 通报参数的方式(data 与 params)

---

提示：写完文章后，目录可以自动生成，怎样生成可参考右边的资助文档

  

---

前言

提示：这里可以添加本文要记录的大概内容：
工作中，用到的通报参数总结，后期一点点补齐。

---

提示：以下是本篇文章正文内容，下面案例可供参考
一、data 的情势

• 通常用于 POST、PUT 等请求方法的请求体中通报数据。
  
• 实用于通抨击杂的数据布局，比方 JSON 对象、FormData 等。
  
• 当利用 data 通报参数时，参数会被包含在请求体中，适合通报须要修改服务器状态的数据。
  

比方，在发送 POST 请求时，利用 data 参数通报数据：axios.post('/api/url', data)
示例： data 情势的数据有可以做很多多少事变， 文件上传，表单提交 等
一般工作中利用data接收：

1. export function finalHandle(data) {
2.     return request({
3.         url: '/uav/finalHandle',
4.         method: 'post',
5.         data,
6.         timeout: 30000, // 设置超时时间为30秒
7.     })
8. }

复制代码

1. // 表单
2.        let formdata = new FormData();
3.        formdata.append("handleUuid", handleUuid);
4.        formdata.append("uavId", this.defaultUavSn);
5.                

复制代码

后端Java接收：

1.     @ResponseBody
2.     @PostMapping(value = "/finalHandle")
3.     public Result finalHandle(@CurrentUser EfUser efUser, @RequestParam("handleUuid") String handleUuid, @RequestParam(value = "uavId",required = false) String uavId ) {
4.         try {
5.             EfHandle efHandleObj =null;
6.             String  useridStr = String.valueOf(efUser.getId());

复制代码

浏览器控制台：

1). FormData的利用

当前端利用 FormData 时，应该利用 data 来通报参数，而不是 params。
在前端，利用 FormData 对象可以方便地构建和发送表单数据，包括文件上传等操作。以下是一个示例：
前端vue:

1.     async upfile() {
2.       try {
3.         let formdata = new FormData();
4.         // formdata.append("file", this.file)
5.         formdata.set("file", this.file);  //后端是根据"file" 来进行取值(@RequestParam("file") 或者@RequestBody MultipartFile file)
6.         await this.$store.dispatch("uavs/uploadMediaResults", formdata).then((response) => {
8.           const { code, message, data } = response;
9.           if (code === 1) {
10.             this.showMessage(message, "success");
11.           } else {
12.             this.showMessage(message, "warning");
13.           }
14.         })
15.           .catch((error) => {
17.             this.showMessage(error, "error");
18.           });
19.       } catch (error) {
21.       }
22.     },

复制代码

在二次封装axios 的 request.js

1. export function uploadMediaResults(data) {
2.     return request({
3.         url: '/uav/uploadMediaResults',
4.         method: 'post',
5.         data,
6.         timeout: 30000, // 设置超时时间为30秒
7.     })
8. }

复制代码

后端Java接收：

1.     @ResponseBody
2.     @PostMapping(value = "/uploadMediaResults")
3.     public Result uploadMediaResults(@RequestBody MultipartFile file, HttpServletRequest request) {
4.         try {

复制代码

浏览器控制台：

---

二、params 的情势

• 通常用于 GET 请求的 URL 查询参数中通报数据。
  
• 实用于通报简单的键值对查询参数。
  
• 当利用 params 通报参数时，参数会被附加在 URL 后面，用于 GET 请求中通报查询参数。
  

比方，在发送 GET 请求时，利用 params 参数通报查询参数：axios.get('/api/url', { params: params })。
前端vue: params是一个对象情势通报的

1.         async downloadRouteTasks() {
2.             let url = 'uavs/finalHandle';
3.             try {
4.                 const params ={
5.                     routeTaskId :'11', // 后端对应 @RequestParam
6.                 }
7.                 // params是一个对象形式传递的
8.                 const response = await this.$store.dispatch('uavs/downloadRouteTasks', params);  
9.                 const { code, data, message } = response;
11.                 if (code == 1) {
13.                 } else {
14.                     // this.showMessage(error, 'warning')
15.                 }
16.             } catch (error) {
17.                 this.showMessage(error, 'error')
18.             }
20.         },

复制代码

在二次封装axios 的 request.js

1. export function downloadRouteTasks(params) {
2.     return request({
3.         url: '/uav/downloadRouteTasks',
4.         method: 'post',
5.         timeout: 30000, // 设置超时时间为30秒
6.         params,
7.     })
8. }

复制代码

后端Java接收：

1.     @RequestMapping(value = "/downloadRouteTasks",method = RequestMethod.POST)
2.     public ResponseEntity<byte[]> downloadRouteTasks(@RequestParam String routeTaskId) throws UnsupportedEncodingException {
3.         // 使用 UTF-8 编码将字符串转换为字节数组
4.         byte[] byteArray = routeTaskId.getBytes("UTF-8");
5.         System.out.println("Byte array length: " + byteArray.length);
7.         // 设置响应头
8.         HttpHeaders headers = new HttpHeaders();
9.         headers.add("Content-Disposition", "attachment; filename=route_task.json");
10.         // 返回响应
11.         return new ResponseEntity<>(byteArray, headers, HttpStatus.OK);
12.     }
13.    
14.     //

复制代码

假如后端不知道前端会传入哪些参数，可以利用 Map 接收全部的参数，并在后端对 Map 中的参数进行解析。以下是一个简单的示例：

1. @RestController
2. @RequestMapping("/uav")
3. public class YourController {
5.     @GetMapping("/downloadRouteTask")
6.     public ResponseEntity<byte[]> downloadRouteTask(@RequestParam Map<String, String> params) {
7.         // 通过 Map 接收所有参数
8.         // 根据实际情况对参数进行处理
9.         String param1 = params.get("param1");  // 获取参数
10.         String param2 = params.get("param2");
11.         
12.         // 处理参数并返回结果
13.     }
14. }

复制代码

在这个例子中，我们将参数直接作为 params 对象传入，这样它们将会被自动地添加到 URL 的查询字符串中。

---

三、混淆利用

在工作开辟vue利用vuex二次封装axios时， 通报参数。

1.     const formdata = { uavId: this.defaultUavSn, handleUuid }
2.     const payload = { that: this, url, formdata, efHandle: row }
3.     const response = await this.$store.dispatch('uavs/finalHandle', payload);

复制代码

在二次封装axios 的 request.js

1. export function finalHandle(payload) {
2.     const {url,that,formdata,efHandle}= payload
3.     return request({
4.         url: '/uav/finalHandle',
5.         method: 'post',
6.         data:formdata,
7.         params:efHandle,
8.         timeout: 30000, // 设置超时时间为30秒
9.     })
10. }

复制代码

后端Java接收：

1.     @ResponseBody
2.     @PostMapping(value = "/finalHandle")
3.     public Result finalHandle(@CurrentUser EfUser efUser, @RequestParam("handleUuid") String handleUuid, @RequestParam(value = "uavId",required = false) String uavId ,@RequestBody(required = false) EfHandle efHandle) {
4.         try {

复制代码

浏览器控制台：

1）. 文件类传参

   假如上传一些参数 并且带有上传文件 后端java 怎么写接收？
  axios实例：
在前端利用 axios 通报包含文件和其他参数的请求时，您可以利用 FormData 对象来构建请求体，并将文件和其他参数添加到 FormData 对象中。然后通过 axios 发送包含 FormData 对象的 POST 请求。以下是一个示例代码：

1. // 假设参数 param1、param2 和文件 file 已经定义
3. const formData = new FormData();
4. formData.append('param1', param1);
5. formData.append('param2', param2);
6. formData.append('file', file);
8. axios.post('/uploadWithParams', formData, {
9.     headers: {
10.         'Content-Type': 'multipart/form-data'
11.     }
12. })
13. .then(response => {
14.     // 请求成功处理逻辑
15. })
16. .catch(error => {
17.     // 请求失败处理逻辑
18. });

复制代码

在vue前端 – 在二次封装axios 的 request.js

在java 接收文件参数：
   后端是根据"file" 来进行取值(@RequestParam(“file”) 大概@RequestBody MultipartFile file)

1.     @ResponseBody
2.     @PostMapping(value = "/uploadMediaResults")
3.     public Result uploadMediaResults(@RequestParam String param1, @RequestParam String param2,@RequestBody MultipartFile file, HttpServletRequest request) {
4.         try {
5. //
6. @RestController
7. public class YourController {
9.     @PostMapping("/uploadWithParams")
10.     public ResponseEntity<String> handleFileUploadWithParams(@RequestParam String param1, @RequestParam String param2, @RequestPart MultipartFile file) {
11.         // 处理上传的文件和其他参数
12.     }
13. }

复制代码

在这个示例中，我们利用 @RequestParam 注解来接收表单中的参数 param1 和 param2，利用 @RequestPart 注解来接收上传的文件。请注意，@RequestPart 注解不要求指定参数名，它将会自动匹配文件部分。
假如您的请求中包含多个文件，您可以将 @RequestPart 注解设置为一个数组来接收多个文件：

1. @RestController
2. public class YourController {
4.     @PostMapping("/uploadWithParamsAndMultipleFiles")
5.     public ResponseEntity<String> handleFileUploadWithParamsAndMultipleFiles(@RequestParam String param1, @RequestParam String param2, @RequestPart("files") MultipartFile[] files) {
6.         // 处理上传的多个文件和其他参数
7.     }
8. }

复制代码

假如您的请求中包含多个文件，您可以将 @RequestPart 注解设置为一个数组来接收多个文件：
总结

提示：这里对文章进行总结：

• params是添加到url的请求字符串中的，一般用于get请求。
  
• data是添加到请求体（body）中的， 一般用于post请求。
  

总的来说，data 实用于通报请求体中的数据，而 params 实用于通报 URL 查询参数。根据差别的需求和请求类型选择合适的参数通报方式可以更好地完成相应的 HTTP 请求。
前端通报利用 FormData 大概 params参数 后端java 都可以利用 @RequestParam 接收 ; 当参数较多大概不明确可以利用Map 接收全部的参数，并在后端对 Map 中的参数进行解析 ( @RequestParam Map<String, String> params)

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。