JavaScript并发控制：依次获取并发请求结果的方法

在JavaScript开发中，处理并发请求是常见需求。有时我们需要发起多个并发请求，然后依次获取它们的结果，以进行后续处理。这在很多场景下都非常实用，比如批量获取数据并按顺序展示等。

传统回调地狱方法

早期，我们可能会使用回调函数来处理多个请求。假设有三个并发请求函数 request1、request2、request3。我们可能会这样写代码：

request1(function(result1) {
    request2(function(result2) {
        request3(function(result3) {
            // 依次处理结果
            console.log(result1, result2, result3);
        });
    });
});

这种方式虽然能实现依次获取结果，但代码结构混乱，可读性差，也就是所谓的“回调地狱”。随着请求数量增加，代码维护成本急剧上升。

Promise链式调用

ES6引入的Promise为解决这个问题提供了更好的方案。我们可以将请求函数封装成Promise，然后通过链式调用依次处理结果：

function request1() {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve('result1');
        }, 1000);
    });
}
function request2() {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve('result2');
        }, 1000);
    });
}
function request3() {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve('result3');
        }, 1000);
    });
}
request1()
 .then(result1 => {
        console.log(result1);
        return request2();
    })
 .then(result2 => {
        console.log(result2);
        return request3();
    })
 .then(result3 => {
        console.log(result3);
    });

这种方式代码结构清晰，可读性增强。通过 .then() 方法依次处理每个请求的结果。

async/await语法糖

ES8的async/await是基于Promise的更简洁语法。它让异步代码看起来更像同步代码：

async function runRequests() {
    try {
        const result1 = await request1();
        console.log(result1);
        const result2 = await request2();
        console.log(result2);
        const result3 = await request3();
        console.log(result3);
    } catch (error) {
        console.error(error);
    }
}
runRequests();

await 关键字会暂停函数执行，直到Promise被解决，然后返回Promise的结果。这样我们可以更直观地依次获取并发请求的结果。

通过这些方法，我们可以根据项目需求选择合适的方式来依次获取并发请求结果，提高代码的质量和可维护性。