為什麼 Fetch 的 .json() 方法有時會回傳 Promise，有時會回傳值？

探索 Fetch 的 .json() 方法中的 Promise 行為

在探索 Fetch API 時，.json() 方法出現了一個有趣的怪癖。讓我們深入研究為什麼它在某些情況下返回一個 Promise，而在其他情況下返回一個直接值。

考慮以下程式碼片段：

fetch(url)
  .then(response => {
      return {
          data: response.json(),
          status: response.status
      }
  })
  .then(post => document.write(post.data));

這裡，post.data 產生一個Promise 對象，這表示第一個.then() 處理程序中的.json() 呼叫回傳一個承諾。

但是，如果我們修改程式碼以簡單地連結.json():

fetch(url)
  .then(response => response.json())
  .then(post => document.write(post.title));

post 現在成為一個對象，允許直接存取 title 屬性。

要解開這個謎團，我們必須了解 Promise 的本質。 .json() 啟動一個非同步操作，以 JSON 形式取得 HTTP 回應正文，並傳回一個承諾。這個 Promise 代表 JSON 解析資料的最終可用性。

當 Promise 從 .then() 處理程序返回時（如第一個範例），Promise 繼續存在於鏈中。但是，當傳回一個值時（如第二個範例所示），promise 被視為“已履行”，並且傳回的值將被採用作為外部 .then() 的結果。

為了處理這種情況，您可以使用巢狀的.then()s:

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

連結承諾，或使用現代非同步關鍵字，例如async 和wait:

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

請記住在嘗試解析JSON 之前始終檢查HTTP 回應狀態，因為它可能不會總是採用預期的格式。

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