让我们从了解axios开始到封装axios（ts＋react开发情况下）

1. 一句话解释什么是 AxiosAxios 是一个前端用来“发网络请求”的工具用来前后端联系它的主要工作就是帮你把前端你的网页和后端服务器/数据库连接起来实现数据的传递。2. 打个比方Axios 就是一个“快递员”你的网页前端 你的家服务器后端 远方的仓库比如淘宝的仓库数据 快递包裹如果你想从仓库拿一个包裹获取商品信息或者往仓库发一个包裹提交注册信息你需要找人帮你跑腿。Axios 就是你雇佣的这个“快递员”。你只需要告诉他“去某某地址帮我拿个东西”他就会跑过去把东西拿回来交给你如果中途出了问题地址填错了、仓库关门了他也会回来向你报告错误。3 .最核心的方法GET 和 POST就像快递有“收件”和“寄件”一样Axios 最常用的有两个方法GET 请求收件向服务器要数据。比如获取今天的天气、获取文章列表。POST 请求寄件向服务器提交数据。比如提交登录账号和密码、发布一条朋友圈。假设我们现在要在网页里用 Axios最简单的方法是在 HTML 文件里引入它。第一步引入 Axios如果你以后用 Vue 或 React会用 npm install axios 下载它但现在我们直接用网页链接引入即可!-- 在HTML文件的head标签里加入这行代码就请来了快递员 -- script srchttps://cdn.jsdelivr.net/npm/axios/dist/axios.min.js/script第二步发一个 GET 请求获取数据我们将向一个免费的测试网站JSONPlaceholder请求一篇文章的数据。// 告诉 Axios去这个网址帮我拿数据GET axios.get(https://jsonplaceholder.typicode.com/posts/1) .then(function (response) { // .then 意思是如果成功拿到了就执行这里的代码 console.log(拿到的数据是, response.data); }) .catch(function (error) { // .catch 意思是如果中途出错了比如网址填错就执行这里的代码 console.log(哎呀出错了, error); });第三步发一个 POST 请求提交数据假设我们要向服务器注册一个新用户// 准备好要寄出去的数据包裹 let newUser { name: 小明, age: 18 }; // 告诉 Axios去这个网址把 newUser 这个包裹交过去POST axios.post(https://jsonplaceholder.typicode.com/posts, newUser) .then(function (response) { console.log(提交成功服务器返回的确认信息是, response.data); }) .catch(function (error) { console.log(提交失败, error); });4.Axios实例通过axios.create()方法可以创建一个axios的实例通过axios实例同样可以发送请求。想一下为什么需要axios实例?通常在一个业务系统内会存在很多的接口接口会存在一些通用的全局配置比如请求头中包含统一的鉴权信息接口入参里统一传递登录用户信息。如果在每个接口里都配置一遍会导致接口配置很冗余。而axios实例是可以完成通用配置的后续通过同一个实例发送的请求都会生效。常用全局配置请求配置优先级实例配置全局配置。·baseURL:基础的url前缀和url参数组成完整的请求url·timeout:超时时间·header:请求头例子一、先做全局配置 axios纯净版新建一个文件request.js只做 2 件事配置基础地址创建一个 axios 实例// 1. 引入 axios import axios from axios; // 2. 创建全局配置的 axios 实例 // 以后所有请求都用这个 instance const instance axios.create({ // 全局基础URL最重要 // 以后写接口只需要写 /personalized不用写一长串地址 baseURL: http://localhost:4000, // 请求超时时间可选 timeout: 5000 }); // 3. 导出给页面用 export default instance;二、配置完了怎么用 GET以前写法麻烦axios.get(http://localhost:4000/personalized)现在全局配置后简洁import request from ./request.js; request.get(/personalized).then((res) { console.log(数据, res.data); });为什么变短了因为baseURL 已经自动帮你加上了plaintextrequest.get(/personalized) axios.get(http://localhost:4000/personalized)三、配置完了怎么用 POST以前写法axios.post(http://localhost:4000/login, { username: zs, password: 123 })现在全局配置后一样简洁import request from ./request.js; request.post(/login, { username: zs, password: 123 }).then((res) { console.log(返回结果, res.data); });四、全局配置到底帮你做了什么只讲重点统一管理地址以后服务器地址变了只需要改request.js一处不用改所有接口。所有请求共享配置比如超时、请求头...代码更干净不用每次写一长串http://localhost:40005.什么是拦截器在真实开发中网页可能要发几十个、上百个网络请求。每次寄件你都要给包裹贴邮票添加身份验证/Token。每次收件你都要拆开厚厚的纸箱只拿里面的东西提取数据甚至还要看看包裹有没有破损处理报错。如果每次发请求你都手动写一遍这些代码岂不是累死拦截器Interceptor就是你雇佣的两个“门卫大爷”一个管出门请求拦截器一个管进门响应拦截器。你只需要给门卫交代一次规则以后快递员每次进出门卫都会自动帮你处理好。1. 请求拦截器Request Interceptor—— 管“出门”的门卫大爷作用时间在快递员Axios拿着包裹准备离开你的网页去服务器之前。比喻快递员走到大门口门卫大爷拦住他“等一下老板说了现在寄快递都要戴个工牌我给你挂上再走。”最常见的用途自动加上“通行证”Token你登录后服务器会给你一个 Token类似 VIP 卡。以后每次请求都要带上它。有了拦截器门卫大爷会自动往每个请求里塞入 Token你就不用每次都手动写了。显示“加载中”门卫大爷看到快递员出门了就在网页上转个圈圈提示用户“正在加载中...”。2. 响应拦截器Response Interceptor—— 管“进门”的门卫大爷作用时间在快递员从服务器拿回包裹交到你手里的代码.then 或 await之前。比喻快递员满头大汗跑回来门卫大爷拦住他“等一下老板很忙不想看那些包装盒。我帮你把外层纸箱拆了只把里面的商品拿给老板。如果包裹在路上丢了或者地址是错的我直接去告诉老板出错了。”最常见的用途剥离无用的外包装之前我们拿数据要写 response.data因为 response 是 Axios 包装的纸箱。通过拦截器我们可以直接把 data 取出来以后你拿到的直接就是想要的数据。全局处理错误如果服务器返回报错比如“登录已过期”门卫大爷直接弹出提示框“请重新登录”并且把网页跳回登录页。你就不需要在每个请求的 .catch() 里写一遍了。6.拦截器怎么写一、先记住拦截器写在全局 axios 实例下面也就是你刚才的request.js里。二、完整专业写法文件request.js// 1. 引入 axios import axios from axios // 2. 创建实例全局配置 const service axios.create({ baseURL: http://localhost:4000, timeout: 5000 }) // // ✅ 【专业写法】请求拦截器 // service.interceptors.request.use( (config) { // 请求发送之前做的事 console.log(请求准备发送) // 比如统一加 token const token localStorage.getItem(token) if (token) { config.headers.token token } return config // 必须返回 }, (error) { // 请求错误 return Promise.reject(error) } ) // // ✅ 【专业写法】响应拦截器 // service.interceptors.response.use( (response) { // 成功直接返回 data页面不用写 .data return response.data }, (error) { // 统一错误处理 console.error(请求出错, error) return Promise.reject(error) } ) export default service三、我一句一句给你讲清楚专业版解释1. 请求拦截器service.interceptors.request.use( (config) { // config 请求的全部信息 // 你可以在这里 // 加请求头、加参数、加 token、加签名 return config // 必须 return否则请求发不出去 }, (error) { return Promise.reject(error) } )作用统一添加 token统一设置请求头统一处理公共参数2. 响应拦截器service.interceptors.response.use( (response) { // 响应成功 return response.data // 直接返回数据 }, (error) { // 响应失败404、500、超时等 return Promise.reject(error) } )作用统一返回 data统一处理错误统一判断状态码四、加完拦截器后你的 GET / POST 变成这样超级干净import request from ./request // GET request.get(/personalized).then(data { console.log(data) // 直接拿到数据不用写 res.data }) // POST request.post(/login, { username: zs, password: 123 }).then(data { console.log(data) })7、什么是请求头和token一、先看我们的代码就看这一段// 请求拦截器 service.interceptors.request.use(config { // 这里就是往 请求头 里放 token const token localStorage.getItem(token) if (token) { config.headers.token token } return config })我现在逐字逐句给你讲二、什么是 请求头 headers请求头 发给后端的【附加信息】你发请求时有两部分内容正文数据账号密码、表单内容附加信息我是谁、我登录了没、我发的是什么格式附加信息 就放在 请求头里在代码里config.headersheaders 请求头它是一个对象用来放token内容类型客户端信息三、什么是 token登录身份证token 你登录后的【身份证 / 通行证】流程你登录 → 后端给你一个字符串这个字符串就是token以后你访问需要登录的接口必须带上它四、代码里这句到底在干嘛config.headers.token token翻译成人话往请求头里放上我的登录身份证