F2E 前端工程文件

Appearance

Axios 完全指南：從基本語法到 async / await 實務開發 ​

在現代網頁開發中，Axios 是最受歡迎的 JavaScript 函式庫之一。它基於 Promise 設計，不僅支援瀏覽器與 Node.js 環境，更提供了簡潔的 API 來處理非同步操作。本文將帶您從基礎語法開始，一路掌握實務開發中必備的高階寫法。

Axios 基本使用：兩種常見語法 ​

Axios 提供了靈活的呼叫方式，主要可以分為「物件配置型」與「簡寫方法型」。

物件配置型 (Config Object) ​

這是一種最完整的寫法，適合在需要動態調整多個參數時使用。

js
import axios from "axios";

axios({
  method: "get",
  url: "https://jsonplaceholder.typicode.com/todos",
})
  .then((res) => {
    console.log(res.data);
  })
  .catch((err) => {
    console.error(err);
  });

簡寫方法型 (Alias Methods) ​

針對常用的 GET、POST 等動作，Axios 提供了別名方法，讓程式碼更精簡。

js
axios
  .get("https://jsonplaceholder.typicode.com/todos")
  .then((res) => {
    console.log(res.data);
  })
  .catch((err) => {
    console.error(err);
  });

常用設定參數 (Config Options) 詳解 ​

在實務中，我們經常需要透過設定物件來傳遞額外資訊。以下是開發中最常使用的幾個欄位：

屬性名稱描述備註
url請求的網址路徑必填欄位
method請求方法（GET, POST, PUT, DELETE...）預設為 GET
dataRequest Body，請求時送出的資料常見於 POST、PUT、PATCH
baseURL基礎網址，會自動串接在 url 前面適合定義 API 根路徑
headers自定義請求頭，如 Authorization 或 Content-Type用於傳送 JWT 或 指定資料格式
timeout設定請求超時時間（毫秒）預設為 0 (永不逾時)

實務進階：使用 async / await 處理非同步 ​

在現代前端框架（如 Vue 或 React）中，為了提升程式碼的可讀性，我們會使用 ES7 的 async 與 await。這是 Promise 的語法糖，能讓非同步程式碼看起來像同步一樣直觀。

基本 async / await 寫法 ​

雖然簡潔，但若直接寫法會導致無法捕捉到錯誤（Error Handling）。

js
async function setData() {
  const res = await axios.get("https://jsonplaceholder.typicode.com/todos");
  console.log(res.data);
}

setData();

完美的實務範本：搭配 try...catch ​

在業界標準中，我們會結合 try...catch...finally 來完整控管請求流程，確保當伺服器出錯或網路斷線時，程式不會崩潰，且能給予使用者正確的回饋。

js
async function setData() {
  try {
    // 發送請求
    const res = await axios.get("https://jsonplaceholder.typicode.com/todos");
    console.log(res.data);
  } catch (err) {
    // 錯誤處理
    console.log(err);
  } finally {
    // 無論成功或失敗都會執行，適合處理 Loading 狀態結束
    console.log("資料請求結束");
  }
}

setData();

總結 ​

掌握 Axios 的使用不僅能提升開發效率，透過 async / await 與 try...catch 的結構化寫法，更能讓您的程式碼具備更高的穩定性與維護性。如果您正在開發大型專案，建議進一步研究 Axios Interceptors (攔截器)，這將幫助您更優雅地處理 Token 刷新與統一錯誤警示。

Copyright © 2025-Present