axios 是基于 promise 的 http 客户端，支持浏览器和 node.js，功能比 fetch 更丰富；推荐用 axios.create() 创建实例并配置 baseurl、headers 和请求拦截器自动注入 token，统一处理数据格式、上传下载、取消请求及响应错误。
Axios 是一个基于 Promise 的 HTTP 客户端，支持浏览器和 Node.js。它比原生 fetch 更简洁、功能更丰富，特别适合处理复杂请求——比如带认证头、表单数据、上传下载、请求/响应拦截、超时控制、取消请求等。
设置基础配置与请求拦截器
避免每次请求都重复写通用参数（如 token、baseURL、Content-Type），推荐用 axios.create() 创建实例，并统一配置：
- 在创建实例时设置
baseURL和默认headers - 用请求拦截器自动注入 token（例如从 localStorage 读取）
- 对 POST/PUT 请求，可统一处理 data 格式（如自动序列化为 JSON）
示例：
const api = axios.create({
baseURL: 'https://api.example.com',
timeout: 10000,
headers: { 'X-Requested-With': 'XMLHttpRequest' }
});
api.interceptors.request.use(config => {
const token = localStorage.getItem('auth_token');
if (token) {
config.headers.Authorization = `Bearer ${token}`;
}
return config;
});
发送带不同数据格式的请求
后端接口常要求不同 Content-Type，Axios 需手动适配：
-
JSON 数据（默认）：直接传 JS 对象，Axios 自动加
Content-Type: application/json并序列化 -
表单数据（application/x-www-form-urlencoded）：用
URLSearchParams或第三方库qs序列化，再设 headers -
FormData（文件上传）：直接传
new FormData()，不设Content-Type（让浏览器自动设 boundary）
示例（表单提交）：
const params = new URLSearchParams();
params.append('username', 'alice');
params.append('email', 'a@example.com');
await api.post('/login', params, {
headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
});
处理上传进度、下载文件与取消请求
复杂场景常需反馈或可控性：
-
上传进度：用
onUploadProgress回调，接收 ProgressEvent，可更新 UI 进度条 -
下载文件：设置
responseType: 'blob'，再用 URL.createObjectURL 触发下载 -
取消请求：借助
CancelToken（v0.22.0+ 已弃用）或更现代的AbortController（推荐）
示例（带取消的搜索请求）：
const controller = new AbortController();
api.get('/search', {
params: { q: 'javascript' },
signal: controller.signal // 传入 AbortSignal
}).catch(err => {
if (axios.isCancel(err)) {
console.log('请求已取消');
}
});
// 取消（例如用户离开页面或输入新关键词）
controller.abort();
统一处理错误与响应拦截器
避免每个 .then/.catch 都写重复逻辑，用响应拦截器集中处理：
- 检查状态码（如 401 跳登录页，403 提示无权限）
- 解析业务错误（如后端返回
{ code: 1001, message: '参数错误' }） - 对成功响应统一提取
data字段（适配后端包装结构）
示例：
api.interceptors.response.use(
response => response.data, // 假设后端统一返回 { code: 0, data: {...} }
error => {
if (error.response?.status === 401) {
localStorage.removeItem('auth_token');
window.location.href = '/login';
}
return Promise.reject(error);
}
);
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
