Axios详解1.Axios 是什么2.如何使用 Axios1. 安装与引入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.如何使用 Axios1. 安装与引入在项目中通过 npm 或 yarn 安装npminstallaxios 或yarnaddaxios在代码中引入// ES6 模块引入importaxiosfromaxios;// CommonJS 引入constaxiosrequire(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需手动设置请求头并使用第三方库序列化数据constqsrequire(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{// 在发送请求之前做些什么例如添加 TokenconsttokenlocalStorage.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、超时时间等通用属性避免重复代码。constinstanceaxios.create({baseURL:https://api.example.com,timeout:5000,// 超时时间毫秒headers:{Content-Type:application/json}});//使用实例发起请求instance.get(/users).then(responseconsole.log(response.data));