Axios 详细用法与参数指南
Axios 是一个基于 Promise 的 HTTP 客户端，用于浏览器和 Node.js 环境。相比 Fetch API，它提供了更简洁的 API、自动 JSON 转换、请求/响应拦截等强大功能。
安装方式
浏览器中使用 (CDN)
通过 npm/yarn 安装
npm install axios
# 或
yarn add axios
在项目中引入
// ES6 模块
import axios from 'axios';
// CommonJS
const axios = require('axios');
基本用法
发起 GET 请求
axios.get('/user?ID=12345')
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error(error);
});
发起 POST 请求
axios.post('/user', {
firstName: 'Fred',
lastName: 'Flintstone'
})
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error(error);
});
请求配置参数
Axios 请求可以接受一个配置对象，包含以下常用属性：
参数
类型
描述
url
String
请求的服务器 URL
method
String
请求方法，默认是 get
baseURL
String
自动加在 url 前面，除非 url 是绝对 URL
headers
Object
自定义请求头
params
Object
URL 参数，自动拼接到 URL 上
data
Object/FormData/String
作为请求体发送的数据
timeout
Number
请求超时时间（毫秒），默认 0（不超时）
withCredentials
Boolean
跨域请求时是否需要凭证（cookies）
responseType
String
响应数据类型，可选 json/text/blob 等
maxContentLength
Number
允许的响应内容最大尺寸
validateStatus
Function
自定义 HTTP 状态码的验证逻辑
onUploadProgress
Function
上传进度回调
onDownloadProgress
Function
下载进度回调
cancelToken
CancelToken
指定取消请求的 token
完整配置示例
axios({
method: 'post',
url: '/user/12345',
baseURL: 'https://api.example.com',
headers: {
'X-Requested-With': 'XMLHttpRequest',
'Authorization': 'Bearer token123'
},
data: {
firstName: 'Fred',
lastName: 'Flintstone'
},
timeout: 1000,
withCredentials: true,
responseType: 'json',
onUploadProgress: progressEvent => {
const percent = Math.round((progressEvent.loaded * 100) / progressEvent.total);
console.log(`上传进度: ${percent}%`);
}
});
响应结构
Axios 请求返回的响应对象包含以下属性：
属性
类型
描述
data
Any
服务器返回的数据
status
Number
HTTP 状态码
statusText
String
HTTP 状态消息
headers
Object
响应头
config
Object
请求的配置信息
request
XMLHttpRequest
生成此响应的请求对象
响应处理示例
axios.get('/user/12345')
.then(response => {
console.log(response.data);
console.log(response.status);
console.log(response.statusText);
console.log(response.headers);
console.log(response.config);
});
全局配置
可以设置全局默认配置，这些配置会应用到每个请求中：
// 设置基础 URL
axios.defaults.baseURL = 'https://api.example.com';
// 设置请求头
axios.defaults.headers.common['Authorization'] = 'Bearer token123';
axios.defaults.headers.post['Content-Type'] = 'application/json';
// 设置超时时间
axios.defaults.timeout = 2500;
创建实例
可以创建自定义的 Axios 实例，每个实例都有自己的配置：
const instance = axios.create({
baseURL: 'https://api.example.com',
timeout: 1000,
headers: {'X-Custom-Header': 'foobar'}
});
// 使用实例
instance.get('/user/12345')
.then(response => {
console.log(response.data);
});
拦截器
Axios 提供了请求和响应拦截器，可以在请求或响应被处理前拦截它们：
请求拦截器
axios.interceptors.request.use(config => {
// 在发送请求前做些什么
config.headers.Authorization = 'Bearer token123';
return config;
}, error => {
// 对请求错误做些什么
return Promise.reject(error);
});
响应拦截器
axios.interceptors.response.use(response => {
// 对响应数据做点什么
if (response.status === 200) {
return response.data;
}
return response;
}, error => {
// 对响应错误做点什么
if (error.response.status === 401) {
// 处理未授权错误
}
return Promise.reject(error);
});
取消请求
Axios 支持取消请求功能：
const CancelToken = axios.CancelToken;
const source = CancelToken.source();
axios.get('/user/12345', {
cancelToken: source.token
}).catch(thrown => {
if (axios.isCancel(thrown)) {
console.log('Request canceled', thrown.message);
} else {
// 处理错误
}
});
// 取消请求
source.cancel('Operation canceled by the user.');
并发请求
Axios 提供了处理并发请求的辅助函数：
function getUserAccount() {
return axios.get('/user/12345');
}
function getUserPermissions() {
return axios.get('/user/12345/permissions');
}
axios.all([getUserAccount(), getUserPermissions()])
.then(axios.spread((acct, perms) => {
// 两个请求都完成后执行
console.log(acct.data, perms.data);
}));
错误处理
Axios 的错误对象包含以下属性：
属性
类型
描述
message
String
错误消息
config
Object
请求的配置信息
code
String
错误代码（如 'ECONNABORTED'）
request
XMLHttpRequest
生成此错误的请求对象
response
Object
包含服务器响应的错误对象
错误处理示例
axios.get('/user/12345')
.catch(error => {
if (error.response) {
// 请求已发出，服务器返回状态码不在 2xx 范围
console.log(error.response.data);
console.log(error.response.status);
console.log(error.response.headers);
} else if (error.request) {
// 请求已发出但没有收到响应
console.log(error.request);
} else {
// 设置请求时出错
console.log('Error', error.message);
}
console.log(error.config);
});
文件上传
Axios 可以方便地上传文件：
const formData = new FormData();
const fileInput = document.querySelector('input[type="file"]');
formData.append('file', fileInput.files[0]);
formData.append('user', 'user123');
axios.post('/upload', formData, {
headers: {
'Content-Type': 'multipart/form-data'
},
onUploadProgress: progressEvent => {
const percent = Math.round((progressEvent.loaded * 100) / progressEvent.total);
console.log(`上传进度: ${percent}%`);
}
}).then(response => {
console.log('上传成功', response.data);
});
与 Fetch API 的主要区别
特性
Axios
Fetch
浏览器支持
需要 polyfill 支持 IE11
不支持 IE
请求取消
支持
支持 (AbortController)
超时设置
内置支持
需要手动实现
JSON 转换
自动
需要手动调用 .json()
拦截器
支持
不支持
进度监控
支持
部分支持
并发请求
提供辅助方法
需要手动实现
CSRF 防护
内置支持
需要手动实现
错误处理
更全面
基本
请求/响应转换
支持
不支持
最佳实践
创建实例：为不同的 API 端点创建不同的 Axios 实例
设置全局配置：统一设置 baseURL、超时时间等
使用拦截器：统一处理认证、错误等
封装请求：将常用请求封装成函数
错误处理：统一错误处理逻辑
封装示例
// api.js
import axios from 'axios';
const api = axios.create({
baseURL: 'https://api.example.com',
timeout: 10000
});
// 请求拦截器
api.interceptors.request.use(config => {
const token = localStorage.getItem('token');
if (token) {
config.headers.Authorization = `Bearer ${token}`;
}
return config;
});
// 响应拦截器
api.interceptors.response.use(
response => response.data,
error => {
if (error.response.status === 401) {
// 处理未授权
}
return Promise.reject(error);
}
);
export const getUser = id => api.get(`/users/${id}`);
export const createUser = data => api.post('/users', data);
export const updateUser = (id, data) => api.put(`/users/${id}`, data);
export const deleteUser = id => api.delete(`/users/${id}`);
总结
Axios 是一个功能强大、易于使用的 HTTP 客户端，提供了许多 Fetch API 不具备的高级功能。通过合理配置和使用拦截器、实例等功能，可以大大简化前端网络请求的处理逻辑，提高代码的可维护性和可读性。