Axios NPM 套件：安裝和發出 HTTP 請求的初學者指南

簡介

建立現代 Web 應用程式時，發出 HTTP 請求是獲取資料或向伺服器發送資料的核心任務。雖然 JavaScript 提供了 fetch API 作為處理這些請求的本機方式，但許多開發人員更喜歡使用 Axios npm package，這是一個功能豐富且直觀的程式庫。 Axios 透過提供可在瀏覽器和 Node.js 環境中無縫運作的基於 Promise 的 HTTP 用戶端來簡化流程。它對 async/await 的支援使程式碼更易於閱讀和維護，尤其是在處理多個請求時。

本部落格將幫助您開始使用 Axios npm 包，介紹如何安裝它以及如何使用它進行基本的 HTTP 操作，如 GET、POST 和 PUT。我們還將深入探討它的功能，以及為什麼它是開發人員的首選，而不是原生 fetch API 等替代方案。

什麼是 Axios？

Axios 是一個輕量級 JavaScript 函式庫，旨在使 HTTP 請求更簡單、更有效率。它作為基於承諾的客戶端運行，允許開發人員以更乾淨、更易於管理的方式處理非同步資料流。無論您是在瀏覽器還是 Node.js 環境中工作，Axios 都提供了與 API 互動的統一解決方案。

Axios 的特點

• 基於 Promise： 與 Promise 無縫協作，並支援 async/await 語法，以實現更簡潔的非同步程式碼。
• 自動 JSON 轉換： Axios 自動將 JSON 回應轉換為 JavaScript 對象，節省了手動解析資料的額外步驟。
• 請求和回應攔截器：它允許開發人員在處理請求或回應之前全域修改它們。
• 預設設定：您可以使用預先定義配置（如基本 URL 或標頭）來建立 Axios 實例，從而減少重複程式碼。
• 錯誤處理：提供強大的錯誤處理和詳細的錯誤訊息，讓偵錯更容易。

為什麼選擇 Axios 而不是 fetch？

雖然 fetch API 在 JavaScript 中原生可用，但 Axios 提供了多個優勢，使其成為首選：

1. 自動 JSON 處理： 使用 fetch，開發人員需要使用 response.json() 手動解析回應。 Axios 會自動執行此操作。

   // Using fetch
   fetch(url)
     .then(res => res.json())
     .then(data => console.log(data));

   // Using Axios
   axios.get(url)
     .then(response => console.log(response.data));

1. 請求攔截器： Axios 使開發人員能夠透過攔截器修改標頭或處理驗證令牌，而 fetch 原生不支援此功能。
2. 錯誤處理： Axios 提供了更詳細的錯誤對象，而 fetch 則將 404 或 500 等 HTTP 回應代碼視為成功請求，除非明確檢查。
3. 對舊版瀏覽器的支援： Axios 包含對舊版瀏覽器的內建支持，這與 fetch 不同，後者可能需要 polyfill。

這些功能與其易用性相結合，使 Axios npm 成為處理 HTTP 請求的可靠且對開發人員友好的工具。

如果您有興趣進行更深入的比較，我們還有另一篇博客，深入探討了 Axios 與 fetch 的細微差別，討論何時選擇其中一個。在這裡查看：Axios 與 Fetch：您應該為您的專案選擇哪一個？

如何安裝 Axios npm

開始使用 Axios npm 既快速又簡單。以下是在您的專案中安裝和包含 Axios 的逐步說明。

第 1 步：安裝 Axios

要使用Axios，您首先需要將其安裝到您的專案中。您可以使用 npm 或yarn 來完成此操作。

1. 使用 npm（節點套件管理器）： 在專案目錄中開啟終端機並執行以下命令：

   npm install axios

1. 使用紗線： 如果您使用 Yarn 作為套件管理器，請執行：

   yarn add axios

這會將 Axios 新增為 package.json 檔案的依賴項。

第 2 步：將 Axios 包含在您的專案中

安裝 Axios 後，您需要將其匯入 JavaScript 或 TypeScript 檔案。

1. 使用 CommonJS 語法： 如果您在 CommonJS 環境（例如 Node.js）中工作，則可以使用 require 包含 Axios：

   const axios = require('axios');

1. 使用 ES6 語法： 對於 ES6 模組或像 React 這樣的現代 JavaScript 框架，請如下匯入 Axios：

   import axios from 'axios';

這兩種方法都適用，取決於您的專案設定和 JavaScript 環境。

驗證安裝

這是一個簡單的程式碼片段，用於驗證 Axios 是否已正確安裝和匯入：

import axios from 'axios';

axios.get('https://jsonplaceholder.typicode.com/posts')
  .then(response => {
    console.log('Axios is working:', response.data);
  })
  .catch(error => {
    console.error('Error using Axios:', error);
  });

在您的專案中執行此程式碼，如果您看到控制台中記錄了提取的數據，則您已成功安裝並包含 Axios npm 到您的專案中。

4.使用 Axios 來理解 HTTP 方法

Axios 以其直覺的語法使處理 GET、POST、PUT 和 DELETE 等 HTTP 方法變得簡單。讓我們詳細探討這些方法，並透過範例示範如何使用它們。

4.1。取得請求

GET 請求用於從伺服器檢索資料。這是最常見的 HTTP 方法之一，通常用於取得清單、使用者設定檔或任何唯讀資料。

程式碼範例：

   // Using fetch
   fetch(url)
     .then(res => res.json())
     .then(data => console.log(data));

   // Using Axios
   axios.get(url)
     .then(response => console.log(response.data));

說明：

• axios.get(url) 向提供的 URL 發送 GET 請求。
• response.data 包含從伺服器取得的資料。
• .catch() 區塊處理任何錯誤，例如網路問題或無效端點。

範例輸出：

   npm install axios

4.2。發布請求

POST 請求用於將資料傳送到伺服器，通常用於建立新記錄，例如使用者註冊或部落格文章。

程式碼範例：

   yarn add axios

說明：

• axios.post(url, data) 使用第二個參數中指定的資料向伺服器發送 POST 請求。
• 在此範例中，請求發送帶有標題、正文和 userId 的新貼文。
• 伺服器的回應包含新建立的資源。

範例輸出：

   const axios = require('axios');

4.3。 PUT 請求

PUT 請求用於更新現有資源。它通常會用更新的資料取代整個資源。

程式碼範例：

   import axios from 'axios';

說明：

• axios.put(url, data) 發送 PUT 請求以更新給定 URL 處的資源。
• 第二個參數包含更新的數據，在本例中更新了 id 為 1 的帖子的標題和正文。
• 伺服器使用更新後的資源回應。

範例輸出：

import axios from 'axios';

axios.get('https://jsonplaceholder.typicode.com/posts')
  .then(response => {
    console.log('Axios is working:', response.data);
  })
  .catch(error => {
    console.error('Error using Axios:', error);
  });

4.4。刪除請求

DELETE 請求用於從伺服器中刪除資源。它通常用於刪除用戶個人資料或帖子等記錄。

程式碼範例：

axios.get('https://jsonplaceholder.typicode.com/users')
  .then(response => console.log(response.data))
  .catch(error => console.error(error));

說明：

• axios.delete(url) 向伺服器發送 DELETE 請求。
• 伺服器刪除 URL 指定的資源（在本例中為 /posts/1），並可能傳回確認回應。

範例輸出：

[
  { "id": 1, "name": "Leanne Graham", "email": "leanne@example.com" },
  { "id": 2, "name": "Ervin Howell", "email": "ervin@example.com" }
]

返回空表示刪除成功。

透過這些 HTTP 方法，Axios 為所有 CRUD（建立、讀取、更新、刪除）操作提供了一種乾淨簡潔的方式與 API 互動。其基於承諾的結構和強大的錯誤處理使其成為任何專案的強大工具。現在讓我們來探索 Axios 的一些高級功能！

Axios 的進階功能

雖然 Axios 對於基本 HTTP 請求來說非常簡單，但它還提供了高級功能，使其成為處理更複雜用例的強大工具。以下是一些值得注意的進階功能：

配置標頭

• Axios 允許您自訂請求標頭，這對於發送驗證令牌或設定內容類型特別有用。
• 為 API 請求設定標頭的範例：

   // Using fetch
   fetch(url)
     .then(res => res.json())
     .then(data => console.log(data));

   // Using Axios
   axios.get(url)
     .then(response => console.log(response.data));

設定 Axios 實例

• 如果您使用的 API 需要重複配置，您可以使用預先定義設定（例如基本 URL 和預設標頭）來建立 Axios 實例。
• 建立 Axios 實例的範例：

   npm install axios

使用攔截器

• 攔截器允許您在處理請求或回應之前全域修改它們。這對於新增標頭、記錄請求或以集中方式處理錯誤非常有用。
• 請求攔截器的範例：

   yarn add axios

借助這些高級功能，您可以優化 Axios 使用，從而提高應用程式的效能、可擴充性和可維護性。

常見問題故障排除

與任何工具一樣，使用 Axios 可能會面臨挑戰。以下是開發人員面臨的一些常見問題以及解決方法：

CORS 問題

• 問題： 當 API 伺服器不允許來自您的網域的請求時，會發生跨網域資源共用 (CORS) 錯誤。
• 解決方案：
  • 透過啟用適當的標頭（例如 Access-Control-Allow-Origin）來確保伺服器支援 CORS。
  • 在開發過程中使用代理程式或瀏覽器擴充功能來繞過錯誤。

請求超時

• 問題： API 伺服器回應時間過長，導致逾時。
• 解決方案： 在 Axios 請求配置中設定逾時：

   // Using fetch
   fetch(url)
     .then(res => res.json())
     .then(data => console.log(data));

   // Using Axios
   axios.get(url)
     .then(response => console.log(response.data));

網路錯誤

• 問題：因連線問題而出現 ENOTFOUND 或 ERR_NETWORK 等問題。
• 解決方案： 檢查您的網路連線和 API URL。加入針對暫時性錯誤的重試邏輯：

   npm install axios

偵錯錯誤

• 問題： Axios 錯誤可能並不總是不言自明的。
• 解決方案：檢查錯誤物件以取得詳細資訊：

   yarn add axios

未處理的 Promise 拒絕

• 問題：忘記處理 .catch() 可能會導致未處理的承諾拒絕警告。
• 解決方案： 始終包含 .catch() 區塊或使用 try/catch 和 async/await 來管理錯誤。

透過解決這些常見問題，您可以確保在專案中使用 Axios npm 時獲得更流暢的體驗。

結論

在本指南中，我們探討了使用 Axios npm 在 JavaScript 中發出 HTTP 請求的基礎知識。從安裝 Axios 到建立第一個 GET、POST、PUT 和 DELETE 請求，您已經了解了它如何透過基於 Promise 的結構、自動 JSON 解析和強大的錯誤處理功能來簡化流程。我們還涉及了高級功能，例如配置標頭、創建可重複使用的 Axios 實例以及使用攔截器進行請求/回應修改。

Axios 是一個強大的工具，可以簡化您在專案中處理 API 請求的方式。無論您是建立簡單的 Web 應用程式還是管理複雜的 API 集成，Axios 都能使流程直觀且高效。

以上是Axios NPM 套件：安裝和發出 HTTP 請求的初學者指南的詳細內容。更多資訊請關注PHP中文網其他相關文章！