使用一个接口的结果作为第二个接口的参数并将两者的数据放置成下拉框的格式

背景

我使用下拉框实现选择id
但是只有两个接口 一个是所有的id 另一个是id对应的具体信息 我想把id传入另一个接口并且获取其name然后写成类似这样的数组
[
{
value: 1,
label: ‘名称1’
}，
{
value: 2,
label: ‘名称2’
}
{
value: 3,
label: ‘名称3’
}
]
然后传入options作为下拉框的数据

实现

起初我想着在第一个接口的then里面直接调用第二个接口 但是发现不行 因为我使用了直接赋值的操作
即
getSites().then((response) => {
const transformedData = response.data.map(item => ({
value: item.id,
label: item.name
}));
options1.value = transformedData
})
所以在里面直接俄调用接口是错误的
然后试着把第二个接口封装成一个类 然后供第一个接口调用 ，发现还是不行 因为接口方法返回的值都是promise

解决

使用Promise.all(promises)进行异步操作
其实内核很简单 就是把id传进接口二中然后输出为一个数组 再从数组中一个一个拿 并且里面的方法也是写在外面了 唯一不同的是将里面的id截取出来了
jianshigetGroups().then((response) => {
const groupIds = response.data.map(item => item.id);
const promises = groupIds.map(id => getGroupName(id));

Promise.all(promises).then(names => {
  const transformedData = response.data.map((item, index) => ({
    value: item.id,
    label: names[index]
  }));
  console.log(transformedData);
  options2.value = transformedData;
}).catch(error => {
  console.log(error);
});

});

const getGroupName = (id) => {
return jianshigetGroupDetail(id).then((response) => {
return response.data.name;
});
};

拓展

Promise.all(promises)是一个用于处理一组Promise对象的方法。它接收一个Promise对象数组作为参数，并返回一个新的Promise对象。

当调用Promise.all(promises)时，它会等待所有的Promise对象都被解决（即状态变为resolved）或有一个Promise对象被拒绝（即状态变为rejected）。只有当所有的Promise对象都被解决时，返回的Promise对象才会被解决，并且它的解决值是一个包含了所有Promise对象解决值的数组。

如果其中一个Promise对象被拒绝，返回的Promise对象会立即被拒绝，并且它的拒绝值是第一个被拒绝的Promise对象的拒绝值。

一旦返回的Promise对象被解决或被拒绝，就可以使用.then()和.catch()等方法来处理它的解决值或拒绝值。

在这段代码中，Promise.all(promises)用于等待所有的getGroupName(id)函数的异步操作完成，并将它们的解决值（群组名称）存储在names数组中。