Axios 是一個流行的 HTTP 客戶端，用於在前端應用中與後端 API 進行溝通。它支持瀏覽器和 Node.js 環境，能夠輕鬆發送 GET、POST、PUT、DELETE 等請求，並且可以處理攔截請求、設定超時、攜帶自定義 Header 等場景。

1. 安裝 Axios

首先，我們需要在專案中安裝 Axios。你可以使用 npm 或 yarn 來安裝它：

npm install axios
# or
yarn add axios

安裝完畢後，你可以在專案中導入 Axios 並開始發送請求。

2. 基本用法

2.1 發送 GET 請求

最常見的請求是 GET 請求，通常用來從後端獲取資料。

以下是如何使用 Axios 發送一個簡單的 GET 請求來獲取資料的範例：

import axios from 'axios';

const fetchData = async () => {
  try {
    const response = await axios.get('https://api.example.com/data');
    console.log('資料：', response.data);
  } catch (error) {
    console.error('錯誤：', error);
  }
};

fetchData();

2.2 發送 POST 請求

POST 請求通常用來向後端發送資料。

以下是一個使用 Axios 發送 POST 請求的範例，其中我們將資料發送到後端 API。

import axios from 'axios';

const postData = async () => {
  try {
    const response = await axios.post('https://api.example.com/data', {
      name: 'John Doe',
      age: 30,
    });
    console.log('回應：', response.data);
  } catch (error) {
    console.error('錯誤：', error);
  }
};

postData();

3. 高級功能

3.1 攜帶參數

有時我們需要在 GET 請求中帶查詢參數。Axios 支持使用 params 屬性來傳遞 URL 查詢參數。

const fetchDataWithParams = async () => {
  try {
    const response = await axios.get('https://api.example.com/data', {
      params: {
        userId: 123,
        active: true,
      },
    });
    console.log('資料：', response.data);
  } catch (error) {
    console.error('錯誤：', error);
  }
};

fetchDataWithParams();

這會發送一個請求到 https://api.example.com/data?userId=123&active=true。

3.2 攜帶自定義標頭

在某些情況下，我們需要向後端 API 請求中添加自定義標頭 (headers)，比如身份驗證標頭。你可以通過設定 headers 來攜帶這些自定義信息。

const fetchDataWithHeaders = async () => {
  try {
    const response = await axios.get('https://api.example.com/protected', {
      headers: {
        Authorization: 'Bearer your-token-here',
      },
    });
    console.log('資料：', response.data);
  } catch (error) {
    console.error('錯誤：', error);
  }
};

fetchDataWithHeaders();

這個範例中，我們攜帶了一個 Authorization 標頭來進行身份驗證。

4. Axios 攔截器

攔截器 是 Axios 中的一個強大功能，允許你在請求發出或回應接收到之前攔截請求，並進行一些操作。這對於添加全局身份驗證標頭或處理錯誤響應非常有用。

4.1 請求攔截器

請求攔截器可以在請求發送之前修改請求配置，例如自動附加身份驗證標頭。

axios.interceptors.request.use(
  (config) => {
    // 在發送請求之前做一些處理，例如添加 token
    const token = 'your-token-here';
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }
    return config;
  },
  (error) => {
    // 處理請求錯誤
    return Promise.reject(error);
  }
);

4.2 響應攔截器

響應攔截器允許你在接收到回應後進行處理。例如，當身份驗證失效時可以自動登出或跳轉到登錄頁面。

axios.interceptors.response.use(
  (response) => {
    // 對響應資料進行處理
    return response;
  },
  (error) => {
    // 統一處理錯誤
    if (error.response.status === 401) {
      console.error('未經授權，請重新登錄');
    }
    return Promise.reject(error);
  }
);

5. 錯誤處理

處理 API 請求中的錯誤是非常重要的，這能確保應用不會因為一次失敗的請求而崩潰。你可以在 catch 代碼塊中捕獲錯誤，並根據錯誤類型進行不同處理。

const fetchDataWithErrorHandling = async () => {
  try {
    const response = await axios.get('https://api.example.com/data');
    console.log('資料：', response.data);
  } catch (error) {
    if (error.response) {
      // 伺服器有回應，但狀態碼不是 2xx
      console.error('錯誤狀態碼：', error.response.status);
      console.error('錯誤資料：', error.response.data);
    } else if (error.request) {
      // 請求已發送但未收到回應
      console.error('未收到伺服器回應', error.request);
    } else {
      // 其他錯誤
      console.error('請求錯誤：', error.message);
    }
  }
};

fetchDataWithErrorHandling();

這段代碼會處理不同類型的錯誤情況，並根據具體情況給出錯誤提示。

6. 設定全局配置

你可以設定全局的 Axios 默認配置，這樣每次請求都會應用這些默認配置，減少冗餘代碼。例如，設定基礎 URL 和超時時間：

axios.defaults.baseURL = 'https://api.example.com/';
axios.defaults.timeout = 10000; // 10 秒超時
axios.defaults.headers.common['Authorization'] = 'Bearer your-token-here';

這樣，每次請求都會使用這個基礎 URL 和標頭。

7. 發送並行請求

有時候，你可能需要同時發送多個請求，並等待所有請求完成後再進行下一步。axios.all 可以同時發送多個請求，並使用 Promise.all 來處理結果。

const fetchMultipleData = async () => {
  try {
    const [response1, response2] = await Promise.all([
      axios.get('https://api.example.com/data1'),
      axios.get('https://api.example.com/data2'),
    ]);

    console.log('資料1：', response1.data);
    console.log('資料2：', response2.data);
  } catch (error) {
    console.error('錯誤：', error);
  }
};

fetchMultipleData();

這會並行發送兩個 GET 請求，並等待兩個請求都完成後才處理資料。

總結

Axios 是一個強大且靈活的 HTTP 客戶端，能夠幫助你輕鬆發送各類 HTTP 請求，並處理 API 的資料互動。在這篇文章中，我們介紹了如何使用 Axios 發送基本的 GET 和 POST 請求，以及如何攜帶參數、設定自定義標頭、處理錯誤、使用攔截器等進階功能。

通過熟練使用 Axios，無論是在小型應用還是大型專案中，你都能夠輕鬆地與後端 API 進行高效的資料互動。