Promise.all()处理多个并发请求（数组）

需求

有一个文章id数组[101, 102, 103, 104, 105, 106, 107, 108]
需要发起请求将每个id返回的文章列表按照数组顺序重新组成数组返回显示到页面上

实现

// 模拟文章分类列表
let articleLists = [
    {
        id: 101,
        category: '娱乐',
        list: [
            {
                id: 1,
                title: '戚薇一家三口现身澳洲度假 8岁lucky染粉色发尾'
            },
            {
                id: 2,
                title: '赵本山女儿球球首晒4个月孕肚，网友猜测宝宝性别'
            }
        ]
    },
    {
        id: 102,
        category: '体育',
        list: [
            {
                id: 3,
                title: '女足世界杯惨案！日本4-0西班牙 4次反击破门'
            },
            {
                id: 4,
                title: '观察｜中国女足如何击败欧洲冠军英格兰？她们的左路有漏洞'
            }
        ]
    },
    {
        id: 103,
        category: '音乐',
        list: [
            {
                id: 5,
                title: '刀郎被神化了吗？'
            },
            {
                id: 6,
                title: '一个摇滚青年的音乐节梦'
            }
        ]
    }
]

// 模拟文章分类id数组
let articleIds = [101, 102, 103]

// 模拟根据文章分类 ID 请求文章分类列表接口
const fetchArticleList = function(articleId) {
    return new Promise((resolve, reject) => {
        articleLists.map(item => {
            if(item.id === articleId) {
                resolve(item.list)
            }
        })
        
    })
}

// 声明 Promise 实例数组
let promiseLists = []

// 将id数组遍历封装成 Promise 实例数组
promiseLists = articleIds.map(id => {
    return new Promise(async resolve => {
        resolve(await fetchArticleList(id))
    })
})

// Promise.all 发起并列请求
Promise.all(promiseLists).then(res => {
    // 组合成的最新的文章列表数组
    let newArticleList = []
    res.map(item => {
        newArticleList.push(...item)
    })
    console.log(newArticleList)
})

需要注意的点是：Promise.all()只有所有的请求成功返回的时候，这个res结果才能返回，否则状态会一直等待，res并不能成功拿到数据