Axios 完全指南：從基本語法到 async / await 實務開發
在現代網頁開發中，Axios 是最受歡迎的 JavaScript 函式庫之一。它基於 Promise 設計，不僅支援瀏覽器與 Node.js 環境，更提供了簡潔的 API 來處理非同步操作。本文將帶您從基礎語法開始，一路掌握實務開發中必備的高階寫法。還沒安裝的話，請先看 Axios 介紹與安裝。
Axios 基本使用：兩種常見語法
Axios 提供了靈活的呼叫方式，主要可以分為 物件配置型 與 簡寫方法型 。
物件配置型 (Config Object)
這是一種最完整的寫法，適合在需要動態調整多個參數時使用。
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 提供了別名方法，讓程式碼更精簡。
axios
.get('https://jsonplaceholder.typicode.com/todos')
.then((res) => {
console.log(res.data);
})
.catch((err) => {
console.error(err);
});為什麼是 res.data？
Axios 回傳的 res 是一個 回應物件，包含 data、status、headers、config 等資訊，後端真正給的內容在 data 裡。習慣直接取 res.data 存進狀態，模板取值時會少一層。
常用設定參數 (Config Options) 詳解
在實務中，我們經常需要透過設定物件來傳遞額外資訊。以下是開發中最常使用的幾個欄位：
| 屬性名稱 | 描述 | 備註 |
|---|---|---|
url | 請求的網址路徑 | 必填欄位 |
method | 請求方法（GET, POST, PUT, DELETE...） | 預設為 GET |
data | Request Body，請求時送出的資料 | 常見於 POST、PUT、PATCH |
params | 查詢字串，會自動組成 ?key=value 接在網址後 | 常見於 GET 的篩選與分頁 |
baseURL | 基礎網址，會自動串接在 url 前面 | 適合定義 API 根路徑 |
headers | 自定義請求頭，例如：Authorization 或 Content-Type | 用於傳送 JWT 或 指定資料格式 |
timeout | 設定請求超時時間（毫秒） | 預設為 0 (永不逾時) |
params 與 data 別搞混
這是初學最常踩的坑：params 進網址，data 進 Request Body。
// GET：篩選條件用 params → /todos?userId=1&_limit=10
axios.get('/todos', {
params: { userId: 1, _limit: 10 },
});
// POST：要送出的資料用 data（第二個參數就是 data）
axios.post('/todos', {
title: '買咖啡豆',
completed: false,
});GET 請求若把條件寫進 data，多數後端會收不到；反之 POST 把資料塞進 params，就會變成一長串網址。
實務進階：使用 async / await 處理非同步
在現代前端框架（如 Vue 或 React）中，為了提升程式碼的可讀性，我們會使用 ES7 的 async 與 await。這是 Promise 的語法糖，能讓非同步程式碼看起來像同步一樣直觀。
基本 async / await 寫法
雖然簡潔，但若直接寫法會導致無法捕捉到錯誤（Error Handling）。
async function setData() {
const res = await axios.get('https://jsonplaceholder.typicode.com/todos');
console.log(res.data);
}
setData();完美的實務範本：搭配 try...catch
在業界標準中，我們會結合 try...catch...finally 來完整控管請求流程，確保當伺服器出錯或網路斷線時，程式不會崩潰，且能給予使用者正確的回饋。
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();在 Vue 元件中的完整寫法
把上面的骨架放進 Vue，資料存進 ref，請求則在 onMounted 發出：
<script setup>
import { ref, onMounted } from "vue";
import axios from "axios";
const todos = ref([]);
const isLoading = ref(true);
const errorMessage = ref("");
onMounted(async () => {
try {
const res = await axios.get("https://jsonplaceholder.typicode.com/todos", {
params: { _limit: 10 },
});
todos.value = res.data;
} catch (err) {
errorMessage.value = err.response ? "伺服器發生錯誤" : "網路連線異常";
} finally {
isLoading.value = false;
}
});
</script>接著就能用 v-if 顯示載入與錯誤狀態，並以 v-for 渲染 todos。
分辨錯誤來源看 err.response
有 err.response 表示 伺服器有回應，可從 err.response.status 取得狀態碼；沒有的話多半是 網路中斷、跨網域被阻擋或超時。兩種情況給使用者的訊息應該不同。
多支 API 同時發送
彼此不相依的請求要 一起送，不要逐行 await：
// ❌ 一支等一支，總時間是相加
const user = await axios.get('/users/1');
const todos = await axios.get('/todos');
// ✅ 同時送出，總時間等於最慢的那一支
const [user, todos] = await Promise.all([
axios.get('/users/1'),
axios.get('/todos'),
]);總結
掌握 Axios 的使用不僅能提升開發效率，透過 async / await 與 try...catch 的結構化寫法，更能讓您的程式碼具備更高的穩定性與維護性。如果您正在開發大型專案，建議進一步研究 Axios Interceptors (攔截器)，這將幫助您更優雅地處理 Token 刷新與統一錯誤警示。
常見問題
params 與 data 有什麼不同？
params 會被組成網址後方的查詢字串，適合 GET 的篩選條件；data 則放在 Request Body，用於 POST、PUT、PATCH 送出的資料。GET 請求寫 data 多數後端會收不到。
為什麼要寫 res.data 而不是直接用 res？
Axios 回傳的是一個包含 data、status、headers、config 的回應物件，後端真正給的內容在 data 屬性裡。若把整個 res 存進狀態，模板取值時就要多一層。
async 函式沒寫 try...catch 會怎樣？
請求失敗時會產生未被處理的 Promise 拒絕，載入狀態也可能永遠關不掉。實務上建議一律用 try...catch...finally，在 finally 關閉 loading。
如何判斷錯誤是伺服器回應還是網路斷線？
檢查 err.response 是否存在。有 err.response 代表伺服器有回應，可從 status 取得狀態碼；沒有則多半是網路中斷、跨網域被阻擋或請求超時。
多支 API 需要同時發送時怎麼寫？
彼此不相依時用 Promise.all 一起送出，總等待時間等於最慢的那一支；若逐行 await 會變成一支等一支，白白拉長載入時間。
