axios
1.简介：
Axios 是一个基于 Promise 的现代化 HTTP 客户端库，广泛用于浏览器和 Node.js 环境中发送 HTTP 请求。它的设计目标是简化前后端数据交互，提供更高效、更易用的 API。
2.Axios 的核心作用
-
发送 HTTP 请求
支持所有常见请求方法（GET、POST、PUT、DELETE等），并自动处理请求参数和响应数据。 -
拦截请求和响应
可以在请求发送前或响应返回后添加统一的处理逻辑（例如添加认证 Token、统一处理错误）。 -
数据转换
自动将请求数据转换为 JSON 格式（或自定义格式），并将响应数据（如 JSON）自动转换为 JavaScript 对象。 -
取消请求
提供取消请求的机制，避免不必要的网络请求（例如用户频繁操作时取消旧请求）。 -
客户端防御 XSRF
支持跨站请求伪造（XSRF）防护，自动在请求头中添加安全凭证。 -
上传/下载进度监控
支持监听文件上传和下载的进度。
3.发送请求
1. GET 请求
// 基本 GET
axios.get('https://api.example.com/data')
.then(response => console.log(response.data))
.catch(error => console.error(error));
// 带 URL 参数
axios.get('https://api.example.com/data', {
params: {
id: 123,
page: 2
}
});
// 使用 async/await
async function fetchData() {
try {
const response = await axios.get('https://api.example.com/data');
console.log(response.data);
} catch (error) {
console.error(error);
}
}2. POST 请求
axios.post('https://api.example.com/users', {
name: 'John',
age: 30
})
.then(response => console.log('创建成功:', response.data))
.catch(error => console.error('创建失败:', error));3. 其他请求方法
axios.put('https://api.example.com/users/1', { name: 'Alice' });
axios.delete('https://api.example.com/users/1');
axios.patch('https://api.example.com/users/1', { age: 31 });4.Axios 配置
1. 全局默认配置
axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.headers.common['Authorization'] = 'Bearer token';
axios.defaults.timeout = 5000; // 5秒超时2. 单个请求配置
axios.get('/data', {
params: { id: 123 }, // URL 参数
headers: { 'X-Custom-Header': 'value' }, // 自定义请求头
timeout: 3000, // 单独设置超时时间
responseType: 'json' // 响应数据类型（默认json）
});5.处理响应
1. 响应数据结构
{
data: {}, // 服务器返回的数据
status: 200, // HTTP 状态码
statusText: 'OK',
headers: {}, // 响应头
config: {} // 请求的配置信息
}2. 提取数据
axios.get('/data')
.then(response => {
const data = response.data;
const status = response.status;
});6.错误处理
1. 捕获 HTTP 错误状态码（4xx/5xx）
axios.get('/data')
.catch(error => {
if (error.response) {
// 服务器返回了错误状态码
console.log('状态码:', error.response.status);
console.log('错误数据:', error.response.data);
} else if (error.request) {
// 请求已发送但无响应
console.log('无响应:', error.request);
} else {
// 其他错误（如配置错误）
console.log('错误信息:', error.message);
}
});2. 全局错误拦截
axios.interceptors.response.use(
response => response,
error => {
if (error.response.status === 404) {
alert('资源不存在！');
}
return Promise.reject(error);
}
);
7.高级功能
1. 并发请求
const request1 = axios.get('/data1');
const request2 = axios.get('/data2');
axios.all([request1, request2])
.then(axios.spread((res1, res2) => {
console.log(res1.data, res2.data);
}));2. 取消请求
const controller = new AbortController();
axios.get('/data', {
signal: controller.signal
}).catch(error => {
if (axios.isCancel(error)) {
console.log('请求被取消:', error.message);
}
});
// 取消请求
controller.abort('用户取消操作');3. 自定义实例
const api = axios.create({
baseURL: 'https://api.example.com',
timeout: 5000
});
api.get('/users'); // 使用自定义实例8.文件上传
const formData = new FormData();
formData.append('file', fileInput.files[0]);
axios.post('/upload', formData, {
headers: {
'Content-Type': 'multipart/form-data'
},
onUploadProgress: progressEvent => {
const percent = Math.round((progressEvent.loaded / progressEvent.total) * 100);
console.log(`上传进度: ${percent}%`);
}
});