登录
# Axios 简单封装 下面是对Axios的一个typeScript封装，配置上增添了是否弹出提示、请求未完成时取消请求的功能。 可以拿去修改后使用调整。 ### 封装 注意，使用了 antd 的提示框功能，可以自行修改。 首先，先全局添加几个会用得到的ts类型。 文件：`vite-env.d.ts` ```ts type ErrMsg = string type Result<T> = [ErrMsg | null, T | null, any?] type PromiseResult<T> = Promise<Result<T>> ``` 下面是正式封装 文件：`@/u
# js 常用功能语句 ### 复制内容到剪贴板 ```js const copyToClipboard = (text) => navigator.clipboard.writeText(text); copyToClipboard("Hello World"); ``` ### 清除所有cookie ```js const clearCookies = document.cookie.split(';').forEach(cookie => { document.cookie = cookie.replace(/^ +/, '').replace(/=.*/, `=;expir
# js取代try catch的方法封装 开发时，可能会担心自己调用的接口、执行的方法会报错，经常用 try catch 包起来，确保了程序执行的顺畅，但写法会比较累赘。 下面这两个方法内部使用 try catch，封装了执行结果，能让开发时敲代码更流程。 ## 包装同步函数 下面的tryTo方法，包装了一个同步方法，注意只能用于同步方法。 ### 封装 ```ts /** * 包装一个同步函数，代替try catch的包装 * @param promiseHandler 传入的一个异步方法，只需要把方法传进来，此方法在内部执行，拦截报错 * @returns 返回数组
# 刷新token队列管理 这种处理可以应用在多种场景，这里拿刷新token举例。 **场景：** 用户正在使用后台管理系统，已经登录了，当用户打开某个页面时，恰好token过期。 那么此后访问的接口，都会返回【登录已过期】的标记，前台需要静默的自动去刷新token，token刷新成功后，直接再次调用接口。 但有时情况比较特殊，比如某个页面一打开，需要同时调用5个接口甚至更多，由于这些接口几乎都是同时调用的，那这些接口都会收到【登录已过期】的标记，那每个接口都会去调用刷新token的接口。 这就导致，查看控制台的network(网络)，会发现5个接口都失败了，同时瞬间出现了5个刷新
# 同步修改变量功能封装 useVal for react react 正常 useState 功能，并不是同步修改state，再某些场景需要借助 useRef 才能完成功能。 比如调用某个接口拿了数据A，需要进行某些计算时，需要用到组件中另一个数据B的最新的值，这个功能就不能顺利完成。 要么把数据A也方法一个useState中，然后使用useEffect监听数据A和数据B，进行计算。 要么使用一个数据B的ref，修改数据B时需要手动或监听数据B的变化，修改数据B的ref值，在接口完成后，从数据B的ref中读取最新的数据B。 就很难受。 所以封装了下面这个js，用法和useStat
# vue路由切换时的动画效果 使用vue开发页面，经常有需求想要在切换页面时添加一个动画效果，尤其移动端，切换页面时，希望新页面能从右边覆盖过来，返回上一页时，又是前一页从左边覆盖过来。 这里vue的自带组件Transition来调一下。 技术栈：vue3 + ts 官方Transition文档：[https://cn.vuejs.org/guide/built-ins/transition](https://cn.vuejs.org/guide/built-ins/transition) **效果：** - 点击打开下一页时，新页面从右侧覆盖过来，原页面会向左偏移一些，最终被覆