axios 传递参数的方式(data 与 params)

系列文章目录

提示：这里可以添加系列文章的所有文章的目录，目录需要自己手动添加

工作案例：在 vue 项目使用 axios 传递参数的方式(data 与 params)

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

文章目录

• 系列文章目录
• 前言
• 一、data 的形式
• • 1). FormData的使用
  • 二、params 的形式
  • 三、混合使用
  • • 1）. 文件类传参
    • 总结

      ---

      前言

      提示：这里可以添加本文要记录的大概内容：

      工作中，用到的传递参数总结，后期一点点补齐。

      ---

      提示：以下是本篇文章正文内容，下面案例可供参考

      一、data 的形式

      • 通常用于 POST、PUT 等请求方法的请求体中传递数据。
      • 适用于传递复杂的数据结构，例如 JSON 对象、FormData 等。
      • 当使用 data 传递参数时，参数会被包含在请求体中，适合传递需要修改服务器状态的数据。

        例如，在发送 POST 请求时，使用 data 参数传递数据：axios.post('/api/url', data)

        示例： data 形式的数据有可以做好多事情， 文件上传，表单提交 等

        一般工作中使用data接收：

        export function finalHandle(data) {
            return request({
                url: '/uav/finalHandle',
                method: 'post',
                data,
                timeout: 30000, // 设置超时时间为30秒
            })
        }
        

        // 表单
               let formdata = new FormData();
               formdata.append("handleUuid", handleUuid);
               formdata.append("uavId", this.defaultUavSn);
                        
        

        后端Java接收：

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

        浏览器控制台：

        

        1). FormData的使用

        当前端使用 FormData 时，应该使用 data 来传递参数，而不是 params。

        在前端，使用 FormData 对象可以方便地构建和发送表单数据，包括文件上传等操作。以下是一个示例：

        前端vue:

            async upfile() {
              try {
                let formdata = new FormData();
                // formdata.append("file", this.file)
                formdata.set("file", this.file);  //后端是根据"file" 来进行取值(@RequestParam("file") 或者@RequestBody MultipartFile file)
                await this.$store.dispatch("uavs/uploadMediaResults", formdata).then((response) => {
                  const { code, message, data } = response;
                  if (code === 1) {
                    this.showMessage(message, "success");
                  } else {
                    this.showMessage(message, "warning");
                  }
                })
                  .catch((error) => {
                    this.showMessage(error, "error");
                  });
              } catch (error) {
              }
            },
        

        在二次封装axios 的 request.js

        export function uploadMediaResults(data) {
            return request({
                url: '/uav/uploadMediaResults',
                method: 'post',
                data,
                timeout: 30000, // 设置超时时间为30秒
            })
        }
        

        后端Java接收：

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

        浏览器控制台：

        

        ---

        二、params 的形式

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

          例如，在发送 GET 请求时，使用 params 参数传递查询参数：axios.get('/api/url', { params: params })。

          前端vue: params是一个对象形式传递的

                  async downloadRouteTasks() {
                      let url = 'uavs/finalHandle';
                      try {
                          const params ={
                              routeTaskId :'11', // 后端对应 @RequestParam
                          }
                          // params是一个对象形式传递的
                          const response = await this.$store.dispatch('uavs/downloadRouteTasks', params);  
                          const { code, data, message } = response;
                          if (code == 1) {
                          } else {
                              // this.showMessage(error, 'warning')
                          }
                      } catch (error) {
                          this.showMessage(error, 'error')
                      }
                  },
          

          在二次封装axios 的 request.js

          export function downloadRouteTasks(params) {
              return request({
                  url: '/uav/downloadRouteTasks',
                  method: 'post',
                  timeout: 30000, // 设置超时时间为30秒
                  params,
              })
          }
          

          后端Java接收：

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

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

          @RestController
          @RequestMapping("/uav")
          public class YourController {
              @GetMapping("/downloadRouteTask")
              public ResponseEntity downloadRouteTask(@RequestParam Map params) {
                  // 通过 Map 接收所有参数
                  // 根据实际情况对参数进行处理
                  String param1 = params.get("param1");  // 获取参数
                  String param2 = params.get("param2");
                  
                  // 处理参数并返回结果
              }
          }
          

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

          ---

          三、混合使用

          在工作开发vue使用vuex二次封装axios时， 传递参数。

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

          在二次封装axios 的 request.js

          export function finalHandle(payload) {
              const {url,that,formdata,efHandle}= payload
              return request({
                  url: '/uav/finalHandle',
                  method: 'post',
                  data:formdata,
                  params:efHandle,
                  timeout: 30000, // 设置超时时间为30秒
              })
          }
          

          后端Java接收：

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

          浏览器控制台：

          

          1）. 文件类传参

          如果上传一些参数 并且带有上传文件 后端java 怎么写接收？

          axios实例：

          在前端使用 axios 传递包含文件和其他参数的请求时，您可以使用 FormData 对象来构建请求体，并将文件和其他参数添加到 FormData 对象中。然后通过 axios 发送包含 FormData 对象的 POST 请求。以下是一个示例代码：

          // 假设参数 param1、param2 和文件 file 已经定义
          const formData = new FormData();
          formData.append('param1', param1);
          formData.append('param2', param2);
          formData.append('file', file);
          axios.post('/uploadWithParams', formData, {
              headers: {
                  'Content-Type': 'multipart/form-data'
              }
          })
          .then(response => {
              // 请求成功处理逻辑
          })
          .catch(error => {
              // 请求失败处理逻辑
          });
          

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

          

          在java 接收文件参数：

          后端是根据"file" 来进行取值(@RequestParam(“file”) 或者@RequestBody MultipartFile file)

              @ResponseBody
              @PostMapping(value = "/uploadMediaResults")
              public Result uploadMediaResults(@RequestParam String param1, @RequestParam String param2,@RequestBody MultipartFile file, HttpServletRequest request) {
                  try {
          //
          @RestController
          public class YourController {
              @PostMapping("/uploadWithParams")
              public ResponseEntity handleFileUploadWithParams(@RequestParam String param1, @RequestParam String param2, @RequestPart MultipartFile file) {
                  // 处理上传的文件和其他参数
              }
          }
          

          在这个示例中，我们使用 @RequestParam 注解来接收表单中的参数 param1 和 param2，使用 @RequestPart 注解来接收上传的文件。请注意，@RequestPart 注解不要求指定参数名，它将会自动匹配文件部分。

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

          @RestController
          public class YourController {
              @PostMapping("/uploadWithParamsAndMultipleFiles")
              public ResponseEntity handleFileUploadWithParamsAndMultipleFiles(@RequestParam String param1, @RequestParam String param2, @RequestPart("files") MultipartFile[] files) {
                  // 处理上传的多个文件和其他参数
              }
          }
          

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

          总结

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

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

          总的来说，data 适用于传递请求体中的数据，而 params 适用于传递 URL 查询参数。根据不同的需求和请求类型选择合适的参数传递方式可以更好地完成相应的 HTTP 请求。

          前端传递使用 FormData 或者 params参数 后端java 都可以使用 @RequestParam 接收 ; 当参数较多或者不明确可以使用Map 接收所有的参数，并在后端对 Map 中的参数进行解析 ( @RequestParam Map params)