优秀企业建站天台网站建设

解析 ID 数组传参的解决方案：基于 Axios 的实现

在实际开发中，经常需要将一个 ID 数组作为参数传递给后端接口。然而，不同的后端框架和前端库对数组参数的处理方式可能有所不同。通过一个具体的例子，在前端使用 Axios 框架发送 ID 数组，并在后端正确接收和处理这些参数。

请求的URL示例：/admin/lzWithdrawal//setTransfer/batch?ids=1,2,3
注意：
URL query请求方式(即？ids=1,2,3)与
前端的 params: { ids },
paramsSerializer: (params) => qs.stringify(params, { arrayFormat: ‘comma’ }),
后端的@RequestParam(“ids”) List ids
是一组固定搭配。
少加 任意一个，或者写成@RequestBody 、少加paramsSerializer ，都有可能联调失败
如果改成@RequestBody 即请求体传参，该文章不适用

前端代码：使用 Axios 发送 ID 数组

假设我们有一个批量转账的功能，需要将一组 ID 传递给后端接口。以下是前端代码的实现：

import axios from 'axios';
import qs from 'qs';export function batchTransfer(ids) {return axios({url: '/admin/lzWithdrawal/setTransfer/batch',method: 'post',params: { ids },paramsSerializer: (params) => qs.stringify(params, { arrayFormat: 'comma' }),});
}

代码解析

1. 引入 Axios 和 qs

   • axios 是一个基于 Promise 的 HTTP 客户端，用于浏览器和 node.js。
   • qs 是一个用于序列化和解析 URL 查询字符串的库，它可以帮助我们将数组参数正确地转换为查询字符串。

2. 构造请求

   • 我们使用 axios 构造了一个 POST 请求，目标 URL 是 /admin/lzWithdrawal/setTransfer/batch。
   • params 是一个对象，包含我们要传递的参数。在这个例子中，我们只传递了一个名为 ids 的数组。
   • paramsSerializer 是一个函数，它将 params 对象序列化为查询字符串。我们使用了 qs.stringify 方法，并设置了 arrayFormat: 'comma'，这表示数组参数将以逗号分隔的形式发送（例如 ids=1,2,3）。

后端代码：接收和处理 ID 数组

后端代码使用了 Spring Boot 框架，以下是对应的控制器方法：

import org.springframework.web.bind.annotation.*;
import java.util.List;@RestController
@RequestMapping("/admin/lzWithdrawal")
public class WithdrawalController {@PostMapping("/setTransfer/batch")public R setTransferBatch(@NotEmpty @RequestParam("ids") List<Long> ids) {ids.parallelStream().forEach(id -> {withdrawalService.lambdaUpdate().eq(TpLzWithdrawal::getId, id).set(TpLzWithdrawal::getStatus, 2).update();});return R.ok(true);}
}

代码解析

1. @RequestParam 注解

   • @RequestParam("ids") 表示从请求的查询参数中获取名为 ids 的参数，并将其绑定到方法参数 List<Long> ids 上。
   • Spring Boot 默认会将逗号分隔的字符串解析为数组或列表，因此前端发送的 ids=1,2,3 会被正确解析为一个 List<Long>。

2. 并行流处理

   • 使用 ids.parallelStream() 创建一个并行流，对每个 ID 进行处理。
   • 在流的 forEach 方法中，我们调用了 withdrawalService 的 lambdaUpdate 方法，更新对应 ID 的状态。

前端调用
假设我们有一个 ID 数组 [1, 2, 3]，调用 batchTransfer 方法：

batchTransfer([1, 2, 3]).then(response => {console.log('Success:', response.data);}).catch(error => {console.error('Error:', error);});

请求的URL示例：/admin/lzWithdrawal//setTransfer/batch?ids=1,2,3