Skip to content
文章目录

axios扩展

缓存

缓存放到哪里,以及为什么

axios 层面的缓存,缓存的是PromisePromise 无法直接持久化,只能将Promise缓存在内存中,至于说将Promise的内容获取出来,再将Promise的内容进行持久化, 初始化时再将持久化的内容转换为Promise,这会很繁琐,且会占用很大的空间(因为Promise里的内容不止是你后端的业务数据,而是http response + axios querst config),而至于说你只缓存业务结果,那更不行,因为你的缓存结果最终要通过axios返回,你破坏了axios的结构,到时就是各种奇怪的问题

缓存分类

  1. 瞬间缓存
  2. 有效期缓存

缓存的使用场景

  1. 很多地方使用,同时基本不会变的数据,可以缓存起来(如:字典数据)
  2. 避免连续点击按钮时,发出多个重复的请求(如:保存,更新,删除。不要对显式的查询功能的ajax进行缓存,而应该对这类ajax请求,进行cancel旧的,然后发起新的

测试场景

  1. 对同一个按钮连续点击,是否只会发起一个请求
  2. 同一个字典接口,在多个界面中有发起,这多个界面切换时,是否只发起了一个请求

取消请求

使用场景

  1. 显式的查询按钮点击,应该取消旧的,发起新的,如果不是那种标签页切换的查询表单界面,那应该采用瞬间缓存,避免发出相同请求,从而更加符合实际
  2. 通过 tab 实现的动态表单查询,切换 tab 和点击查询,都应该取消旧的,发起新的

添加全局 loading

使用场景

ajax 发起前展示 loading,ajax 响应结束(包括正常和异常结束)关闭 loading,并能对每个接口进行手动设置该功能的开关,以及 loading 的一些个性画配置

统一错误处理

自动添加 token

未登录,直接跳转登录页

路由中已经有该功能了,为啥 axios 中还要添加这个能力?

有些 tab 切换时,在对应的 tab 页会自动发起新请求,而 tab 切换本身不是通过路由切换实现的,那路由中的登录验证,就对这种情况不起作用

能控制返回完整 response 或只返回业务数据

文件下载这种,需要返回完整的 response,其他业务接口只需要返回业务数据即可,同时得支持手动启用和关闭该功能