[{"data":1,"prerenderedAt":1451},["ShallowReactive",2],{"blog-taxonomies":3,"blog-stats":507,"post-2025\u002F2025-12-28-前端-接口封装与请求规范axios为例":1083},[4,11,16,21,25,29,36,39,44,47,52,58,63,66,71,76,80,84,87,93,96,101,105,110,113,117,122,127,132,136,141,143,146,151,155,157,162,165,169,173,176,179,183,186,190,193,197,200,205,208,211,214,219,222,228,234,237,239,245,249,253,256,260,266,271,276,281,283,287,290,293,298,301,304,306,308,311,314,316,318,321,327,332,337,342,347,352,354,356,358,361,365,367,369,371,374,376,378,381,386,390,393,396,400,404,407,411,413,415,417,421,423,425,428,431,433,435,437,439,441,443,446,448,450,454,456,459,461,463,465,467,469,471,473,477,483,486,488,491,493,495,497,499,501,503,505],{"category":5,"tags":6},"笔记",[7,8,9,10],"QQ","插件","LiteLoader","美化",{"category":12,"tags":13},"其他",[14,15,10],"博客","IP签名",{"category":17,"tags":18},"杂谈",[19,20],"互联网","观点",{"category":5,"tags":22},[14,23,24],"GitHub","数据可视化",{"category":5,"tags":26},[14,27,28],"访问统计","不蒜子",{"category":30,"tags":31},"工具",[32,33,34,35],"Python","爬虫","选课脚本","广州大学",{"category":5,"tags":37},[38,5],"数学分析",{"category":40,"tags":41},"算法",[42,40,43],"数据结构","线性表",{"category":40,"tags":45},[42,46],"复习",{"category":5,"tags":48},[49,50,51],"高等代数","线性代数","知识点",{"category":5,"tags":53},[14,54,55,56,57],"Typora","PicGo","图床","Markdown",{"category":30,"tags":59},[60,61,62],"Jupyter","工具配置","中文",{"category":30,"tags":64},[65,61,10],"VSCode",{"category":30,"tags":67},[68,69,70,35],"路由器","OpenWrt","校园网",{"category":12,"tags":72},[73,74,75],"网络协议","Wireshark","DEVP2P",{"category":5,"tags":77},[73,74,78,79],"Lua","解码器",{"category":5,"tags":81},[82,5,83],"常微分方程","数学",{"category":5,"tags":85},[86,5,83],"概率论",{"category":30,"tags":88},[89,90,91,92],"Docker","WSL","Windows","磁盘清理",{"category":30,"tags":94},[32,33,95,35],"课程表",{"category":5,"tags":97},[14,98,99,100],"Hexo","Gitalk","评论系统",{"category":5,"tags":102},[14,103,98,104],"Obsidian","写作工具",{"category":12,"tags":106},[107,108,109],"课题研究","泊松分布","参数估计",{"category":12,"tags":111},[107,108,109,112],"组会",{"category":12,"tags":114},[109,115,108,116],"IM模型","统计学",{"category":17,"tags":118},[119,120,121],"软考","网络规划","信息系统项目管理",{"category":30,"tags":123},[124,125,126],"Arch Linux","AppImage","Linux",{"category":5,"tags":128},[129,130,131],"编程语言","计算机科学","内存管理",{"category":5,"tags":133},[134,135],"Canvas","前端",{"category":5,"tags":137},[14,138,139,140],"GitHub Actions","Vite","部署",{"category":5,"tags":142},[135],{"category":5,"tags":144},[135,145],"系统设计",{"category":5,"tags":147},[135,148,149,150],"安全","XSS","CSRF",{"category":152,"tags":153},"项目",[134,154],"PixiJS",{"category":152,"tags":156},null,{"category":40,"tags":158},[42,159,160,161],"栈","队列","JavaScript",{"category":40,"tags":163},[42,164,161],"哈希表",{"category":5,"tags":166},[167,161,168],"ES6","Set",{"category":40,"tags":170},[40,171,172],"动态规划","背包问题",{"category":40,"tags":174},[40,175],"滑动窗口",{"category":40,"tags":177},[42,178,161],"链表",{"category":40,"tags":180},[40,181,161,182],"ACM","面试",{"category":40,"tags":184},[40,161,185],"数据类型转换",{"category":40,"tags":187},[42,188,178,189],"顺序表","TypeScript",{"category":5,"tags":191},[135,154,134,192],"渲染",{"category":5,"tags":194},[135,195,134,196],"富文本编辑","wangEditor",{"category":40,"tags":198},[199,40,178],"力扣",{"category":5,"tags":201},[202,203,204,91],"DNS","加密","网络安全",{"category":5,"tags":206},[135,207],"Axios",{"category":5,"tags":209},[135,207,189,210],"接口封装",{"category":5,"tags":212},[135,213,145],"JWT",{"category":152,"tags":215},[134,216,217,154,218],"画布","React","项目开发",{"category":17,"tags":220},[221],"日志",{"category":5,"tags":223},[224,225,226,227],"Neo4j","图数据库","中心度分析","PageRank",{"category":12,"tags":229},[230,231,232,233],"论文","机器学习","随机森林","保险欺诈",{"category":5,"tags":235},[236],"人工智能",{"category":5,"tags":238},[231,40,32],{"category":12,"tags":240},[241,242,243,244],"共识算法","最长链","区块链","算法设计",{"category":5,"tags":246},[161,247,248,135],"闭包","作用域",{"category":5,"tags":250},[14,138,251,252],"RSS","自动化",{"category":30,"tags":254},[89,90,91,255],"安装",{"category":30,"tags":257},[258,91,259],"MSYS2","开发环境",{"category":5,"tags":261},[262,263,264,265],"团队协作","Git","Commit规范","代码审查",{"category":30,"tags":267},[268,269,270],"oh-my-posh","终端美化","CLI",{"category":5,"tags":272},[273,274,275],"上下文工程","Agent","RAG",{"category":5,"tags":277},[278,279,280],"前端工程化","技术选型","工程基建",{"category":5,"tags":282},[275],{"category":5,"tags":284},[285,286],"SDD","规格驱动开发",{"category":5,"tags":288},[289],"neovim",{"category":5,"tags":291},[292],"技术写作",{"category":5,"tags":294},[295,32,296,89,297],"FastAPI","后端","工程实践",{"category":152,"tags":299},[274,300],"Harness Engineering",{"category":5,"tags":302},[303],"RFC",{"category":152,"tags":305},[274,300,275],{"category":152,"tags":307},[274],{"category":40,"tags":309},[199,40,161,310],"两数之和",{"category":40,"tags":312},[199,40,161,313],"双指针",{"category":40,"tags":315},[199,40,161,178],{"category":40,"tags":317},[199,40,161,175],{"category":40,"tags":319},[199,40,161,320],"回溯",{"category":5,"tags":322},[323,324,325,326],"分布式处理与计算","Spark","Scala","RDD",{"category":5,"tags":328},[323,329,330,331],"线性回归","逻辑回归","监督学习",{"category":5,"tags":333},[323,334,335,336],"数值优化","牛顿法","收敛性",{"category":5,"tags":338},[323,339,340,341],"PCA","数据降维","正则化",{"category":5,"tags":343},[323,344,345,346],"聚类","层次聚类","K-Means",{"category":5,"tags":348},[323,349,350,351],"随机模拟","统计推断","EM算法",{"category":5,"tags":353},[24],{"category":5,"tags":355},[24],{"category":5,"tags":357},[24],{"category":40,"tags":359},[42,360],"图论",{"category":40,"tags":362},[42,363,364],"树","二叉树",{"category":40,"tags":366},[42,160],{"category":40,"tags":368},[42],{"category":40,"tags":370},[42,159],{"category":40,"tags":372},[42,40,373],"复杂度分析",{"category":40,"tags":375},[42,43,178],{"category":40,"tags":377},[42,43,188],{"category":40,"tags":379},[42,380],"基础概念",{"category":17,"tags":382},[383,384,385],"随记","照片","高中",{"category":17,"tags":387},[383,388,389],"团建","战地",{"category":17,"tags":391},[383,392],"生活",{"category":17,"tags":394},[383,395],"文学",{"category":17,"tags":397},[383,398,399],"SCP","模因",{"category":17,"tags":401},[383,402,403],"画集","艺术",{"category":17,"tags":405},[14,406,383],"写作",{"category":17,"tags":408},[383,409,410],"音乐","摇滚",{"category":17,"tags":412},[383,392],{"category":17,"tags":414},[383,409],{"category":17,"tags":416},[383,35,392],{"category":17,"tags":418},[383,419,420],"同人","手书",{"category":17,"tags":422},[383,392],{"category":17,"tags":424},[383,392],{"category":17,"tags":426},[383,427],"植物",{"category":17,"tags":429},[383,430],"读书",{"category":17,"tags":432},[383,392],{"category":17,"tags":434},[383,392],{"category":17,"tags":436},[383,392],{"category":17,"tags":438},[383,392],{"category":17,"tags":440},[383,392],{"category":17,"tags":442},[383,392],{"category":17,"tags":444},[14,445,383],"一周年",{"category":17,"tags":447},[383,392],{"category":17,"tags":449},[383,392],{"category":17,"tags":451},[35,452,453],"开源组织","SITE-193",{"category":17,"tags":455},[383,392],{"category":17,"tags":457},[383,458],"年末",{"category":17,"tags":460},[383,392],{"category":17,"tags":462},[383,392],{"category":17,"tags":464},[14,17],{"category":17,"tags":466},[383,392],{"category":17,"tags":468},[383,392],{"category":17,"tags":470},[383,392],{"category":17,"tags":472},[383,392],{"category":17,"tags":474},[383,475,476],"游戏","Control",{"category":30,"tags":478},[479,480,481,482],"Quadim","图像处理","四叉树","Rust",{"category":17,"tags":484},[14,485],"上线纪念",{"category":17,"tags":487},[383,395],{"category":30,"tags":489},[203,490],"测试",{"category":17,"tags":492},[383],{"category":17,"tags":494},[383,392],{"category":17,"tags":496},[383],{"category":5,"tags":498},[40],{"category":5,"tags":500},[40],{"category":5,"tags":502},[40],{"category":5,"tags":504},[40],{"category":5,"tags":506},[40],[508,512,516,520,524,528,532,536,540,544,548,552,556,560,564,568,572,576,579,583,587,590,594,598,602,606,610,614,618,622,626,630,634,638,642,646,650,654,658,662,666,670,674,678,682,686,690,694,698,702,706,710,714,718,722,726,730,734,738,742,746,750,754,758,762,766,770,774,778,782,786,790,794,798,801,805,809,813,817,821,825,829,833,837,841,845,849,853,857,861,865,869,873,877,881,885,889,893,897,901,904,907,911,915,919,923,927,930,934,938,942,946,950,954,957,961,965,969,973,977,981,984,988,992,996,1000,1004,1007,1011,1015,1019,1023,1027,1031,1035,1039,1043,1047,1051,1055,1059,1063,1067,1071,1075,1079],{"path":509,"words":510,"published":511,"date":156},"\u002Fposts\u002F2024\u002F2024-06-25-liteloaderqqnt",1296,"2024-06-25 11:03:08",{"path":513,"words":514,"published":515,"date":156},"\u002Fposts\u002F2024\u002F2024-06-26-ip签名",0,"2024-06-26 22:53:53",{"path":517,"words":518,"published":519,"date":156},"\u002Fposts\u002F2024\u002F2024-06-29-何加盐中文互联网正在加速崩塌",4853,"2024-06-29 00:47:13",{"path":521,"words":522,"published":523,"date":156},"\u002Fposts\u002F2024\u002F2024-07-12-github-chart",270,"2024-07-12 20:02:50",{"path":525,"words":526,"published":527,"date":156},"\u002Fposts\u002F2024\u002F2024-07-14-访客数统计",192,"2024-07-24 01:34:28",{"path":529,"words":530,"published":531,"date":156},"\u002Fposts\u002F2024\u002F2024-07-26-广大选课脚本",110,"2024-07-26 01:34:28",{"path":533,"words":534,"published":535,"date":156},"\u002Fposts\u002F2024\u002F2024-07-26-数学分析笔记其二",14,"2024-07-26 23:54:02",{"path":537,"words":538,"published":539,"date":156},"\u002Fposts\u002F2024\u002F2024-07-26-数据结构复习其二",12856,"2024-07-26 02:48:08",{"path":541,"words":542,"published":543,"date":156},"\u002Fposts\u002F2024\u002F2024-07-26-数据结构复习相关",32856,"2024-07-26 02:24:14",{"path":545,"words":546,"published":547,"date":156},"\u002Fposts\u002F2024\u002F2024-07-26-线性代数与空间解析几何知识点全汇总",6110,"2024-07-26 03:27:55",{"path":549,"words":550,"published":551,"date":156},"\u002Fposts\u002F2024\u002F2024-07-31-typora-picgo-兰空图床打造markdown写作环境",311,"2024-07-31 12:56:23",{"path":553,"words":554,"published":555,"date":156},"\u002Fposts\u002F2024\u002F2024-09-02-jupyter配置中文",441,"2024-09-02 23:49:05",{"path":557,"words":558,"published":559,"date":156},"\u002Fposts\u002F2024\u002F2024-09-02-自定义vscode背景图片",100,"2024-09-02 23:39:00",{"path":561,"words":562,"published":563,"date":156},"\u002Fposts\u002F2024\u002F2024-09-03-制作gzhu校园网路由器",1423,"2024-09-03 23:43:18",{"path":565,"words":566,"published":567,"date":156},"\u002Fposts\u002F2024\u002F2024-09-26-09-25-2024",136,"2024-09-26 00:49:26",{"path":569,"words":570,"published":571,"date":156},"\u002Fposts\u002F2024\u002F2024-11-04-创建一个网络包解码器分析devp2p协议",1943,"2024-11-04 16:45:19",{"path":573,"words":574,"published":575,"date":156},"\u002Fposts\u002F2024\u002F2025-03-09-2024一些笔记常微分",16,"2024-12-09 22:51:00",{"path":577,"words":574,"published":578,"date":156},"\u002Fposts\u002F2024\u002F2025-03-09-2024一些笔记概率论","2025-03-09 22:51:00",{"path":580,"words":581,"published":582,"date":156},"\u002Fposts\u002F2025\u002F2025-03-01-windows下释放docker占用的wsl空间",164,"2025-03-01 13:54:15",{"path":584,"words":585,"published":586,"date":156},"\u002Fposts\u002F2025\u002F2025-03-01-爬虫实战-爬取广州大学课程表",774,"2025-03-01 14:55:48",{"path":588,"words":530,"published":589,"date":156},"\u002Fposts\u002F2025\u002F2025-04-03-hexo集成gitalk的问题","2025-04-03 14:26:34",{"path":591,"words":592,"published":593,"date":156},"\u002Fposts\u002F2025\u002F2025-09-22-记一次配置obsidian配合hexo写博客",92,"2025-09-22 16:47:52",{"path":595,"words":596,"published":597,"date":156},"\u002Fposts\u002F2025\u002F2025-10-24-10-20课题",204,"2025-10-24 08:15:01",{"path":599,"words":600,"published":601,"date":156},"\u002Fposts\u002F2025\u002F2025-11-02-组会朝花夕拾",501,"2025-11-02 18:56:59",{"path":603,"words":604,"published":605,"date":156},"\u002Fposts\u002F2025\u002F2025-11-05-基于随机加权推断模型im的参数估计算法",481,"2025-11-05 20:51:41",{"path":607,"words":608,"published":609,"date":156},"\u002Fposts\u002F2025\u002F2025-11-09-关于软考高项网规",884,"2025-11-09 19:54:52",{"path":611,"words":612,"published":613,"date":156},"\u002Fposts\u002F2025\u002F2025-11-17-arch-linux运行appimage相关",365,"2025-11-17 09:59:59",{"path":615,"words":616,"published":617,"date":156},"\u002Fposts\u002F2025\u002F2025-11-19-相关概念",2058,"2025-11-19 11:06:20",{"path":619,"words":620,"published":621,"date":156},"\u002Fposts\u002F2025\u002F2025-11-21-web可视化实践canvas",6393,"2025-11-21 14:50:48",{"path":623,"words":624,"published":625,"date":156},"\u002Fposts\u002F2025\u002F2025-11-22-使用-github-actions-自动部署基于vite的项目到-github-pages",272,"2025-11-23 01:59:24",{"path":627,"words":628,"published":629,"date":156},"\u002Fposts\u002F2025\u002F2025-11-22-关于前端包管理器npmpnpmyarn和bun",4890,"2025-11-22 21:21:15",{"path":631,"words":632,"published":633,"date":156},"\u002Fposts\u002F2025\u002F2025-11-23-undo-redo-机制具体实现",7839,"2025-11-23 19:15:00",{"path":635,"words":636,"published":637,"date":156},"\u002Fposts\u002F2025\u002F2025-11-27-前端安全-关于xss与crsf",1866,"2025-11-28 02:05:25",{"path":639,"words":640,"published":641,"date":156},"\u002Fposts\u002F2025\u002F2025-12-05-现代协同-2d-画布编辑器pixijs-v8",4285,"2025-12-05 02:00:16",{"path":643,"words":644,"published":645,"date":156},"\u002Fposts\u002F2025\u002F2025-12-07-杂谈-课题组系统设计",3710,"2025-12-07 21:09:33",{"path":647,"words":648,"published":649,"date":156},"\u002Fposts\u002F2025\u002F2025-12-25-javascript中的数组方法与栈stack和队列queue的实现",474,"2025-11-29 16:58:15",{"path":651,"words":652,"published":653,"date":156},"\u002Fposts\u002F2025\u002F2025-12-25-关于javascript-实现哈希表",189,"2025-11-27 11:31:39",{"path":655,"words":656,"published":657,"date":156},"\u002Fposts\u002F2025\u002F2025-12-25-关于javascript的set方法",332,"2025-12-25 15:26:18",{"path":659,"words":660,"published":661,"date":156},"\u002Fposts\u002F2025\u002F2025-12-25-关于动态规划(背包问题为例)",1238,"2025-11-17 18:24:04",{"path":663,"words":664,"published":665,"date":156},"\u002Fposts\u002F2025\u002F2025-12-25-关于滑动窗口",712,"2025-11-20 15:04:40",{"path":667,"words":668,"published":669,"date":156},"\u002Fposts\u002F2025\u002F2025-12-25-关于链表(javascript)",500,"2025-11-25 13:00:48",{"path":671,"words":672,"published":673,"date":156},"\u002Fposts\u002F2025\u002F2025-12-25-面试算法acm模式构建构建输入输出模板",2051,"2025-12-25 23:09:45",{"path":675,"words":676,"published":677,"date":156},"\u002Fposts\u002F2025\u002F2025-12-26-javascript-数字数组字符串的处理",483,"2025-12-26 11:20:25",{"path":679,"words":680,"published":681,"date":156},"\u002Fposts\u002F2025\u002F2025-12-26-javascripttypescript-的顺序表链表实现",446,"2025-12-26 12:16:12",{"path":683,"words":684,"published":685,"date":156},"\u002Fposts\u002F2025\u002F2025-12-27-前端画布设计vol-1-实现基础yuan素渲染和状态控制",2136,"2025-12-28 01:23:08",{"path":687,"words":688,"published":689,"date":156},"\u002Fposts\u002F2025\u002F2025-12-27-前端画布设计vol-2-实现富文本编辑",1838,"2025-12-28 02:58:47",{"path":691,"words":692,"published":693,"date":156},"\u002Fposts\u002F2025\u002F2025-12-27-算法刷题-关于链表操作",2135,"2025-12-27 16:12:42",{"path":695,"words":696,"published":697,"date":156},"\u002Fposts\u002F2025\u002F2025-12-27-配置dnscrypt-proxy实现加密dns服务windows",1899,"2025-11-15 01:06:37",{"path":699,"words":700,"published":701,"date":156},"\u002Fposts\u002F2025\u002F2025-12-28-前端-关于网络请求xhrajaxfetchaxios",7788,"2025-10-28 15:48:46",{"path":703,"words":704,"published":705,"date":156},"\u002Fposts\u002F2025\u002F2025-12-28-前端-接口封装与请求规范axios为例",2373,"2025-12-29 01:01:18",{"path":707,"words":708,"published":709,"date":156},"\u002Fposts\u002F2025\u002F2025-12-28-前端-身份验证管理-基于-jwt-token-的实现",2709,"2025-11-23 22:04:41",{"path":711,"words":712,"published":713,"date":156},"\u002Fposts\u002F2025\u002F2025-12-29-记canvas画布项目开发",6254,"2025-12-29 04:52:15",{"path":715,"words":716,"published":717,"date":156},"\u002Fposts\u002F2025\u002Fabout-site",116,"2025-03-31 16:44:24",{"path":719,"words":720,"published":721,"date":156},"\u002Fposts\u002F2025\u002F使用neo4j图数据科学库gds进行中心度分析",143,"2025-04-02 23:37:24",{"path":723,"words":724,"published":725,"date":156},"\u002Fposts\u002F2026\u002F2026-01-03-论文实训草稿",10445,"2026-01-03 14:10:49",{"path":727,"words":728,"published":729,"date":156},"\u002Fposts\u002F2026\u002F2026-01-06-人工智能导论",11461,"2026-01-07 03:25:49",{"path":731,"words":732,"published":733,"date":156},"\u002Fposts\u002F2026\u002F2026-01-07-机器学习相关算法",82,"2026-01-08 02:28:13",{"path":735,"words":736,"published":737,"date":156},"\u002Fposts\u002F2026\u002F2026-01-16-关于低复杂度最长链共识算法设计",4466,"2026-01-16 10:33:23",{"path":739,"words":740,"published":741,"date":156},"\u002Fposts\u002F2026\u002F2026-01-19-杂记2026-01-19",5754,"2026-01-20 01:03:26",{"path":743,"words":744,"published":745,"date":156},"\u002Fposts\u002F2026\u002F2026-01-22-github-action-自动同步博客到-github-主页",1069,"2026-01-22 16:31:47",{"path":747,"words":748,"published":749,"date":156},"\u002Fposts\u002F2026\u002F2026-03-01-windows-wsl安装docker",257,"2026-03-01 20:55:31",{"path":751,"words":752,"published":753,"date":156},"\u002Fposts\u002F2026\u002F2026-03-14-关于-msys2",701,"2026-03-15 03:05:04",{"path":755,"words":756,"published":757,"date":156},"\u002Fposts\u002F2026\u002F2026-03-28-团队项目协作规范随记",2419,"2026-03-29 05:33:50",{"path":759,"words":760,"published":761,"date":156},"\u002Fposts\u002F2026\u002F2026-03-29-oh-my-posh配置分享",104,"2026-03-29 16:34:43",{"path":763,"words":764,"published":765,"date":156},"\u002Fposts\u002F2026\u002F2026-06-13-从上下文工程到-agent-harness-engineering",8840,"2026-06-13 21:06:20",{"path":767,"words":768,"published":769,"date":156},"\u002Fposts\u002F2026\u002F2026-07-13-简谈前端基建质量标准与ai友好建设",3814,"2026-07-13 21:06:20",{"path":771,"words":772,"published":773,"date":156},"\u002Fposts\u002F2026\u002F2026-07-15-agentic-rag-系统实践",13357,"2026-07-15 21:06:20",{"path":775,"words":776,"published":777,"date":156},"\u002Fposts\u002F2026\u002F2026-07-18-简谈sdd规范驱动开发-copy",4476,"2026-07-18 11:06:20",{"path":779,"words":780,"published":781,"date":156},"\u002Fposts\u002F2026\u002F2026-07-20-个人neovim配置分享",366,"2026-07-22 13:46:50",{"path":783,"words":784,"published":785,"date":156},"\u002Fposts\u002F2026\u002F2026-07-20-关于技术写作-设计文档",6763,"2026-07-20 13:46:50",{"path":787,"words":788,"published":789,"date":156},"\u002Fposts\u002F2026\u002F2026-07-29-fastapi-工程实践随记",3417,"2026-07-29 04:58:34",{"path":791,"words":792,"published":793,"date":156},"\u002Fposts\u002Frfc_agentic_project\u002F2026-06-19-rfc-liskin_code_agent",3563,"2026-06-19 15:18:20",{"path":795,"words":796,"published":797,"date":156},"\u002Fposts\u002Frfc_agentic_project\u002F2026-07-25-rfc-glushkov_ogas",13461,"2026-07-28 23:46:50",{"path":799,"words":800,"published":793,"date":156},"\u002Fposts\u002Frfc_agentic_project\u002F2026-08-03-adr-ogas-arkhiv",2698,{"path":802,"words":803,"published":804,"date":156},"\u002Fposts\u002Frfc_agentic_project\u002Frag\u002F2026-08-12-arkhiv_rag-vol-1",4366,"2026-08-12 15:18:20",{"path":806,"words":807,"published":808,"date":156},"\u002Fposts\u002Fleetcode\u002F2025-12-25-力扣百题速练javascripttypescriptvol-1",3108,"2025-12-25 13:57:08",{"path":810,"words":811,"published":812,"date":156},"\u002Fposts\u002Fleetcode\u002F2025-12-26-力扣百题速练javascripttypescriptvol-2",3185,"2025-12-26 13:57:08",{"path":814,"words":815,"published":816,"date":156},"\u002Fposts\u002Fleetcode\u002F2025-12-28-力扣百题速练javascripttypescriptvol-3",2533,"2025-12-29 02:15:44",{"path":818,"words":819,"published":820,"date":156},"\u002Fposts\u002Fleetcode\u002F2026-01-17-力扣百题速练javascripttypescriptvol-4",3024,"2026-01-17 22:53:01",{"path":822,"words":823,"published":824,"date":156},"\u002Fposts\u002Fleetcode\u002F2026-01-19-力扣百题速练javascripttypescriptvol-5",293,"2026-01-19 15:15:12",{"path":826,"words":827,"published":828,"date":156},"\u002Fposts\u002F分布式处理与计算\u002F分布式处理与计算spark系统与scala语言",4320,"2026-07-06 14:10:49",{"path":830,"words":831,"published":832,"date":156},"\u002Fposts\u002F分布式处理与计算\u002F分布式处理与计算分类与回归分析",2081,"2026-07-07 12:40:29",{"path":834,"words":835,"published":836,"date":156},"\u002Fposts\u002F分布式处理与计算\u002F分布式处理与计算数值优化方法",2182,"2026-07-07 13:50:29",{"path":838,"words":839,"published":840,"date":156},"\u002Fposts\u002F分布式处理与计算\u002F分布式处理与计算数据降维",1583,"2026-07-07 21:50:29",{"path":842,"words":843,"published":844,"date":156},"\u002Fposts\u002F分布式处理与计算\u002F分布式处理与计算聚类分析",1882,"2026-07-07 16:50:29",{"path":846,"words":847,"published":848,"date":156},"\u002Fposts\u002F分布式处理与计算\u002F分布式处理与计算随机模拟与统计推断",2433,"2026-07-06 22:40:29",{"path":850,"words":851,"published":852,"date":156},"\u002Fposts\u002F数据可视化\u002F2026-06-14-数据可视化-基本图像",10011,"2026-06-14 20:18:20",{"path":854,"words":855,"published":856,"date":156},"\u002Fposts\u002F数据可视化\u002F2026-06-14-数据可视化-概论",10030,"2026-06-14 15:18:20",{"path":858,"words":859,"published":860,"date":156},"\u002Fposts\u002F数据可视化\u002F2026-06-15-数据可视化-可视化库",2032,"2026-06-15 20:18:20",{"path":862,"words":863,"published":864,"date":156},"\u002Fposts\u002F数据结构\u002F2025-09-29-数据结构-图",5451,"2025-04-15 20:48:06",{"path":866,"words":867,"published":868,"date":156},"\u002Fposts\u002F数据结构\u002F2025-09-29-数据结构-树",4211,"2025-04-30 02:19:06",{"path":870,"words":871,"published":872,"date":156},"\u002Fposts\u002F数据结构\u002F2025-09-29-数据结构-队列",921,"2025-04-11 15:30:08",{"path":874,"words":875,"published":876,"date":156},"\u002Fposts\u002F数据结构\u002F关于数据结构的一些想法",456,"2025-04-04 19:13:49",{"path":878,"words":879,"published":880,"date":156},"\u002Fposts\u002F数据结构\u002F数据结构-栈",920,"2025-04-18 00:17:37",{"path":882,"words":883,"published":884,"date":156},"\u002Fposts\u002F数据结构\u002F数据结构-算法复杂度",2153,"2025-04-05 16:09:55",{"path":886,"words":887,"published":888,"date":156},"\u002Fposts\u002F数据结构\u002F数据结构-线性表链表",4572,"2025-04-06 00:24:40",{"path":890,"words":891,"published":892,"date":156},"\u002Fposts\u002F数据结构\u002F数据结构-线性表顺序表",4191,"2025-04-05 22:09:59",{"path":894,"words":895,"published":896,"date":156},"\u002Fposts\u002F数据结构\u002F数据结构-绪论",2881,"2025-04-05 11:31:22",{"path":898,"words":899,"published":156,"date":900},"\u002Fposts\u002F杂记\u002F2023-12-26-2023年12月26日",7,"2023-12-26 23:51:33",{"path":902,"words":899,"published":156,"date":903},"\u002Fposts\u002F杂记\u002F2024-01-01-2024团建","2024-01-01 01:51:27",{"path":905,"words":581,"published":156,"date":906},"\u002Fposts\u002F杂记\u002F2024-01-09-随记","2024-01-09 20:50:35",{"path":908,"words":909,"published":156,"date":910},"\u002Fposts\u002F杂记\u002F2024-03-12-花名",5275,"2024-03-12 16:04:23",{"path":912,"words":913,"published":156,"date":914},"\u002Fposts\u002F杂记\u002F2024-04-15-逆模因",1353,"2024-04-15 00:26:16",{"path":916,"words":917,"published":156,"date":918},"\u002Fposts\u002F杂记\u002F2024-05-03-艺作",27,"2024-05-03 00:01:00",{"path":920,"words":921,"published":156,"date":922},"\u002Fposts\u002F杂记\u002F2024-05-21-关于博客",1720,"2024-02-21 23:21:11",{"path":924,"words":925,"published":156,"date":926},"\u002Fposts\u002F杂记\u002F2024-06-20-dnvrc维克多崔专访-2023",2036,"2024-06-20 00:28:39",{"path":928,"words":760,"published":156,"date":929},"\u002Fposts\u002F杂记\u002F2024-06-25-6月25日随记","2024-06-25 12:46:36",{"path":931,"words":932,"published":156,"date":933},"\u002Fposts\u002F杂记\u002F2024-06-25-歌名-想見星星",148,"2024-06-25 22:47:59",{"path":935,"words":936,"published":156,"date":937},"\u002Fposts\u002F杂记\u002F2024-07-11-桂花岗",6,"2024-07-11 00:28:17",{"path":939,"words":940,"published":156,"date":941},"\u002Fposts\u002F杂记\u002F2024-07-15-rolling-bocci",9,"2024-07-15 21:25:56",{"path":943,"words":944,"published":156,"date":945},"\u002Fposts\u002F杂记\u002F2024-07-22-七月九日",34,"2024-07-09 17:54:23",{"path":947,"words":948,"published":156,"date":949},"\u002Fposts\u002F杂记\u002F2024-07-22-六月随记",1052,"2024-07-22 01:03:19",{"path":951,"words":952,"published":156,"date":953},"\u002Fposts\u002F杂记\u002F2024-07-22-石菖蒲",41,"2024-07-10 01:26:05",{"path":955,"words":514,"published":156,"date":956},"\u002Fposts\u002F杂记\u002F2024-07-23-新书","2024-07-23 01:05:49",{"path":958,"words":959,"published":156,"date":960},"\u002Fposts\u002F杂记\u002F2024-07-29-年前",74,"2024-07-29 23:59:07",{"path":962,"words":963,"published":156,"date":964},"\u002Fposts\u002F杂记\u002F2024-07-30-周边",138,"2024-07-30 02:03:23",{"path":966,"words":967,"published":156,"date":968},"\u002Fposts\u002F杂记\u002F2024-07-31-2024-7-31日",185,"2024-07-31 01:21:52",{"path":970,"words":971,"published":156,"date":972},"\u002Fposts\u002F杂记\u002F2024-08-02-八月",1710,"2024-08-30 00:31:02",{"path":974,"words":975,"published":156,"date":976},"\u002Fposts\u002F杂记\u002F2024-09-01-九月",1484,"2024-09-26 16:30:15",{"path":978,"words":979,"published":156,"date":980},"\u002Fposts\u002F杂记\u002F2024-09-08-2024年9月8日",97,"2024-09-08 13:59:36",{"path":982,"words":514,"published":156,"date":983},"\u002Fposts\u002F杂记\u002F2024-09-19-博客站的一周年","2024-09-18 23:36:24",{"path":985,"words":986,"published":156,"date":987},"\u002Fposts\u002F杂记\u002F2024-10-03-十月",1028,"2024-10-31 23:54:27",{"path":989,"words":990,"published":156,"date":991},"\u002Fposts\u002F杂记\u002F2024-11-04-十一月",2134,"2024-11-30 00:04:39",{"path":993,"words":994,"published":156,"date":995},"\u002Fposts\u002F杂记\u002F2024-11-10-gzhu-site-193",80,"2024-11-10 19:19:12",{"path":997,"words":998,"published":156,"date":999},"\u002Fposts\u002F杂记\u002F2024-12-01-十二月",455,"2024-12-30 23:13:47",{"path":1001,"words":1002,"published":156,"date":1003},"\u002Fposts\u002F杂记\u002F2024-12-21-年末",23,"2024-12-21 23:21:49",{"path":1005,"words":522,"published":156,"date":1006},"\u002Fposts\u002F杂记\u002F2025-01-30-一月","2025-01-30 23:44:41",{"path":1008,"words":1009,"published":156,"date":1010},"\u002Fposts\u002F杂记\u002F2025-03-01-二月",224,"2025-02-28 00:11:08",{"path":1012,"words":1013,"published":156,"date":1014},"\u002Fposts\u002F杂记\u002F2025-03-01-博客杂谈",344,"2025-03-01 16:03:18",{"path":1016,"words":1017,"published":156,"date":1018},"\u002Fposts\u002F杂记\u002F2025-03-05-三月",2090,"2025-03-05 19:17:28",{"path":1020,"words":1021,"published":156,"date":1022},"\u002Fposts\u002F杂记\u002F2025-07-10-七月",361,"2025-07-10 22:04:32",{"path":1024,"words":1025,"published":156,"date":1026},"\u002Fposts\u002F杂记\u002F2025-09-21-九月",781,"2025-09-21 20:53:37",{"path":1028,"words":1029,"published":156,"date":1030},"\u002Fposts\u002F杂记\u002F2025-10-09-十月",591,"2025-10-09 00:35:07",{"path":1032,"words":1033,"published":156,"date":1034},"\u002Fposts\u002F杂记\u002Fcontrol",13,"2023-09-25 13:03:59",{"path":1036,"words":1037,"published":156,"date":1038},"\u002Fposts\u002F杂记\u002Fquadim四叉树图像处理",1094,"2023-10-21 11:27:06",{"path":1040,"words":1041,"published":156,"date":1042},"\u002Fposts\u002F杂记\u002Fsuccess",24,"2023-09-22 15:59:07",{"path":1044,"words":1045,"published":156,"date":1046},"\u002Fposts\u002F杂记\u002F三光年",295,"2023-11-18 04:18:40",{"path":1048,"words":1049,"published":156,"date":1050},"\u002Fposts\u002F杂记\u002F加密测试",961,"2023-11-21 14:24:01",{"path":1052,"words":1053,"published":156,"date":1054},"\u002Fposts\u002F杂记\u002F啊啊啊啊啊啊啊",54,"2023-09-20 17:29:33",{"path":1056,"words":1057,"published":156,"date":1058},"\u002Fposts\u002F杂记\u002F杂谈",124,"2023-09-25 23:11:32",{"path":1060,"words":1061,"published":156,"date":1062},"\u002Fposts\u002F杂记\u002F艹",25,"2023-10-21 17:40:43",{"path":1064,"words":1065,"published":1066,"date":156},"\u002Fposts\u002F神经网络\u002F神经网络与深度学习卷积神经网络",3168,"2026-06-07 11:23:08",{"path":1068,"words":1069,"published":1070,"date":156},"\u002Fposts\u002F神经网络\u002F神经网络与深度学习循环神经网络",2348,"2026-06-07 11:33:08",{"path":1072,"words":1073,"published":1074,"date":156},"\u002Fposts\u002F神经网络\u002F神经网络与深度学习改进学习方法",3360,"2026-06-07 10:13:08",{"path":1076,"words":1077,"published":1078,"date":156},"\u002Fposts\u002F神经网络\u002F神经网络与深度学习深度生成模型",2727,"2026-06-07 11:43:08",{"path":1080,"words":1081,"published":1082,"date":156},"\u002Fposts\u002F神经网络\u002F神经网络与深度学习神经网络基础",3205,"2026-06-07 10:03:08",{"id":1084,"title":1085,"abbrlink":1086,"body":1087,"category":5,"cover":156,"date":156,"description":1230,"extension":1441,"mathjax":1442,"meta":1443,"navigation":1442,"path":703,"published":705,"readingMinutes":1446,"seo":1447,"stem":1448,"sticky":156,"swiper_index":156,"tags":1449,"updated":156,"words":704,"__hash__":1450},"posts\u002Fposts\u002F2025\u002F2025-12-28-前端-接口封装与请求规范（Axios为例）.md","2025-12-28-前端-接口类型定义、Axios 封装与请求规范","16956",{"type":1088,"value":1089,"toc":1426},"minimark",[1090,1095,1099,1102,1106,1129,1132,1158,1162,1218,1224,1233,1236,1239,1265,1268,1270,1274,1277,1342,1345,1403,1406],[1091,1092,1094],"h3",{"id":1093},"关于接口类型定义axios-封装与请求规范的常见问题","关于接口类型定义、Axios 封装与请求规范的常见问题",[1096,1097,1098],"p",{},"使用 TypeScript 的 React 或 Vue 项目中，通常会高度重视网络层的工程化实践，通常会从实际项目经验入手，逐步深入到设计理念、类型安全和最佳实践",[1096,1100,1101],{},"关于接口类型定义、Axios 封装与请求规范的常见问题整理如下：",[1103,1104,1105],"h4",{"id":1105},"基本经验与动机",[1107,1108,1109,1117,1123],"ul",{},[1110,1111,1112,1116],"li",{},[1113,1114,1115],"strong",{},"在项目中是否对 Axios 进行过二次封装？为什么需要封装，而不是直接使用原生 Axios？"," 是的，在所有中大型项目中都会对 Axios 进行二次封装。主要原因是原生 Axios 配置分散、重复代码多（如每个请求都需手动设置 baseURL、headers 和错误处理）。封装后可以统一管理公共逻辑，减少冗余，提升代码一致性和可维护性，避免直接使用导致的配置不统一和后期修改困难。",[1110,1118,1119,1122],{},[1113,1120,1121],{},"Vue\u002FReact 项目中，你们是怎么管理 API 接口的？有统一的请求封装吗？"," 我们采用统一的请求封装层。通常创建一个独立的 apiClient 实例作为基础，然后在 services 或 api 目录下按业务模块（如 auth、user、room）划分文件，每个模块导出具体的请求函数。所有接口调用都通过这些封装函数进行，确保风格一致、类型安全，并便于后期维护和 mock。",[1110,1124,1125,1128],{},[1113,1126,1127],{},"说说 Axios 二次封装的主要目的和好处？"," 主要目的是统一配置和公共逻辑处理，包括 baseURL、超时、Token 添加、错误统一处理等。好处包括：减少重复代码、提升可维护性、统一错误提示和加载状态、便于环境切换、支持类型安全（TS 项目），最终降低 bug 率并提高团队开发效率。",[1103,1130,1131],{"id":1131},"实现细节与规范",[1107,1133,1134,1140,1146,1152],{},[1110,1135,1136,1139],{},[1113,1137,1138],{},"怎么封装 Axios 的？主要封装了哪些方面（如 baseURL、超时、请求\u002F响应拦截器、错误处理）？"," 首先使用 axios.create() 创建实例，设置 baseURL、timeout 和默认 headers。然后添加请求拦截器统一注入 Token 和加载状态；响应拦截器中提取 data、处理业务 code、统一错误提示（如 401 跳转登录），并支持 Token 刷新重试。",[1110,1141,1142,1145],{},[1113,1143,1144],{},"在项目中，如何统一处理请求头（如添加 Token）、环境切换（开发\u002F生产 baseURL）和错误提示？"," 请求头通过请求拦截器或 setAuthToken 函数统一添加 Authorization；环境切换利用 Vite 或 Webpack 的环境变量动态设置 baseURL；错误提示在响应拦截器中根据 status 或业务 code 统一处理，使用 toast 组件显示消息，或触发全局错误处理逻辑。",[1110,1147,1148,1151],{},[1113,1149,1150],{},"封装后，如何组织和管理具体的 API 接口？（如按模块分文件、统一导出）"," 按业务模块分文件（如 auth.ts、room.ts），每个文件定义相关接口函数并导出；再创建一个 index.ts 统一导出所有模块，便于在业务组件中按需导入（如 import { login } from '@\u002Fapi'）。这样结构清晰，便于维护和权限控制。",[1110,1153,1154,1157],{},[1113,1155,1156],{},"如何处理请求取消、重复请求防抖或加载状态？"," 使用 Axios CancelToken 或 AbortController 实现请求取消，适用于组件卸载或搜索防抖场景；重复请求通过 URL + 方法 + 参数的 Map 缓存取消函数实现防重；加载状态可在拦截器中 dispatch 全局 loading action，或在单个请求中使用 async\u002Fawait 结合状态管理。",[1103,1159,1161],{"id":1160},"类型安全与工程化typescript","类型安全与工程化（TypeScript）",[1107,1163,1164,1175,1189,1207,1213],{},[1110,1165,1166,1169,1170,1174],{},[1113,1167,1168],{},"在使用 TypeScript 的项目中，你是怎么结合接口类型定义来封装 Axios 的？如何实现响应数据的类型推导？"," 先在 types\u002Fapi.ts 中集中定义所有接口的请求参数和响应类型。然后在服务函数中使用 Axios 泛型，如 ",[1171,1172,1173],"code",{},"apiClient.get\u003CRoomListResponse>(url)","，这样返回值的类型自动推导为定义的接口类型，实现全程类型检查和编辑器提示。",[1110,1176,1177,1184,1185,1188],{},[1113,1178,1179,1180,1183],{},"说说 Axios 泛型的使用，比如如何通过 ",[1171,1181,1182],{},"\u003CT>"," 指定返回类型，确保调用时有类型提示和检查？"," 通过 ",[1171,1186,1187],{},"apiClient.post\u003CT>(url, data) ","的方式指定泛型 T 为具体响应类型（如 LoginResponse）。这样调用时 TypeScript 会自动推导返回值属性，提供属性提示和编译时错误检查（如访问不存在字段会报错），显著提升类型安全。",[1110,1190,1191,1198,1199,1202,1203,1206],{},[1113,1192,1193,1194,1197],{},"怎么定义接口请求参数和响应类型的？有统一的响应包装类型（如 ",[1171,1195,1196],{},"ApiResponse\u003CT>","）吗？"," 定义通用包装类型 ",[1171,1200,1201],{},"interface ApiResponse\u003CT> { code: number; data: T; message?: string; }"," 所有接口响应类型继承此泛型（如 ",[1171,1204,1205],{},"type LoginResponse = ApiResponse\u003C{ token: string }>;）","，便于统一处理业务 code 和错误。",[1110,1208,1209,1212],{},[1113,1210,1211],{},"在封装中，如何处理拦截器或自定义配置的 TypeScript 类型扩展（如扩展 AxiosRequestConfig）？"," 通过模块声明扩展 AxiosRequestConfig 接口，添加自定义字段（如 _retry: boolean 用于 Token 刷新）。拦截器参数类型自然继承扩展后的配置，确保类型兼容和提示完整。",[1110,1214,1215],{},[1113,1216,1217],{},"如果后端返回结构不统一，怎么通过类型守卫或转型确保类型安全？",[1219,1220,1221],"blockquote",{},[1096,1222,1223],{},"类型守卫（Type Guard）是 TypeScript 中的一种机制，用于在运行时缩小变量的类型范围，从而让编译器在特定代码块中更精确地推断变量的类型。它本质上是一个返回布尔值的表达式或函数，当该表达式为 true 时，TypeScript 会自动将变量的类型收窄（narrow）为更具体的类型。",[1225,1226,1231],"pre",{"className":1227,"code":1229,"language":189,"meta":1230},[1228],"language-TypeScript","\u002F\u002Ftypeof 类型守卫 使用 JavaScript 的 typeof 操作符\nfunction print(value: string | number) {\n  if (typeof value === 'string') {\n    \u002F\u002F 这里 value 被收窄为 string\n    console.log(value.toUpperCase());\n  } else {\n  \u002F\u002F 这里 value 被收窄为 number\n    console.log(value.toFixed(2));\n  }\n}\n","",[1171,1232,1229],{"__ignoreMap":1230},[1096,1234,1235],{},"在响应拦截器中先转型为 any 或 unknown，然后使用类型守卫（如 if ('code' in res && res.code === 0)）判断成功，再返回 res.data 并断言为具体类型。这样既兼容不统一结构，又保持业务层类型安全",[1103,1237,1238],{"id":1238},"深度与实践相关",[1107,1240,1241,1247,1253,1259],{},[1110,1242,1243,1246],{},[1113,1244,1245],{},"封装后，在业务组件中调用接口的体验如何？相比直接用 Axios 有哪些改进？"," 体验显著提升：调用简洁，自动获得类型提示和错误检查；无需关心 Token、baseURL 或错误处理。相比直接使用，减少了大量样板代码，降低了出错概率，并提高了代码可读性。",[1110,1248,1249,1252],{},[1113,1250,1251],{},"有考虑过从 OpenAPI\u002FSwagger 自动生成类型和接口函数吗？"," 是的，在较大项目中会使用 openapi-typescript 或 swagger-typescript-api 从后端 OpenAPI 文档自动生成类型和请求函数。这样保持前后端类型一致，减少手动维护成本，并进一步提升工程化水平。",[1110,1254,1255,1258],{},[1113,1256,1257],{},"如果项目规模很大，是怎么进一步优化网络层的（如模块化、服务层分离）？"," 通过严格的服务层分离：apiClient 只负责基础请求，services 层按领域划分（如 userService、orderService），每个服务聚合相关接口并处理业务逻辑；结合代码生成和 mock 工具，实现高度模块化和可测试性。",[1110,1260,1261,1264],{},[1113,1262,1263],{},"说说项目中网络请求的常见痛点，以及封装如何解决的。"," 常见痛点包括 Token 管理散乱、错误处理不统一、环境配置易错、类型不安全。二次封装通过拦截器统一 Token 和错误、环境变量管理配置、TS 泛型确保类型安全，有效解决了这些问题，显著降低了联调和维护成本。",[1266,1267],"hr",{},[1266,1269],{},[1091,1271,1273],{"id":1272},"axios-封装与接口管理具体实现","Axios 封装与接口管理具体实现",[1103,1275,1276],{"id":1276},"基础的实现",[1278,1279,1280,1294,1319,1331],"ol",{},[1110,1281,1282,1285,1286],{},[1113,1283,1284],{},"如何封装 Axios？"," 一个典型的 Axios 封装结构如下：",[1225,1287,1292],{"className":1288,"code":1290,"language":1291,"meta":1230},[1289],"language-ts","\u002F\u002F api\u002Futils\u002FapiClient.ts\nimport axios, { type AxiosRequestConfig } from \"axios\";\n\nconst apiClient = axios.create({\n  baseURL: import.meta.env.VITE_API_BASE_URL || \"\u002Fapi\",\n  timeout: 10000,\n  headers: {\n    \"Content-Type\": \"application\u002Fjson\",\n  },\n});\n\n\u002F\u002F 请求拦截器\napiClient.interceptors.request.use(\n  (config) => {\n    const token = localStorage.getItem(\"token\");\n    if (token) {\n      config.headers.Authorization = `Bearer ${token}`;\n    }\n    return config;\n  },\n  (error) => Promise.reject(error)\n);\n\n\u002F\u002F 响应拦截器\napiClient.interceptors.response.use(\n  (response) => response.data,\n  (error) => {\n    if (error.response?.status === 401) {\n      localStorage.removeItem(\"token\");\n      window.location.href = \"\u002Flogin\";\n    }\n    return Promise.reject(error);\n  }\n);\n\nexport default apiClient;\n","ts",[1171,1293,1290],{"__ignoreMap":1230},[1110,1295,1296,1299],{},[1113,1297,1298],{},"如何统一处理请求头、环境切换和错误提示？",[1107,1300,1301,1307,1313],{},[1110,1302,1303,1306],{},[1113,1304,1305],{},"环境切换","：通过 Vite 或 Webpack 的环境变量（如 VITE_API_BASE_URL）动态配置 baseURL。",[1110,1308,1309,1312],{},[1113,1310,1311],{},"请求头处理","：在请求拦截器中统一注入 Authorization 等认证头。",[1110,1314,1315,1318],{},[1113,1316,1317],{},"错误提示","：在响应拦截器中根据状态码或业务码统一处理错误，例如 401 跳转登录、500 显示服务器错误提示。",[1110,1320,1321,1324,1325],{},[1113,1322,1323],{},"如何组织和管理具体的 API 接口？"," 按业务模块划分文件，并统一导出，便于维护。",[1225,1326,1329],{"className":1327,"code":1328,"language":1291,"meta":1230},[1289],"\u002F\u002F api\u002Findex.ts\nexport { default as userApi } from \".\u002Fuser\";\nexport { default as roomApi } from \".\u002Froom\";\n\n\u002F\u002F api\u002Froom.ts\nimport apiClient from \".\u002Futils\u002FapiClient\";\nimport type { RoomResponse, CreateRoomRequest } from \".\u002Ftypes\";\n\nconst roomApi = {\n  getRooms: (params: { page: number; size: number }) =>\n    apiClient.get\u003CRoomResponse>(\"\u002Frooms\", { params }),\n  createRoom: (data: CreateRoomRequest) => apiClient.post(\"\u002Frooms\", data),\n  updateRoom: (id: string, data: Partial\u003CCreateRoomRequest>) =>\n    apiClient.put(`\u002Frooms\u002F${id}`, data),\n  deleteRoom: (id: string) => apiClient.delete(`\u002Frooms\u002F${id}`),\n};\n\nexport default roomApi;\n",[1171,1330,1328],{"__ignoreMap":1230},[1110,1332,1333,1335,1336],{},[1113,1334,1156],{}," 使用 AbortController 实现请求取消和防重提交。",[1225,1337,1340],{"className":1338,"code":1339,"language":1291,"meta":1230},[1289],"const pendingRequests = new Map\u003Cstring, AbortController>();\n\napiClient.interceptors.request.use((config) => {\n  const requestKey = `${config.method?.toUpperCase()}${config.url}`;\n  if (pendingRequests.has(requestKey)) {\n    pendingRequests.get(requestKey)?.abort();\n  }\n  const controller = new AbortController();\n  config.signal = controller.signal;\n  pendingRequests.set(requestKey, controller);\n  return config;\n});\n\napiClient.interceptors.response.use(\n  (response) => {\n    const requestKey = `${response.config.method?.toUpperCase()}${\n      response.config.url\n    }`;\n    pendingRequests.delete(requestKey);\n    return response;\n  },\n  (error) => {\n    if (error.config) {\n      const requestKey = `${error.config.method?.toUpperCase()}${\n        error.config.url\n      }`;\n      pendingRequests.delete(requestKey);\n    }\n    return Promise.reject(error);\n  }\n);\n",[1171,1341,1339],{"__ignoreMap":1230},[1103,1343,1161],{"id":1344},"类型安全与工程化typescript-1",[1278,1346,1347,1358,1369,1380,1391],{},[1110,1348,1349,1352],{},[1113,1350,1351],{},"如何结合接口类型定义封装 Axios？",[1225,1353,1356],{"className":1354,"code":1355,"language":1291,"meta":1230},[1289],"\u002F\u002F api\u002Ftypes\u002Findex.ts\nexport interface ApiResponse\u003CT> {\n  code: number;\n  message: string;\n  data: T;\n}\n\nexport interface Room {\n  id: string;\n  name: string;\n  description?: string;\n  createdAt: string;\n  updatedAt: string;\n}\n\nexport interface RoomResponse extends ApiResponse\u003CRoom[]> {\n  pagination: { page: number; size: number; total: number };\n}\n\nexport interface CreateRoomRequest {\n  name: string;\n  description?: string;\n}\n",[1171,1357,1355],{"__ignoreMap":1230},[1110,1359,1360,1363],{},[1113,1361,1362],{},"Axios 泛型的使用",[1225,1364,1367],{"className":1365,"code":1366,"language":1291,"meta":1230},[1289],"\u002F\u002F apiService.ts\nimport type { AxiosRequestConfig, AxiosResponse } from \"axios\";\nimport apiClient from \".\u002Futils\u002FapiClient\";\nimport type { ApiResponse } from \".\u002Ftypes\";\n\nclass ApiService {\n  async get\u003CT>(\n    url: string,\n    config?: AxiosRequestConfig\n  ): Promise\u003CApiResponse\u003CT>> {\n    const response: AxiosResponse\u003CApiResponse\u003CT>> = await apiClient.get(\n      url,\n      config\n    );\n    return response.data;\n  }\n\n  async post\u003CT, D = any>(\n    url: string,\n    data?: D,\n    config?: AxiosRequestConfig\n  ): Promise\u003CApiResponse\u003CT>> {\n    const response: AxiosResponse\u003CApiResponse\u003CT>> = await apiClient.post(\n      url,\n      data,\n      config\n    );\n    return response.data;\n  }\n\n  \u002F\u002F put、delete 同理\n}\n\nexport const apiService = new ApiService();\n\n\u002F\u002F 使用示例\nconst getRooms = async () => {\n  const response = await apiService.get\u003CRoom[]>(\"\u002Frooms\", {\n    params: { page: 1, size: 10 },\n  });\n  return response.data; \u002F\u002F 类型为 Room[]\n};\n",[1171,1368,1366],{"__ignoreMap":1230},[1110,1370,1371,1374],{},[1113,1372,1373],{},"定义统一的响应包装类型",[1225,1375,1378],{"className":1376,"code":1377,"language":1291,"meta":1230},[1289],"export interface ApiResponse\u003CT> {\n  code: number;\n  message: string;\n  data: T;\n}\n\nexport interface ApiError {\n  code: number;\n  message: string;\n  details?: any;\n}\n",[1171,1379,1377],{"__ignoreMap":1230},[1110,1381,1382,1385],{},[1113,1383,1384],{},"拦截器的 TypeScript 类型扩展",[1225,1386,1389],{"className":1387,"code":1388,"language":1291,"meta":1230},[1289],"\u002F\u002F 扩展 AxiosRequestConfig\nexport interface CustomAxiosRequestConfig extends AxiosRequestConfig {\n  showLoading?: boolean;\n  showError?: boolean;\n}\n\n\u002F\u002F 在拦截器中使用\napiClient.interceptors.request.use((config: CustomAxiosRequestConfig) => {\n  if (config.showLoading !== false) {\n    \u002F\u002F 显示加载状态\n  }\n  return config;\n});\n",[1171,1390,1388],{"__ignoreMap":1230},[1110,1392,1393,1396,1397],{},[1113,1394,1395],{},"处理不统一的后端返回结构"," 使用类型守卫确保类型安全。",[1225,1398,1401],{"className":1399,"code":1400,"language":1291,"meta":1230},[1289],"function isApiResponse\u003CT>(data: any): data is ApiResponse\u003CT> {\n  return (\n    data && typeof data === \"object\" && \"code\" in data && \"data\" in data\n  );\n}\n\napiClient.interceptors.response.use((response) => {\n  if (isApiResponse(response.data)) {\n    return response.data;\n  } else {\n    return { code: 200, message: \"success\", data: response.data };\n  }\n});\n",[1171,1402,1400],{"__ignoreMap":1230},[1103,1404,1405],{"id":1405},"应用及其后期实践",[1278,1407,1408,1420],{},[1110,1409,1410,1413,1414],{},[1113,1411,1412],{},"封装后在业务组件中的使用"," 封装后调用更加简洁、安全，无需重复处理 Token、错误或类型。",[1225,1415,1418],{"className":1416,"code":1417,"language":1291,"meta":1230},[1289],"\u002F\u002F 未封装前\nconst fetchRooms = async () => {\n  try {\n    const response = await axios.get(\"\u002Fapi\u002Frooms\");\n    return response.data;\n  } catch (error) {\n    console.error(error);\n  }\n};\n\n\u002F\u002F 封装后\nimport { roomApi } from \"@\u002Fapi\";\n\nconst fetchRooms = async () => {\n  try {\n    const response = await roomApi.getRooms({ page: 1, size: 10 });\n    return response.data;\n  } catch (error) {\n    \u002F\u002F 错误已统一处理\n  }\n};\n",[1171,1419,1417],{"__ignoreMap":1230},[1110,1421,1422,1425],{},[1113,1423,1424],{},"OpenAPI\u002FSwagger 自动生成类型和接口函数"," 可使用 openapi-typescript-codegen 或 swagger-typescript-api 等工具从后端 OpenAPI 文档自动生成类型定义和请求函数，实现前后端类型完全一致，显著减少手动维护成本。",{"title":1230,"searchDepth":1427,"depth":1427,"links":1428},4,[1429,1436],{"id":1093,"depth":1430,"text":1094,"children":1431},3,[1432,1433,1434,1435],{"id":1105,"depth":1427,"text":1105},{"id":1131,"depth":1427,"text":1131},{"id":1160,"depth":1427,"text":1161},{"id":1238,"depth":1427,"text":1238},{"id":1272,"depth":1430,"text":1273,"children":1437},[1438,1439,1440],{"id":1276,"depth":1427,"text":1276},{"id":1344,"depth":1427,"text":1161},{"id":1405,"depth":1427,"text":1405},"md",true,{"uuid":1444,"slots":1445},"d3ed3a60-e40e-11f0-8b06-e9cbc6ca18a2",{},8,{"title":1085,"description":1230},"posts\u002F2025\u002F2025-12-28-前端-接口封装与请求规范（Axios为例）",[135,207,189,210],"hpfRF0voqNYeln3rMDk6Pr5c06vGeAtyGbbim4cZltA",1790443286832]