javascript - js如何在并发中同步两个fetch请求？

Question

请求A的结果是B的参数，所以AB只能是同步请求，但有假设有100个AB请求，如何构造并发请求呢？

const get_cover = async (guid) => {
    // ...
    let response = await fetch(url)
    let data = await response.text()
    // ... url 从data中解析
    response = await fetch(url)
    data = await response.text()
    
    return data
}


const get_covers = async () => {
    const promises = comics.map(async comic => {
        try {
            // 图片地址
            comic.cover = await get_cover(comic.url);
        } catch (error) {
            console.error(`Error fetching cover from ${comic.url}:`, error);
        }
    });

    await Promise.all(promises);
}

这个代码完全不行，等待时间太长了。

假设一组AB耗时2s，上面的代码需要等待近1min才能获得数据，我希望能获得一组AB就显示一张图片，类似并行处理同步的AB？

谢谢！

Answer 1

你用forEach不久行了?��

comics.forEach(async (comic, index) => {
    try {
        // 图片地址
        comic.cover = await get_cover(comic.url);
        // 每拿到一个图片url就渲染,不用等其他的头像拿到了,再渲染到页面
        // 伪代码,不知道你实际渲染在页面上是用的哪个变量来渲染的
        // 写这个代码意思下
        this.renderDataList[index].cover = comic.cover
    } catch (error) {
        console.error(`Error fetching cover from ${comic.url}:`, error);
    }
})

Answer 2

const pLimit = require('p-limit');
const limit = pLimit(20); // 这里设置并发限制为20，可以根据需要调整

const get_cover = async (guid) => {
    try {
        let response = await fetch(`https://example.com/api/a/${guid}`);
        let data = await response.text();
        let url = parseUrlFromData(data);
        response = await fetch(url);
        data = await response.text();
        return data;
    } catch (error) {
        console.error(`Error fetching cover for ${guid}:`, error);
        throw error;
    }
}

const get_covers_concurrently = async () => {
    const promises = comics.map(comic => limit(() => get_cover(comic.url).then(cover => {
        comic.cover = cover;
    }).catch(error => {
        console.error(`Error fetching cover from ${comic.url}:`, error);
    })));

    await Promise.allSettled(promises);
}