Axios的定義與核心特性
Axios是一個基于Promise的現代化HTTP客戶端庫，主要用于在瀏覽器和Node.js 環境中發送HTTP請求，旨在簡化異步數據交互流程。其核心特性如下：
- 跨平臺支持：在瀏覽器中通過XMLHttpRequest對象發送請求，在Node.js 環境中使用http模塊發送請求。
- Promise API：所有請求均返回Promise對象，支持async/await語法，簡化異步代碼邏輯。
- 自動數據轉換：默認自動將請求和響應數據轉換為JSON格式，也支持自定義轉換規則。
- 攔截器機制：可攔截請求和響應，用于添加認證頭、統一錯誤處理等。
- 安全性增強：客戶端支持防御XSRF（跨站請求偽造），通過在請求中攜帶Cookie中的令牌驗證請求合法性。
Axios的基本使用方法
引入Axios
使用Axios前需先引入其JS文件，可通過本地文件或CDN方式引入。例如本地引入：
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>發送HTTP請求
Axios支持多種請求方式，核心通過axios(config)方法配置請求參數，常用請求方式及示例如下：
- GET請求：用于獲取數據，參數需拼接到URL后。
axios({ method: 'get', url: 'http://example.com/api/employees' // 可添加參數：url: 'http://example.com/api/employees?id=1'
}).then(result => { console.log(result.data); // 響應數據存儲在result.data 中
}); - POST請求：用于提交數據，參數通過
data屬性傳遞。
axios({ method: 'post', url: 'http://example.com/api/employees/delete', data: 'id=1' // 表單格式參數
}).then(result => { console.log(result.data);
}); 核心配置參數
Axios請求配置中常用參數如下：
| 參數名 | 作用 | 示例 |
|---|---|---|
method | 指定請求方式（默認get） | method: 'post' |
url | 請求地址 | url: '/api/data' |
baseURL | 基礎URL，自動拼接在url前（若url為絕對路徑則忽略） | baseURL: 'http://example.com' |
params | GET請求參數（自動拼接到URL） | params: { id: 1, name: 'test' } |
data | POST請求參數（適用于JSON或表單數據） | data: { key: 'value' } |
headers | 自定義請求頭 | headers: { 'Content-Type': 'application/json' } |
Axios的高級特性
攔截器
攔截器用于在請求發送前或響應處理前對其進行攔截和修改，分為請求攔截器和響應攔截器：
- 請求攔截器：可添加認證Token、設置統一請求頭。
axios.interceptors.request.use( config => { config.headers.Authorization = 'Bearer ' + localStorage.getItem('token'); return config; }, error => Promise.reject(error)
); - 響應攔截器：可統一處理錯誤、轉換響應數據。
axios.interceptors.response.use( response => response.data, // 直接返回響應數據，簡化后續處理 error => { if (error.response.status === 401) { // 處理未授權錯誤（如跳轉登錄頁） } return Promise.reject(error); }
); Axios與傳統Ajax的對比
| 特性 | 傳統Ajax（XMLHttpRequest） | Axios |
|---|---|---|
| 語法復雜度 | 需手動創建XHR對象，處理回調地獄 | 基于Promise，支持async/await，代碼簡潔 |
| 瀏覽器兼容性 | 需兼容低版本瀏覽器（如IE） | 現代瀏覽器及Node.js 環境支持，低版本需polyfill |
| 功能完整性 | 需手動處理JSON轉換、超時、錯誤等 | 內置JSON轉換、攔截器、取消請求等功能 |
| 安全性 | 需手動實現XSRF防御 | 內置XSRF防御機制 |
Axios作為對傳統Ajax的封裝，大幅降低了異步請求的開發成本，已成為前端與后端交互的主流工具，尤其在Vue、React等現代框架中被廣泛推薦使用
Axios 發送不同類型數據的區別及使用場景
Axios 發送數據時，需根據?數據類型?和?后端接口要求?選擇不同的配置方式，核心區別體現在?數據格式、Content-Type 請求頭?和?傳輸位置（URL 或請求體）上。以下是常見場景的詳細對比：
一、URL 參數（params）：拼接在 URL 中
用途
- 用于 GET 請求傳遞查詢參數（如分頁、篩選、排序）。
- 數據會以?
key=value?形式拼接在 URL 末尾（如?https://api.com/data?id=1&name=test）。
配置方式
通過?params?選項傳遞，Axios 會自動將對象序列化為 URL 查詢字符串。
示例
<script>// ... 現有代碼（如 axios 基礎配置、攔截器）...{{ edit: URL 參數示例 }}// GET 請求傳遞 URL 參數async function fetchWithParams() {try {const response = await axios.get('/posts', {params: { userId: 1, // 會自動拼接為 ?userId=1&page=1page: 1 }});console.log('URL 參數請求結果：', response);} catch (error) {console.error('請求失敗：', error);}}// 添加觸發按鈕buttonContainer.innerHTML += `<button onclick="fetchWithParams()">發送帶 URL 參數的 GET 請求</button>`;
</script>
關鍵特點
- 傳輸位置：URL query string（可見，有長度限制）。
- Content-Type：無需設置（GET 請求無請求體）。
- 數據格式：簡單鍵值對（Axios 自動處理對象序列化）。
二、JSON 數據（請求體）：API 接口常用
用途
- 用于 POST/PUT/PATCH 等請求傳遞結構化數據（如創建/更新資源）。
- 后端接口通常要求?
Content-Type: application/json。
配置方式
通過?data?選項傳遞 JavaScript 對象，Axios 會自動：
- 將對象序列化為 JSON 字符串。
- 設置?
Content-Type: application/json?請求頭。
示例
<script>// ... 現有代碼 ...{{ edit: JSON 數據示例 }}// POST 請求發送 JSON 數據async function submitJsonData() {try {const userData = {name: "張三",age: 25,hobbies: ["coding", "reading"] // 支持嵌套結構};const response = await axios.post('/users', userData); // 直接傳遞對象console.log('JSON 數據提交結果：', response);} catch (error) {console.error('請求失敗：', error);}}// 添加觸發按鈕buttonContainer.innerHTML += `<button onclick="submitJsonData()">發送 JSON 數據（POST）</button>`;
</script>
關鍵特點
- 傳輸位置：請求體（Request Body）。
- Content-Type：自動設置為?
application/json。 - 數據格式：支持復雜嵌套對象（Axios 自動 JSON.stringify）。
三、表單數據（application/x-www-form-urlencoded）：傳統表單提交
用途
- 模擬 HTML 表單提交（如?
form?標簽的?method="post"）。 - 后端接口要求?
Content-Type: application/x-www-form-urlencoded（數據格式為?key1=value1&key2=value2）。
配置方式
需手動將數據格式化為?URL 編碼字符串，常用兩種方式：
- 使用?
URLSearchParams?構造函數（瀏覽器原生支持）。 - 使用?
qs.stringify?庫（需額外引入，適合復雜對象）。
示例
<script>// ... 現有代碼 ...{{ edit: 表單數據（x-www-form-urlencoded）示例 }}// POST 請求發送表單編碼數據async function submitFormData() {try {// 方式 1：使用 URLSearchParams（簡單鍵值對）const formData = new URLSearchParams();formData.append('username', 'zhangsan');formData.append('password', '123456');// 方式 2：使用 qs.stringify（需先引入 qs 庫，適合嵌套對象）// const qs = require('qs'); // Node.js 環境// const formData = qs.stringify({ username: 'zhangsan', password: '123456' });const response = await axios.post('/login', formData);console.log('表單數據提交結果：', response);} catch (error) {console.error('請求失敗：', error);}}// 添加觸發按鈕buttonContainer.innerHTML += `<button onclick="submitFormData()">發送表單編碼數據（POST）</button>`;
</script>
關鍵特點
- 傳輸位置：請求體。
- Content-Type：Axios 會自動設置為?
application/x-www-form-urlencoded（當使用?URLSearchParams?時）。 - 數據格式：扁平鍵值對（不支持嵌套對象，需手動處理）。
四、文件/圖片上傳（multipart/form-data）：二進制數據
用途
- 上傳文件（如圖片、文檔），需使用?
multipart/form-data?格式。 - 數據會被分割為多個 "部分"（part），每個部分包含文件名和二進制內容。
配置方式
通過?FormData?對象構造數據，Axios 會自動：
- 設置?
Content-Type: multipart/form-data; boundary=xxx（boundary 為自動生成的分隔符）。 - 處理二進制文件流。
示例
<body>{{ edit: 添加文件上傳輸入框 }}<input type="file" id="fileInput" accept="image/*"> <!-- 用于選擇圖片 --><script>// ... 現有代碼 ...{{ edit: 文件上傳示例 }}// 上傳圖片文件async function uploadImage() {try {const fileInput = document.getElementById('fileInput');const file = fileInput.files[0]; // 獲取選擇的文件if (!file) {alert('請先選擇圖片');return;}const formData = new FormData();formData.append('image', file); // 'image' 為后端接收的字段名formData.append('description', '用戶頭像'); // 可同時傳遞其他文本字段const response = await axios.post('/upload', formData);console.log('文件上傳結果：', response);alert('上傳成功，文件 URL：' + response.url);} catch (error) {console.error('上傳失敗：', error);}}// 添加觸發按鈕buttonContainer.innerHTML += `<button onclick="uploadImage()">上傳圖片</button>`;
</script>
</body>
關鍵特點
- 傳輸位置：請求體（二進制流）。
- Content-Type：自動設置為?
multipart/form-data（帶分隔符）。 - 數據格式：支持文件和文本混合傳輸（通過?
FormData.append()?添加）。
)
)
