当前位置：首页 > news >正文

Axios 全面详解

news 2025/11/14 5:45:16

🧩 一、Axios 是什么？

Axios 是一个轻量级的 HTTP 请求库，用来发送网络请求（GET、POST、PUT、DELETE 等），底层基于：

浏览器环境： 使用 XMLHttpRequest
Node.js 环境： 使用 http 模块

相比原生的 fetch() 或 XMLHttpRequest：

语法更简洁
支持请求/响应拦截
支持自动 JSON 转换
支持请求取消
支持并发控制
兼容旧浏览器

⚙️ 二、安装与引入

# npm 安装
npm install axios# yarn 安装
yarn add axios

在前端项目中使用：

import axios from 'axios';

在 Node.js 中也可以直接使用：

const axios = require('axios');

🚀 三、基础用法

1️⃣ GET 请求

axios.get('https://api.example.com/users', {params: { id: 123 }  // ?id=123
})
.then(response => {console.log(response.data);
})
.catch(error => {console.error(error);
});

2️⃣ POST 请求

axios.post('https://api.example.com/login', {username: 'admin',password: '123456'
})
.then(res => console.log(res.data))
.catch(err => console.error(err));

3️⃣ 并发请求

axios.all([axios.get('/user'),axios.get('/comments')
]).then(axios.spread((user, comments) => {console.log(user.data, comments.data);
}));

🧱 四、常见配置项（axios config）

Axios 的第二个参数可以传一个配置对象：

axios({method: 'post',url: '/user/12345',data: { name: 'Tom' },headers: { 'Authorization': 'Bearer token' },timeout: 5000,responseType: 'json',  // 支持 arraybuffer, blob, document, json, text, stream
});

常用配置项说明：

配置项	说明
`url`	请求地址
`method`	请求方法（get、post、put、delete 等）
`baseURL`	设置统一的基础路径
`headers`	自定义请求头
`params`	URL 查询参数（GET 参数）
`data`	请求体数据（POST 数据）
`timeout`	超时时间（毫秒）
`responseType`	响应数据类型
`auth`	基础认证 {username, password}
`withCredentials`	是否跨域时携带 cookie

🔄 五、拦截器机制（Interceptor）

Axios 提供了两类拦截器：请求拦截器 与 响应拦截器。

1️⃣ 请求拦截器

可以在请求发出前做统一处理，比如添加 Token。

axios.interceptors.request.use(config => {const token = localStorage.getItem('token');if (token) config.headers.Authorization = `Bearer ${token}`;return config;},error => Promise.reject(error)
);

2️⃣ 响应拦截器

可以统一处理返回结果或错误。

axios.interceptors.response.use(response => {// 返回数据前的处理return response.data;},error => {if (error.response && error.response.status === 401) {console.log('未授权，请重新登录');}return Promise.reject(error);}
);

🪄 六、创建 Axios 实例（常用于项目封装）

const service = axios.create({baseURL: 'https://api.example.com/',timeout: 8000
});service.interceptors.request.use(config => {// 统一添加 tokenconfig.headers.Authorization = 'Bearer ' + localStorage.getItem('token');return config;
});service.interceptors.response.use(res => res.data);export default service;

使用时：

import service from './request';service.get('/user').then(data => console.log(data));

💥 七、错误处理

Axios 会在请求失败时返回一个 error 对象，可通过以下方式判断：

axios.get('/api').catch(error => {if (error.response) {console.log('服务器返回错误状态码：', error.response.status);} else if (error.request) {console.log('请求已发送但未收到响应');} else {console.log('请求设置错误：', error.message);}});

⚡ 八、取消请求

通过 AbortController（或旧版的 CancelToken）可以中止请求。

const controller = new AbortController();axios.get('/long-request', { signal: controller.signal }).catch(e => console.log('请求被取消'));controller.abort();  // 主动取消请求

🔍 九、Axios 原理简析

Axios 的核心机制：

创建实例（axios.create）
- 实际是创建一个带有默认配置的 Axios 对象。
请求调度器（dispatchRequest）
- 判断当前环境（浏览器 or Node）
- 分别使用 XMLHttpRequest 或 http.request() 发送请求
拦截器链（InterceptorManager）
- 请求拦截器 → 发请求 → 响应拦截器
- 内部通过 Promise 链式调用 实现拦截与传递。

请求链路：
request interceptors → dispatch request → response interceptors

🧰 十、常见高级技巧

功能	示例
设置全局默认配置	`axios.defaults.baseURL = '/api'`
设置全局 headers	`axios.defaults.headers.common['Authorization'] = token`
文件上传	`axios.post('/upload', formData, { headers: {'Content-Type': 'multipart/form-data'} })`
文件下载	`axios.get('/file', { responseType: 'blob' })`
超时重试	配合 `axios-retry` 插件
并发控制	用 `Promise.all` 或队列机制管理

🧩 十一、与 Fetch 的区别

特性	Axios	Fetch
兼容性	IE11 可用	IE 不支持
超时控制	支持	需手动实现
拦截器	有	无
自动 JSON 转换	有	需手动调用 `.json()`
取消请求	内置支持	需 AbortController
上传/下载进度	支持	较麻烦