结合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()
©️2020 CSDN 皮肤主题: 技术黑板 设计师:CSDN官方博客 返回首页