對象數組的復雜解構

Question

考慮我有以下代碼發出 GET 請求；

const [
    {data: a},
    {data: b},
    {data: c},
    {data: d}
] = await Promise.all([
    axios.get('https://api.somesite.org/a.json'),
    axios.get('https://api.somesite.org/b.json'),
    axios.get('https://api.somesite.org/c.json'),
    axios.get('https://api.somesite.org/d.json')
]);

現在，因為它是通過 Axios，我假設響應總是完整的響應，對於 Promise.all，我們將得到一個如下所示的響應對象數組；

[{
data: {
    "a1": "1",
    "a11": "11"
},
headers: {},
status: 200
}, {
data: {
    "b2": "2",
    "b22": "22"
},
headers: {},
status: 200
}, {
data: {
    "c3": "3",
    "c33": "33"
},
headers: {},
status: 200
}, {
data: {
    "d4": "4",
    "d44": "44"
},
headers: {},
status: 200
}
]

現在，這就是我認為代碼的評估方式（我只需要確認以下步驟序列）：

首先執行數組解構語法，這意味着對於數組中的第一項，它被分配。 所以，實際上我們應該得到如下分配的第一個數組元素；

{data: a} = {
data: {
    "a1": "1",
    "a11": "11"
},
headers: {},
status: 200
}

其他 3 個數組元素也會發生同樣的事情

下一步將是 object 解構語法執行。 因此，從右側 object 開始，它將提取“數據”屬性值並將其分配給別名“a”

因此，實際上，變量“a”應該得到如下分配的 object；

{
    "a1": "1",
    "a11": "11"
}

我對上述代碼執行順序的理解是否正確？

Answer 1

我對上述代碼執行順序的理解是否正確？

是的。 最終， await ， promises 和 axios 的東西與此無關 - 最后，您剛剛獲得了一個帶有數組值的解構賦值。

數組解構通過迭代值、逐個元素分配到相應的目標模式來工作。