Axios详解
- 1.Axios 是什么
- 2.如何使用 Axios
- 1. 安装与引入
- 2. 发起 GET 请求
- 3. 发起 POST 请求
- 4. 高级用法：拦截器
- 5. 创建实例（推荐实战做法）
1.Axios 是什么
Axios 是一个基于 Promise 的 HTTP 客户端库，专为浏览器和 Node.js 环境设计。它主要用于在前端（如 Vue、React 等框架）或后端（Node.js）项目中发送 HTTP 请求，实现与服务器的高效数据交互。
核心特性
- 基于 Promise：天然支持异步操作代码更简洁，易于处理并发请求。
- 自动转换数据：默认自动将请求数据序列化为 JSON，并将响应数据解析为 JSON对象。
- 拦截器机制：支持请求拦截器和响应拦截器，便于统一添加认证 Token、处理错误或修改配置。
- 请求取消与超时：支持取消未完成的请求以节省资源，并可设置请求超时时间。
- 多环境兼容：同时适用于浏览器端和 Node.js 服务端。
2.如何使用 Axios
1. 安装与引入
在项目中通过 npm 或 yarn 安装：
npminstallaxios 或yarnaddaxios在代码中引入：
// ES6 模块引入importaxiosfrom'axios';// CommonJS 引入constaxios=require('axios');2. 发起 GET 请求
GET 请求通常用于从服务器获取数据。参数可以通过params对象传递，Axios 会自动将其编码为 URL 查询字符串。
// 基础 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/data',{params:{id:123,name:'test'}}).then(response=>{console.log('带参数据:',response.data);});3. 发起 POST 请求
POST 请求用于向服务器提交数据。默认情况下，Axios 会将数据序列化为 JSON 格式，并设置Content-Type为application/json。
// 基础 POST 请求axios.post('https://api.example.com/submit',{username:'user1',password:'123456'}).then(response=>{console.log('提交成功:',response.data);}).catch(error=>{console.error('提交失败:',error);});若需发送表单数据（`application/x-www-form-urlencoded），需手动设置请求头并使用第三方库序列化数据：
constqs=require('qs');axios.post('https://api.example.com/submit',qs.stringify({username:'user1',password:'123456'}),{headers:{'Content-Type':'application/x-www-form-urlencoded'}});4. 高级用法：拦截器
拦截器允许你在请求发出前或响应返回后统一处理逻辑例如添加身份验证令牌或全局错误处理。
请求拦截器示例：
axios.interceptors.request.use(config=>{// 在发送请求之前做些什么，例如添加 Tokenconsttoken=localStorage.getItem('token');if(token){config.headers['Authorization']=`Bearer${token}`;}returnconfig;},error=>{returnPromise.reject(error);});响应拦截器示例：
axios.interceptors.response.use(response=>{// 对响应数据做点什么returnresponse;},error=>{// 对响应错误做点什么if(error.response){console.error('服务器响应错误:',error.response.status);}elseif(error.request){console.error('请求未发出:',error.request);}else{console.error('其他错误:',error.message);}returnPromise.reject(error);});5. 创建实例（推荐实战做法）
在实际开发中，通常会创建一个 Axios 实例来配置 baseURL、超时时间等通用属性，避免重复代码。
constinstance=axios.create({baseURL:'https://api.example.com',timeout:5000,// 超时时间毫秒headers:{'Content-Type':'application/json'}});//使用实例发起请求instance.get('/users').then(response=>console.log(response.data));
