為什麼 `fetch().then().json()` 有時回傳 Promise，有時不回傳？

為什麼 .json() 回傳 Promise，但透過 .then() 則不回傳 Promise？

問題：
使用 Fetch API 時，觀察到 .json() 方法傳回在 .then() 處理程序的物件文字中使用時的 Promise 物件。但是，當不使用物件字面量時，它會直接傳回值。

答案：

關於Promises：

.json() 回傳一個Promise，因為當標頭可用時會收到HTTP 回應，但正文（在本例中， JSON) 尚未載入。 .json() 檢索正文的第二個 Promise，該 Promise 必須單獨載入。

關於 .then() 行為：

當從 a 返回 Promise 時.then() 回調，被外鏈採用。這意味著外部 .then() 將收到內部 Promise 的已實作值。在給定的範例中，外部 .then() 接收具有 data 和 status 屬性的對象，有效地使 data 屬性直接在 .then() 中可用。

替代解決方案：

要在一個.then() 處理程序中直接存取狀態和JSON 數據，您可以使用以下命令技巧：

• 使用嵌套的.then()區塊：

fetch(url)
  .then(response => response.json())
  .then(data => {
    console.log(response.status, data.title);
  });

• 使用async/await （需要非同步函數）：

const response = await fetch(url);
const data = await response.json();
console.log(response.status, data.title);

請記住在閱讀正文之前驗證回應狀態，因為它可能並不總是包含JSON 資料。

以上是為什麼 `fetch().then().json()` 有時回傳 Promise，有時不回傳？的詳細內容。更多資訊請關注PHP中文網其他相關文章！