背景

我使用下拉框实现选择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数组中。