使用 promise 统一处理多个异步操作的返回结果

场景

假设存在一个接口 /api/chart，前端有一组 id 分别作为该接口的请求参数。需要请求接口若干次，并将返回的结果统一处理，用于图表显示。

参数数组

const ids = [1, 2, 3, 4, 5];

请求 promise 封装

接口请求函数基于 axios 封装，命名为 getChart。再将接口请求包装成一个 promise 对象。

genChartPromise (id) {
    const params = Object.assign({
        pie_id: id
    });
    
    return new Promise((resolve, reject) => {
        getChart(params).then(res => {
            if(res.ret === 'success') {
                resolve(res.data[0].series || [])
            } else {
                reject(new Error('请求图表数据失败...'))
            }
        })
    })
}

返回数据统一处理

使用 Promise.allSettled 处理所有的上一步生成的 promise。

function startAllPromise () {
    // 存放所有的 promise
    const promises = []
    // 根据 id 生成不同的 promise 对象
    ids.forEach(id => {
        promises.push(this.genChartPromise(id))
    })
    // 获取所有结果数据
    try {
        const allSettledPromise = Promise.allSettled(promises)
        allSettledPromise.then(results => {
            // results 是一个数组，存放着每个异步操作的返回结果
            console.log('返回结果：', results)
        })
    } catch {
        console.log('至少有一个请求失败了，其他请求还没有结束...')
    }
}