在JavaScript中实现同步并发的两个 fetch 请求

myrgd 2周前其他 22

在JavaScript中，可以通过 Promise.all 或 async/await 来实现同步并发的两个 fetch 请求。这种方式允许两个请求同时开始，且当两者都完成后再进行下一步操作。

以下是一个示例：

使用 `Promise.all`

const fetchData = async () => {
    try {
        // 创建两个 fetch 请求
        const request1 = fetch('https://api.example.com/data1');
        const request2 = fetch('https://api.example.com/data2');

        // 等待两个请求同时完成
        const [response1, response2] = await Promise.all([request1, request2]);

        // 解析返回的 JSON 数据
        const data1 = await response1.json();
        const data2 = await response2.json();

        // 同步使用两者的数据
        console.log('Data 1:', data1);
        console.log('Data 2:', data2);
    } catch (error) {
        console.error('Error:', error);
    }
};

fetchData();

使用 `async/await` 手动控制

虽然 Promise.all 是更常用的方式，但如果需要逐步处理每个请求的结果，可以通过 async/await 手动控制：

const fetchData = async () => {
    try {
        // 并发开始两个请求
        const request1 = fetch('https://api.example.com/data1');
        const request2 = fetch('https://api.example.com/data2');

        // 等待第一个请求完成
        const response1 = await request1;
        const data1 = await response1.json();

        // 等待第二个请求完成
        const response2 = await request2;
        const data2 = await response2.json();

        // 使用两者的数据
        console.log('Data 1:', data1);
        console.log('Data 2:', data2);
    } catch (error) {
        console.error('Error:', error);
    }
};

fetchData();