獲取 API：它是什麼以及它與 WordPress REST API 的區別

已發表: 2019-07-08

JavaScript 以及 HTML 和 CSS 是關鍵的編程語言。幾乎網絡上的每個站點都使用 JavaScript，因此如果您想成為一名全面的開發人員，了解其原生應用程序編程接口 (API) 非常重要。

在這篇文章中，我們將向您介紹 Fetch API 及其功能。然後我們將討論它與 WordPress REST API 的不同之處，並解釋您何時可能希望在 WordPress 開發中使用它。

讓我們直接跳進去！

Fetch API 簡介

與所有 API 一樣，Fetch API 用於在應用程序之間發送和接收數據。顧名思義，它主要用於使用 HTTP 請求“獲取”資源，然後修改它們。這樣，它的工作方式與 XMLHttpRequest 非常相似。

但是，Fetch API 提供了對該方法的改進，通過使用更簡潔的代碼來實現相同的最終結果。它通過以“承諾”的形式返回數據來實現這一點，這是一種簡化的、更具可讀性的解決方案，它取代了回調，使開發人員能夠按特定順序執行 JavaScript 函數。

本質上，promise 聲明某個動作最終會發生，並提供有關接下來會發生什麼的信息。承諾總是“已解決”（導致響應）或“拒絕”（導致錯誤）。

如果承諾被解決，一個.then處理程序執行指定的操作。如果承諾被拒絕，則可能會使用.catch函數顯示錯誤消息。由於 JavaScript 是異步的，所有這些都在後台發生，而不會阻止頁面的其餘部分呈現。

因此，當我們將所有這些放在一起時，我們會得到一個 API，它可以將資源作為 Promise 進行檢索。然後，如果這些承諾得到解決，它就會返迴響應對象，如果它們被拒絕，則返回錯誤。您還可以添加。然後或.catch處理程序來緊跟另一個動作的響應或錯誤。

這是一個簡單的示例：假設您使用 Fetch API 來檢索帖子列表。發布數據作為承諾返回，該承諾被解析並產生響應對象。接下來，您使用.then處理程序將該響應作為 JSON 返回，您可以將其顯示在您的網站上。如您所見，此 API 提供了很多潛力，尤其是對於特定應用程序。

Fetch API 與 WordPress REST API 有何不同

簡而言之，除了它們都是 API 之外，Fetch API 和 WordPress REST API 在幾乎所有方面都不同。一些關鍵的區別包括：

Fetch API 以承諾形式返回數據，而 WordPress API 以 JSON 形式返回數據。
同樣，您必須使用.then處理程序將 Fetch API 返回的數據轉換為 JSON。
您可以通過 Fetch API 以 JSON 以外的形式返回數據。
為了在 WordPress REST API 中使用 promise，您需要在調用 API 後自己編寫它們。

如果您想在 WordPress 中使用 Fetch API，您只需在 JavaScript 代碼中調用 fetch 函數。使用.then處理程序跟隨該函數以訪問內容。然後，您可以在您的網站或 Web 應用程序中顯示它。

2 次您可能希望通過 REST API 使用 Fetch API

通過使用 WordPress REST API，您可能可以使用 Fetch API 完成您可能想做的任何事情。但是，Fetch API 確實提供了一些無法通過本機 WordPress API 訪問的便捷功能。讓我們看兩個例子。

1. 返回一個不是 JSON 的響應

正如我們已經提到的，當您使用 WordPress REST API 時，它默認返回 JSON 數據。但是，有時您可能需要不同形式的回复。要使其與 WordPress API 一起工作，您必須將 JSON 轉換為您想要的格式。

另一方面，Fetch API 能夠以多種不同格式返回數據。雖然 JSON 可能是 Fetch API 響應最流行的形式，但您也可以使用它來返回各種其他格式的響應，包括 XML、HTML、純文本和 blob。

為此，您只需更改.then處理程序中指定的響應方法，用於訪問已檢索的內容。例如，這是一個非常簡化的 Fetch API 調用，後跟一個以 JSON 形式返迴響應的.then處理程序：

 fetch('https://jsonplaceholder.typicode.com/todos')
  .then(response => response.json())
  .then(data => console.log(JSON.stringify(data)))

因此，如果您想將數據作為 XML 返回，則可以使用response.text而不是response.json 。這比使用 WordPress REST API 檢索數據後執行轉換要容易得多。

2. 使用 Promise 以特定順序執行函數

此外，如果您想對 WordPress REST API 調用的響應使用承諾，那麼簡單地使用 Fetch API 可能會更有效。使用 WordPress API，您需要在請求和響應之後編寫自己的承諾，而 Fetch API 會為您返回承諾。

如果您使用 API 來請求數據，然後想使用 JavaScript 函數對這些數據執行其他操作，那麼 Fetch API 可能是您要走的路。例如，考慮這個例子：

 var eventsURL = "https://api.seatgeek.com/2/events?q=amway-center&client_id=MTI3NjI2NjF8MTUzNDYxMjQ1MS4zNA";

獲取（事件URL）
  .then((響應) => response.json())
  .then（函數（事件）{
  返回 evnt.events.map(function(event){
    var singleEvent = document.createElement('li');
    var eventDate = document.createElement('span');
    var newDate = moment(event.datetime_local).format('LLL');
    singleEvent.innerHTML = event.title;
    eventDate.innerHTML = newDate;
    追加（事件列表，單事件）；
    追加（單個事件，事件日期）；
  })

})
.catch（函數（錯誤）{
  console.log('獲取時出錯：' + error.message);
});

在這裡，我們可以通過向 Fetch API 返回的承諾添加.then處理程序來運行事件函數，以顯示來自站點 SeatGeek 的事件。承諾可以使用JavaScript容易得多，一個ð保持你的代碼更清潔，更具有可讀性。反過來，這可以使您的開發更加高效和有效。

結論

說到 Web 開發，如果沒有 JavaScript，您將走不遠。掌握其本機 API 將幫助您輕鬆檢索可以修改以在您的網站或 Web 應用程序上使用的資源。

在這篇文章中，我們討論了兩個您可能希望使用 JavaScript Fetch API 而不是 WordPress REST API 的示例：

返回非 JSON 的響應。 使用 Fetch API，您可以以多種格式返回數據，而 WordPress REST API 僅返回 JSON。
使用 promise 以特定順序執行函數。 由於 Fetch API 將數據作為承諾返回，因此您不必自己編寫。

您還有其他關於 Fetch API 的問題嗎？ 將它們留在下面的評論部分！

文章縮略圖圖片 Sudowoodo / shutterstock.com