背景

我使用下拉框實現選擇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數組中。