結合async await,動態設定Promise.all()

dearqz發表於2020-10-31

為了演示動態設定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()

相關文章