結合async await,動態設定Promise.all()
為了演示動態設定promise,這裡模擬一個需求:
有一組使用者列表,前端需要通過使用者列表的使用者id去獲取使用者崗位,獲取到崗位id後再通過該id去獲取崗位狀態,具體邏輯看以下程式碼:
// 模擬介面定義
// 獲取使用者列表資訊,包括id,name
const getIdApi = function() {
return new Promise(function(resove, reject) {
const data = [{id: '001', name: '001'}, {id: '002', name: '002'}, {id: '003', name: '003'}]
resove(data)
})
}
// 根據使用者id獲取使用者崗位job欄位
const getJobId = function(id) {
return new Promise(function(resove, reject) {
const data = id + 'job'
resove(data)
})
}
// 根據崗位id獲取崗位狀態
const getJobStatus = function(id) {
return new Promise(function(resove, reject) {
const data = id + 'Status'
resove(data)
})
}
// 資料定義
let data = {
ids: [],
jobIds: [],
statusIds: []
}
// 獲取使用者列表
function getIdData() {
getIdApi().then(res => {
data.ids = res.map(item => (item.id))
getStatus()
})
}
async function getStatus() {
// 定義崗位方法陣列
const jobP = []
// 根據使用者id迴圈配置jobP
for (let id of data.ids) {
jobP.push(getJobId(id))
}
data.jobIds = await Promise.all(jobP)
// 獲取到所有資料後進行下一步
// 定義崗位狀態方法陣列
const statusP = []
// 根據崗位id迴圈配置statusP
for (let id of data.jobIds) {
statusP.push(getJobStatus(id))
}
data.statusIds = await Promise.all(statusP)
// 獲取到最後狀態值做相應操作即可
data.statusIds.forEach((item, index) => {
if (item === '002jobStatus') {
data.jobIds.splice(index, 1)
}
})
}
getIdData()
相關文章
- Async/Await 代替 Promise.all()AIPromise
- 面試向:Async/Await 代替 Promise.all()面試AIPromise
- async/await 和 promise/promise.all 的示例AIPromise
- Async +AwaitAI
- Async/awaitAI
- Generator與Promise的完美結合 -- async await函式誕生記PromiseAI函式
- 「過程詳解」async await綜合題AI
- promise以及async、await學習總結PromiseAI
- async和awaitAI
- 理解 async/awaitAI
- 研究c#非同步操作async await狀態機的總結C#非同步AI
- 【譯】Async/Await(三)——Aysnc/Await模式AI模式
- async await詳解AI
- 淺談async/awaitAI
- JavaScript async await 使用JavaScriptAI
- JavaScript Promises, async/awaitJavaScriptPromiseAI
- 非同步程式設計新方式async/await非同步程式設計AI
- Flutter非同步程式設計-async和awaitFlutter非同步程式設計AI
- 小程式使用 async awaitAI
- 理解JavaScript的async/awaitJavaScriptAI
- 深入理解 async / awaitAI
- WPF WebClient EAP async awaitWebclientAI
- 重學JS:async/awaitJSAI
- 理解Task和和async awaitAI
- 理解 js的 async/awaitJSAI
- [Javascript] Promise question with async awaitJavaScriptPromiseAI
- async和await的使用AI
- 【譯】Async/Await(二)——FuturesAI
- await is only valid in async functionAIFunction
- 【譯】Async/Await(四)—— PinningAI
- JS非同步程式設計之async&awaitJS非同步程式設計AI
- async和await的使用總結 ~ 竟然一直用錯了c#中的async和await的使用。。AIC#
- [譯]JavaScript Symbols, Iterators, Generators, Async/Await, and Async IteratorsJavaScriptSymbolAI
- C# 同步 非同步 回撥 狀態機 async await DemoC#非同步AI
- JS非同步程式設計——深入理解async/awaitJS非同步程式設計AI
- JavaScript非同步程式設計–Generator函式、async、awaitJavaScript非同步程式設計函式AI
- JS非同步程式設計 (2) – Promise、Generator、async/awaitJS非同步程式設計PromiseAI
- C# 非同步程式設計Task(三) async、awaitC#非同步程式設計AI