es6中promise all如何保证return顺序

Question

我正在使用 ES6 JavaScript 并根据返回顺序进行 API 调用。 http客户端是axios。一位同事指示我使用 Promise.all()。它有效并且我知道它保证，但我不确定如何它可以保证结果是有序的。我的理解是不保证异步请求！我的简化代码是：

Promise.all([
    axios.get('/cars'),
    axios.get('/road-conditions')
]).then(values => {

    this.cars = values[0]
    this.roadConditions = values[1]

})

我想了解如何 values 知道哪个请求是哪个。这是 Axios 的特殊功能吗？

Answer 1

没有什么绝妙的技巧：Promise.all 只是记住承诺的索引并将该承诺的结果保存到它构建的数组中的正确位置。它不只是使用 push 来构建数组（因为那样确实会很混乱）。

这是一个向您展示非常大致幕后情况的示例：

function randomDelay(val) {
    return new Promise(resolve => {
        setTimeout(
            resolve,
            Math.random() * 1000,
            val
        );
    });
}

// See: https://tc39.es/ecma262/#sec-performpromiseall
function fakeAll(iterable) {
    return new Promise((resolve, reject) => {
        const values = [];
        let remainingElementsCount = 1;
        let index = 0;
        for (const value of iterable) {
            const thisIndex = index;     // Remember the index for this result
            Promise.resolve(value)       // To handle thenables and raw values
            .then(val => {
                console.log(`values[${thisIndex}] = ${JSON.stringify(val)}`);
                values[thisIndex] = val; // <=== Notice use of `thisIndex`
                --remainingElementsCount;
                if (remainingElementsCount === 0) {
                    resolve(values);
                }
            }).catch(reject);
            ++remainingElementsCount;
            ++index;
        }
        --remainingElementsCount;
        if (remainingElementsCount === 0) {
            resolve(values);
        }
    });
}

// Pass in an iterable of promises, raw values, and thenables
fakeAll([
    randomDelay("one"),
    "two",                                      // Raw value
    randomDelay("three"),
    {then(cb) { cb("four"); }},                 // Synchronous thenable
    {then(cb) { setTimeout(cb, 20, "five"); }}, // Asynchronous thenable
])
.then(results => {
    console.log(results);
})
.catch(error => {
    console.error(error);
});

.as-console-wrapper {
  max-height: 100% !important;
}

Is this a special feature with axios? Thank you.

不，它由 Promise.all 的规范定义。

es6中promise all如何保证return顺序

How does promise all guarantee return order in es6

javascript

promise

ecmascript-6

axios