如果使用較短的語法，Promise（axios 請求）在 catch 塊中被記錄為掛起

Question

不幸的是，我似乎找不到一個看似簡單的初學者問題的答案（嘗試學習一些 Javascript）。

我在示例反應應用程序中運行了此代碼（本地主機上的此路徑不存在）：

const promise2 = axios.get('http://localhost:3001/foobar').then(response => {
   // do nothing
}).catch((err) => {
   console.log(promise2)
})

這會在 Firefox 開發人員版 (76.0b5) 中記錄Promise { <state>: "pending" }

如果我將代碼更改為

const promise2 = axios.get('http://localhost:3001/foobar')
promise2.then(response => {
   // do nothing
}).catch((err) => {
   console.log(promise2)
})

這會記錄Promise { <state>: "rejected" }我認為在這兩種情況下都應該如此。

為什么？

Answer 1

在您的第一個示例中， promise2是調用的結果：

const promise2 = axios.get(...).then(...).catch(...)

而且，它是一個新的 promise，與axios.get()返回的不同，它直到.catch()或 .then( .then()處理程序運行后才被解析，因為它的解析值或被拒絕的原因取決於.then( .then()或.catch()處理程序。

鏈中的每個步驟都會返回一個新的 promise，直到它在鏈中的每個之前的每個步驟都已解決並且此特定處理程序已被執行（或繞過）之前，它才會被解決。

所以，在這個鏈中：

const promise2 = axios.get(...).then(...).catch(...)

您從 axios.get() 獲得第一個 promise，然后從axios.get() .then()另一個，然后從.catch()獲得另一個， promise2將包含來自.catch() () 的最后一個。 在整個鏈完成之前，最終的 promise 不會解決或拒絕。

---

在您的第二個示例中， promise2只是調用的結果：

const promise2 = axios.get()

因此，一旦axios()調用完成， promise2的值就會被知道，並且會在 .then( .then()或.catch()處理程序被調用時知道：

promise2.then().catch()

---

PS如果有人能指出我（在評論中）這些方法返回新對象的理由以及我可以用這些新對象做什么，我將不勝感激。

它與 promise 鏈接的工作方式有關。 為了實現多個.then()處理程序的鏈接，其中每個處理程序本身都可以包含返回新承諾的函數，您需要在鏈中創建中間承諾，這些承諾依賴於鏈中稍后發生的事情。

以下是其他一些相關的答案：

了解 javascript 承諾； 堆棧和鏈接

javascript promises中的執行順序是什么

promise.then.then 與 promise.then 之間有區別嗎？ promise.then

您通常不會自己對中間 promise 對象做任何事情，它們主要是為了使 promise 鏈接正常工作。 你通常會這樣做：

axios.get(...).then(...).catch(...)

並且不將任何承諾分配給任何變量。

Answer 2

Eldar （謝謝）幫助我了解意外（對我而言）日志消息的原因。

據我所知，.then( .then()和.catch()方法返回一個新的和不同的 Promise object。 I mistakingly thought that I work with the same Promise object I've gotten from axios.get(...) and just append handlers to it.

要確認您可以檢查此代碼：

const promise2 = axios.get('http://localhost:3001/foobar')
const promise21 = promise2.then(response => {
  // do nothing
}).catch((err) => {
   console.log(promise2)
   console.log(promise21)
})

哪些日志：

Promise { <state>: "rejected" }   index.js:26
Promise { <state>: "pending" }    index.js:27

PS如果有人能指出我（在評論中）這些方法返回新對象的理由以及我可以用這些新對象做什么，我將不勝感激。