慢慢閱讀程式碼，並根據需要跟隨資訊流和資訊格式的變更

概述

Axios 是一個流行的 JavaScript 程式庫，用於從瀏覽器和 Node.js 發出 HTTP 請求。它是一個開源項目，旨在簡化向 REST 端點發送非同步 HTTP 請求以及執行 CRUD（建立、讀取、更新、刪除）操作的過程。

創作者

Axios 由 Matt Zabriskie 創建。該專案由社區維護，可在 GitHub 上取得。

受益人

Axios 有利於：

• 前端開發人員：用於從Web應用程式發出HTTP請求。
• 後端開發人員：用於在 Node.js 應用程式中整合 HTTP 請求。
• 全端開發人員：用於在客戶端和伺服器端處理HTTP請求。

優點

1. 基於 Promise：讓非同步請求和回應的處理變得更加容易。
2. 攔截器：允許在處理請求或回應之前對其進行修改。
3. 自動 JSON 資料轉換：簡化 JSON 資料的處理。
4. CSRF 保護：幫助跨站點請求偽造保護。
5. 請求和回應轉換：請求和回應的自訂轉換。
6. 錯誤處理：與其他方法相比，簡化了錯誤處理。
7. 廣泛的瀏覽器支援：適用於所有現代瀏覽器和 Node.js。

用法

使用地點

• Web 應用程式：與後端服務通訊。
• Node.js 應用程式：向其他 API 或服務發出 HTTP 請求。
• 行動應用程式：作為 React Native 等框架的一部分。

失敗的地方

1. 重型應用程式：由於記憶體消耗，可能不是非常大的資料傳輸的最佳選擇。
2. 瀏覽器限制：除非正確處理 CORS，否則受同源策略限制。
3. 依賴項大小：需要管理的額外依賴項，這可能是簡約專案的問題。

為什麼要使用它

• 易於使用：用於執行 HTTP 請求的簡單 API。
• 靈活性：易於配置和擴展。
• 社區支持：廣泛採用和廣泛的社區支持。

為什麼不使用它

• 庫大小：新增另一個相依性的開銷。
• 替代方案：優先選擇 Fetch API 或其他函式庫（如 request 或 superagent）。

如何使用

安裝

npm install axios

基本用法

const axios = require('axios');

// Performing a GET request
axios.get('https://api.example.com/data')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('Error fetching data:', error);
  });

詳細用法及註釋

const axios = require('axios');

// Create an instance of axios with default settings
const instance = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 1000,
  headers: { 'X-Custom-Header': 'foobar' }
});

// Interceptor to log request details
instance.interceptors.request.use(request => {
  console.log('Starting Request', request);
  return request;
});

// Interceptor to log response details
instance.interceptors.response.use(response => {
  console.log('Response:', response);
  return response;
});

// Making a POST request
instance.post('/user', {
  firstName: 'Fred',
  lastName: 'Flintstone'
})
  .then(response => {
    console.log('User created:', response.data);
  })
  .catch(error => {
    console.error('Error creating user:', error);
  });

濫用範例

1. 忽略錯誤處理：不正確處理錯誤可能會導致應用程式崩潰。

axios.get('https://api.example.com/data')
  .then(response => {
    console.log(response.data);
  });
// Error handling should not be omitted

1. 使用同步請求阻止代碼：Axios 不支援同步請求，以期望同步行為的方式使用它是不正確的。

方法

實例方法

• axios(配置)
• axios(url[, 設定])

請求方法

• axios.request(配置)
• axios.get(url[, 設定])
• axios.delete(url[, 配置])
• axios.head(url[, 配置])
• axios.options(url[, 設定])
• axios.post(url[, 資料[, 設定]])
• axios.put(url[, 資料[, 設定]])
• axios.patch(url[, 資料[, 設定]])

便捷方法

• axios.all(可迭代)
• axios.spread(回呼)

建立實例

• axios.create([配置])

攔截器

• axios.interceptors.request.use(onFulfilled[, onRejected[, options]])
• axios.interceptors.response.use(onFulfilled[, onRejected[, options]])

配置預設值

• axios.defaults

取消

• axios.取消
• axios.CancelToken
• axios.isCancel

結論

Axios 是一個強大、易於使用的程式庫，用於在 JavaScript 應用程式中發出 HTTP 請求。它提供了強大的 API，具有請求和回應攔截、自動 JSON 轉換和基於 Promise 的架構等功能。然而，必須了解其限制並正確使用它以避免潛在的陷阱。