新手指南：使用 Axios 實現高效的 HTTP 請求
更新日期： 2025 年 1 月 1 日
本文為 Django + Vue 前後端分離解析，第 23 篇：
- 前後端分離的 404 錯誤處理：步驟指南
- 正常網頁與 API 接口：新手指南
- GraphQL 與 REST：理解新時代的 API 設計
- 為什麼自定義 404 頁面需要同時支持 API 和 HTML：新手指南
- 前後端分離中的路由與錯誤處理：新手指南
- 設計後端 API 的 404 錯誤處理：新手指南
- 前端與後端的 HTTP 請求與響應協議
- Django 中自定義 404 專案架構的最佳實踐
- 深入理解 Django 中的自定義 404 views 函數處理解析
- Django 的 handler404：自定義 404 錯誤頁面的核心
- Django 的 render 函數與 status 參數：為什麼重要？
- 使用 Accept 判斷請求格式：如何實現靈活的錯誤處理？
- 使用 Esbuild 搭建 Vue 開發環境的指南
- 新手入門：TailwindCSS 與 DaisyUI 的整合指南
- Django 靜態文件管理：static 與 staticfiles 完整指南
- 使用 WhiteNoise 簡化 Django 靜態文件管理：新手入門指南
- Vue 與 Django 整合：從編輯到部署的完整指南
- Django 與 Vue 的專案目錄與設計流程指南
- Django + Vue 前後端分離架構：後端路由渲染解析
- Vue 3 應用的主入口詳解：如何初始化應用
- 探索 Vue 應用的根組件：App.vue 的角色與設計
- Vue.js 單頁應用（SPA）邏輯與運作流程詳解
- 新手指南：使用 Axios 實現高效的 HTTP 請求 👈 所在位置
- 在 Vue 中處理 404 錯誤組件（component）設計：新手指南
- Vue Router 新手指南：設置 404 錯誤頁面
在現代 Web 開發中，與後端進行 HTTP 通信是一個不可避免的需求。
無論是獲取數據還是提交表單，處理 HTTP 請求都至關重要。
Axios 是一個功能強大且易於使用的 HTTP 客戶端庫，適用於瀏覽器和 Node.js 環境。
本篇文章將帶領您快速了解 Axios 的特性、使用場景及基本操作，助您輕鬆掌握這一工具。
什麼是 Axios？
Axios 是一個基於 Promise 的 HTTP 客戶端庫，設計目的是簡化 HTTP 請求的處理。
它不僅提供了直觀的 API，還具有強大的功能，例如攔截器、自動 JSON 處理和請求取消。
Axios 的核心特性
- 基於 Promise：
- 支持異步操作，代碼清晰易讀。
- 可與
async/await搭配使用，簡化異步邏輯。
- 支持多種請求類型：
- 包括
GET、POST、PUT、DELETE、PATCH等常見的 HTTP 方法。
- 包括
- 自動 JSON 處理：
- 自動將請求數據序列化為 JSON 格式，並將響應數據解析為 JavaScript 對象。
- 高度可配置：
- 可設置全局默認參數，如基礎 URL、超時設置和請求標頭。
- 攔截器功能：
- 支持對請求和響應進行攔截和處理，適用於添加認證或統一處理錯誤。
- 支持請求取消：
- 使用
CancelToken可在請求進行中取消未完成的請求。
- 使用
- 跨瀏覽器兼容：
- 支持所有現代瀏覽器，甚至兼容 IE11。
- 瀏覽器與 Node.js 通用：
- 瀏覽器中使用 XMLHttpRequest，Node.js 中使用 HTTP 模組。
Axios 的基本用法
簡單的 GET 請求
import axios from "axios";
axios.get("https://jsonplaceholder.typicode.com/posts")
.then(response => {
console.log(response.data); // 輸出數據
})
.catch(error => {
console.error(error); // 處理錯誤
});
使用 POST 發送數據
axios.post("https://jsonplaceholder.typicode.com/posts", {
title: "Axios Guide",
body: "Axios is great!",
userId: 1,
}).then(response => {
console.log(response.data); // 顯示響應數據
});
使用攔截器
攔截請求和響應，進行統一處理。
axios.interceptors.request.use(config => {
config.headers.Authorization = "Bearer YOUR_TOKEN";
return config;
});
axios.interceptors.response.use(
response => response,
error => {
console.error("Error:", error.response.status);
return Promise.reject(error);
}
);
全局配置基礎 URL
axios.defaults.baseURL = "https://api.example.com";
axios.get("/users").then(response => console.log(response.data));Axios 與 Fetch 的比較
| 特性 | Axios | Fetch |
|---|---|---|
| 基於 Promise | 是 | 是 |
| 自動 JSON 處理 | 是 | 否，需手動解析 |
| 攔截器功能 | 是 | 否 |
| 請求超時支持 | 是 | 否 |
| 瀏覽器兼容性 | 支持 IE11 和現代瀏覽器 | 僅支持現代瀏覽器 |
| 錯誤處理 | 自動區分 4xx/5xx 和網絡錯誤 | 需手動處理 |
如何在 Vue 中使用 Axios？
安裝 Axios
在您的 Vue 專案中運行以下命令：
# 使用 npm
npm install axios
# 或使用 yarn
yarn add axios
在組件中使用 Axios
在 Vue 組件中發送請求並處理響應：
import axios from "axios";
export default {
data() {
return {
posts: [],
};
},
methods: {
async fetchPosts() {
try {
const response = await axios.get("https://jsonplaceholder.typicode.com/posts");
this.posts = response.data;
} catch (error) {
console.error("Error fetching posts:", error);
}
},
},
mounted() {
this.fetchPosts();
},
};
結語
Axios 是一款功能豐富且易於使用的 HTTP 客戶端庫，無論是新手還是經驗豐富的開發者，都能從中受益。
它的高效性、靈活性以及完善的功能，使得它成為 Web 開發中的熱門選擇。
如果您正在尋找一個簡化 HTTP 請求處理的解決方案，Axios 無疑是值得一試的工具！