Axios 與 Fetch-js教程-PHP中文網

Axios 與 Fetch

DDD

發布： 2024-10-01 06:30:03

原創

649 人瀏覽過

Axios vs 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);
  });

登入後複製