遍历 id 数组，每次发出单独的请求

Question

我有一个这样的 api 端点，我需要向这个端点发出一个放置请求。

api/user-group/{id}/invite/{userId}

我遇到的问题是我的表单包含一个多列表、反应选择列表，允许用户选择任意数量的组，因此每次用户选择一个组时，我都会将组 ID 存储在本地状态中，但我的 api 端点只接受一个组 ID。我认为解决方案是遍历组 ID 并执行单独的请求。有人可以指导我如何实现此解决方案，或者是否有更好的解决方案？

我的代码：

const AddUserToGroupPage = () => {
const [currentUserId, setCurrentUserId] = useState('');
const [GroupIds, setGroupIds] = useState([]); 
const { inviteUserToGroup } = useUserGroupApi();

const InviteExistingUser = async () => {
const body = {};
const res = await inviteUserToGroup({
id: groupIds,
body,
userId: currentUserId,
});
return res;
};
const onGroupsSelected = (selected) => {
if (selected) {
setGroupIds(selected.map((select) => select.value));
}
};
return (
<>
<Select
name="userGroups"
label="User Groups"
placeholder="Select as many groups as you want"
id="userGroups"
defaultOptions
options={groups}
isMulti
onSelectChange={onGroupsSelected}
/>
</>
)
}

Answer 1

我认为你可以像这样实现你想要的：

const InviteExistingUser = async () => {
const body = {};
return await Promise.all(
groupIds.map((groupID) => {
return inviteUserToGroup({
body,
id: groupID,
userId: currentUserId,
});
}),
);
};

在此代码中，对groupIds.map()的调用将返回一个 Promise 列表，每个承诺解析为对inviteUserToGroup调用的返回值(每个组 ID 一个结果)。

然后，您可以将该列表传递给Promise.all，这将返回解析为结果列表的 Promise。所以基本上你从Promise<result>[](承诺列表)到Promise<result[]>(一个列表的承诺)。

然后，您可以await该承诺，此时您最终会得到所有调用的结果列表inviteUserToGroup.

Answer 2

您有 3 个选项：

1. 每次触发一个请求

GroupIds.forEach(g => {
const body = {};
const res = await inviteUserToGroup({
id: g.id,
body,
userId: currentUserId,
});
// save response
setGroupsInfo(prev => [...prev, res]
})

2. 一起触发所有请求

const requests = GroupIds.map(g => {
return inviteUserToGroup({
id: g.id,
body,
userId: currentUserId,
});
})
Promise.all(requests).then(resArray => {
setGroupsInfo(resArray)
})

3. 发射一堆(也许是 5 个)请求，等到它们结束，然后发射更多一个，依此类推。

// take 5 each time
for(let i = 0; i < GroupIds.length; i += 5){
const subGroupsIds = GroupIds.slice(i, i + 5);

// fire 5 requests
const requests = subGroupsIds.map(g => {
return inviteUserToGroup({
id: g.id,
body,
userId: currentUserId,
});
})
// wait for the 5 requests
const resArr = await Promise.all(requests);
setGroupsInfo(prev => [...prev, ...resArr]);
}

第二个选项是最糟糕的，因为您可能有这么多组，并且您不能同时请求所有组。

第三个选项是最佳选项，但它的实现并不简单。

第一个选项很容易，但是在大量组上会很慢。