《AJAX：前端異步交互的魔法指南》

什么是AJAX

AJAX（Asynchronous JavaScript and XML，異步 JavaScript 和 XML）?是一種用于創建異步網頁應用的技術，允許網頁在不重新加載整個頁面的情況下，與服務器交換數據并局部更新頁面內容。盡管名稱中包含 XML，但現代 AJAX 主要使用 JSON（JavaScript Object Notation）作為數據格式。

核心原理

異步通信
- 瀏覽器通過 JavaScript?異步發送請求到服務器，同時用戶可繼續操作頁面。
- 服務器返回數據后，JavaScript 動態更新頁面指定部分，無需刷新整個頁面。
基于?XMLHttpRequest?或?Fetch API
- 傳統 AJAX 使用?XMLHttpRequest?對象發起請求。
- 現代開發中更常用?Fetch API（基于 Promise，語法更簡潔）。

工作流程

sequenceDiagramparticipant 用戶participant 瀏覽器participant 服務器用戶->>瀏覽器: 觸發事件（點擊、滾動等）瀏覽器->>服務器: 發送異步請求（XHR/Fetch）服務器->>瀏覽器: 返回數據（JSON/XML/HTML）瀏覽器->>用戶: 局部更新頁面內容

關鍵特點

特性	說明
異步性	不阻塞用戶操作，后臺完成數據交互。
無刷新更新	僅更新頁面局部內容，避免整頁重載。
數據格式靈活	支持 JSON、XML、HTML 或純文本。
依賴 JavaScript	需瀏覽器啟用 JavaScript。
跨域限制	默認受同源策略限制，需通過 CORS（跨域資源共享）或代理解決跨域問題。

使用瀏覽器的 XMLHttpRequest 對象與服務器通信
瀏覽器網頁中，使用 AJAX技術（XHR對象）發起獲取省份列表數據的請求，服務器代碼響應準備好的省份列表數據給前端，前端拿到數據數組以后，展示到網頁。

什么是axios

?

Axios?是一個基于?Promise?的現代化 HTTP 客戶端庫，專為瀏覽器和 Node.js 設計，用于簡化前端與后端的數據交互。它封裝了底層 HTTP 請求細節，提供了更簡潔、易用的 API，并支持攔截器、自動 JSON 轉換、請求取消等高級功能，是替代原生?XMLHttpRequest?和?Fetch API?的流行選擇。

核心特性

特性	說明
基于 Promise	天然支持異步編程，避免回調地獄，可使用?`async/await`?簡化代碼。
瀏覽器 & Node.js 支持	同一套代碼兼容瀏覽器（XHR）和 Node.js（HTTP 模塊）。
自動 JSON 轉換	自動將請求/響應數據與 JSON 格式互相轉換。
攔截器機制	可全局攔截請求和響應，用于添加身份驗證、日志、錯誤處理等統一邏輯。
取消請求	支持主動取消未完成的請求（如用戶離開頁面時終止無用請求）。
并發請求	通過?`axios.all()`?和?`axios.spread()`?處理多個并行請求。
客戶端防御 XSRF	支持自動添加 XSRF Token 到請求頭，增強安全性。
超時控制	可設置請求超時時間，避免長時間等待無響應。

基礎用法示例

1. 發起 GET 請求

import axios from 'axios';// 基本 GET 請求
axios.get('https://api.example.com/data').then(response => {console.log(response.data); // 響應數據}).catch(error => {console.error('請求失敗:', error);});// 帶參數的 GET 請求
axios.get('https://api.example.com/user', {params: {id: 123,type: 'vip'}
});

2. 發起 POST 請求

axios.post('https://api.example.com/login', {username: 'admin',password: '123456'
})
.then(response => {console.log('登錄成功:', response.data.token);
});

3. 并發請求

const getUser = axios.get('/user/123');
const getPosts = axios.get('/posts');axios.all([getUser, getPosts]).then(axios.spread((userRes, postsRes) => {console.log('用戶數據:', userRes.data);console.log('帖子數據:', postsRes.data);}));

4. 全局配置

// 設置全局默認值（如 API 基礎路徑）
axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.headers.common['Authorization'] = 'Bearer token123';
axios.defaults.timeout = 5000; // 5秒超時

高級功能

1.?攔截器（Interceptors）

// 添加請求攔截器（如添加 Token）
axios.interceptors.request.use(config => {config.headers.Authorization = `Bearer ${localStorage.getItem('token')}`;return config;
}, error => {return Promise.reject(error);
});// 添加響應攔截器（如統一處理錯誤）
axios.interceptors.response.use(response => {return response.data; // 直接返回數據部分
}, error => {if (error.response.status === 401) {alert('登錄已過期，請重新登錄！');window.location.href = '/login';}return Promise.reject(error);
});

2.?取消請求

const source = axios.CancelToken.source();axios.get('/data', {cancelToken: source.token
}).catch(error => {if (axios.isCancel(error)) {console.log('請求被取消:', error.message);}
});// 取消請求（參數為可選提示信息）
source.cancel('用戶主動取消操作');

Axios vs Fetch API

對比項	Axios	Fetch API
語法簡潔性	封裝度高，API 更簡潔	原生 API，需手動處理更多細節
JSON 轉換	自動轉換請求/響應數據	需手動調用?`response.json()`
攔截器	支持全局請求/響應攔截	無內置攔截器，需自行封裝
取消請求	內置支持	通過?`AbortController`?實現
瀏覽器兼容性	兼容 IE11+（需 polyfill）	兼容現代瀏覽器，IE 不支持
超時控制	直接通過?`timeout`?配置	需結合?`setTimeout`?和?`AbortController`

常見問題解決

跨域請求（CORS）
- 需后端配置?Access-Control-Allow-Origin?等響應頭。
- 開發環境可通過代理（如 Webpack DevServer 代理）繞過。

文件上傳

const formData = new FormData();
formData.append('file', fileInput.files[0]);axios.post('/upload', formData, {headers: { 'Content-Type': 'multipart/form-data' }
});

錯誤處理統一封裝
建議通過攔截器集中處理 HTTP 狀態碼和業務錯誤碼。

什么是URL

URL（Uniform Resource Locator，統一資源定位符）?是用于標識和定位互聯網上資源（如網頁、圖片、視頻等）的字符串。它是 Web 的核心組成部分，用戶通過 URL 訪問特定資源，瀏覽器通過 URL 向服務器請求數據。

URL 的結構

一個完整的 URL 通常由以下部分組成：

協議://主機名:端口號/路徑?查詢參數#片段標識符

示例

https://www.example.com:443/path/to/resource?name=value#section1

URL 的組成部分詳解

部分	說明
協議（Scheme）	指定訪問資源使用的協議，常見的有： -?`http`：超文本傳輸協議 -?`https`：加密的 HTTP -?`ftp`：文件傳輸協議 -?`mailto`：電子郵件地址
主機名（Host）	資源所在服務器的域名或 IP 地址，如?`www.example.com`。
端口號（Port）	服務器監聽的端口號，默認端口可省略（如 HTTP 默認 80，HTTPS 默認 443）。
路徑（Path）	資源在服務器上的具體位置，如?`/path/to/resource`。
查詢參數（Query）	以?`?`?開頭，包含鍵值對，用于傳遞額外信息，如?`?name=value&age=25`。
片段標識符（Fragment）	以?`#`?開頭，指向資源內部的特定部分（如 HTML 頁面的錨點）。

?URL里的查詢參數

什么是查詢參數 ?

攜帶給服務器額外信息，讓服務器返回我想要的某一部分數據而不是全部數據
舉例：查詢河北省下屬的城市列表，需要先把河北省傳遞給服務器

查詢參數的語法？
- 在 url 網址后面用?拼接格式：XXXX參數名1=值1&參數名2=值2
- 參數名一般是后端規定的，值前端看情況傳遞即可
axios 如何攜帶查詢參數?
使用 params 選項即可

axios({url: '目標資源地址',params: {參數名: 值}
}).then(result => {// 對服務器返回的數據做后續處理
})

?常用請求和數據提交

想要提交數據，先來了解什么是請求方法

請求方法是一些固定單詞的英文，例如：GET，POST，PUT，DELETE，PATCH（這些都是http協議規定的），每個單詞對應一種對服務器資源要執行的操作。

什么時候進行數據提交呢？

例如：多端要查看同一份訂單數據，或者使用同一個賬號進行登錄，那訂單/用戶名+密碼，就需要保存在服務器上，隨時隨地進行訪問

?axios 如何提交數據到服務器呢？

axios({url: '目標資源地址',method: '請求方法',data: {參數名: 值}
}).then(result => {// 對服務器返回的數據做后續處理
})

AXIOS的錯誤處理

Axios 的錯誤處理?是開發中非常重要的一部分，能夠有效應對網絡請求中的各種異常情況（如網絡錯誤、服務器錯誤、超時等）。Axios 提供了多種方式來處理錯誤，包括?catch?方法、try/catch?語法（結合?async/await）以及攔截器機制。

Axios 的錯誤對象包含以下關鍵屬性：

message：錯誤描述。
response：服務器返回的響應對象（如果有）。
- status：HTTP 狀態碼（如 404、500）。
- data：服務器返回的錯誤數據。
request：請求對象（如果請求已發出但未收到響應）。
config：請求的配置信息。

示例：使用?catch?處理錯誤

axios.get('https://api.example.com/data').then(response => {console.log('請求成功:', response.data);}).catch(error => {if (error.response) {// 服務器返回了錯誤狀態碼（4xx/5xx）console.error('服務器錯誤:', error.response.status, error.response.data);} else if (error.request) {// 請求已發出但未收到響應console.error('網絡錯誤:', error.message);} else {// 其他錯誤（如配置錯誤）console.error('請求配置錯誤:', error.message);}});

示例：使用?async/await?處理錯誤

async function fetchData() {try {const response = await axios.get('https://api.example.com/data');console.log('請求成功:', response.data);} catch (error) {if (error.response) {console.error('服務器錯誤:', error.response.status, error.response.data);} else if (error.request) {console.error('網絡錯誤:', error.message);} else {console.error('請求配置錯誤:', error.message);}}
}