Axios 與 Fetch

葡萄牙語版

Axios 和 Fetch 是在 JavaScript 中發出 HTTP 請求的流行工具，但它們有一些關鍵的差異。總結如下：

阿克西奧斯

• 內建功能：Axios 具有許多內建功能，例如自動 JSON 轉換、請求和回應攔截器以及請求取消。
• 瀏覽器相容性：支援舊版瀏覽器，包括 Internet Explorer。
• 錯誤處理：Axios 會自動拒絕 HTTP 錯誤狀態（例如 404 或 500）的 Promise，讓錯誤處理更容易。
• 請求/回應攔截器：允許您以簡單的方式全域修改請求或回應。
• 請求取消：Axios 提供了一種簡單的方法來取消請求。

拿來

• 原生 API：Fetch 是原生 Web API，這表示無需安裝額外的函式庫。
• Promise-Based：使用Promise，但需要手動檢查回應狀態是否有錯誤。
• 串流處理：Fetch 支援流，這對於處理大型回應非常有用。
• 更多控制：提供對請求的更多控制，但需要更多額外代碼來實現設定模式或攔截請求等功能。
• 沒有內建對 JSON 的支援：您需要在回應物件上呼叫 .json() 來解析 JSON 資料。

使用案例

• 如果您需要一組豐富的開箱即用功能，特別是對於複雜的應用程序，請使用 Axios。
• 使用 Fetch 來實現更簡單的用例或當您想避免外部依賴時。

使用範例

Axios：

axios.get('/api/data')
  .then(response => console.log(response.data))
  .catch(error => console.error(error));

const options = {
  url: 'http://localhost/test.htm',
  method: 'POST',
  headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/json;charset=UTF-8'
  },
  data: {
    a: 10,
    b: 20
  }
};
axios(options)
  .then(response => {
    console.log(response.status);
  });

取得：

fetch('/api/data')
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json();
  })
  .then(data => console.log(data))
  .catch(error => console.error(error));

const url = "https://jsonplaceholder.typicode.com/todos";
const options = {
  method: "POST",
  headers: {
    Accept: "application/json",
    "Content-Type": "application/json;charset=UTF-8",
  },
  body: JSON.stringify({
    a: 10,
    b: 20,
  }),
};
fetch(url, options)
  .then((response) => response.json())
  .then((data) => {
    console.log(data);
  });

筆記：

• 為了傳送數據，fetch() 使用 POST 請求的 body 屬性，而 Axios 使用 data 屬性。
• 使用 JSON.stringify 方法將 fetch() 中的資料轉換為字串。
• axios 會自動轉換伺服器傳回的數據，但使用 fetch() 時，需要呼叫 response.json() 方法將資料解析為 JavaScript 物件。
• 使用 Axios，可以在資料物件內存取伺服器提供的資料回應，而在 fetch() 方法中，最終的資料可以用任意變數命名。

結論

兩者都有各自的優點，選擇通常取決於您的特定需求和偏好。如果您正在建立具有大量 API 互動的大型應用程序，Axios 可以使某些任務變得更容易，而 Fetch 非常適合簡單的任務。

Axios 提供了一個使用者友善的 API，可以簡化大多數 HTTP 通訊任務。但是，如果您喜歡使用本機瀏覽器功能，您絕對可以使用 Fetch API 自行實現類似的功能。

如我們所探索的，使用瀏覽器中可用的 fetch() 方法複製 Axios 的核心功能是完全可行的。包含客戶端 HTTP 庫的決定最終取決於您對本機 API 的舒適度以及專案的特定要求。

更多資訊：https://medium.com/trainingcenter/axios-ou-fetch-765e5db9dd59

以上是Axios 與 Fetch的詳細內容。更多資訊請關注PHP中文網其他相關文章！