指南
指南
前言
在业务开发中,对于网络请求状态,我们往往需要定义result、loading、error三个变量,result用来接收请求的结果,loading表示当前请求是否在进行中,error表示请求是否出错,另外还需要处理缓存请求结果、请求竞态、取消请求等问题。如果没有一个统一网络请求管理工具,上述逻辑将被大量重复开发,并且很难保证一致性。
因此,vue-useRequest的出现正是为了解决上述问题,为开发人员提供一种便利、快速的方式来管理网络请求状态。
特性
- 🏟️ 覆盖大部分业务场景
- 🎯 真正取消网络请求
- 🌈 兼容 Vue 2 & 3
- 🤖 兼容 Axios & Fetch
- 🚀 响应式数据
- 🗄 内置请求缓存
- 💧 请求竞态处理
- 🔁 错误重试
- 🔐 自动化测试
- ⚙️ 配置简单
- 📠 完全使用 Typescript 编写,具有强大的类型提示
- ⚡️ 极致轻量化,gzip压缩后不到1kb
- 🍃 对业务代码侵入小
- 📦 开箱即用
对比
库 | 响应式状态 | 缓存 | 错误重试 | 取消网络请求 | React | Vue2 | Vue3 | Axios | Fetch |
---|---|---|---|---|---|---|---|---|---|
SWR | ✔ | ✔ | ✔ | ❌ | ✔ | ❌ | ❌ | ✔ | ✔ |
ahooks useRequest | ✔ | ✔ | ✔ | ❌ | ✔ | ❌ | ❌ | ✔ | ✔ |
TanStack Query | ✔ | ✔ | ✔ | ❌ | ✔ | ✔ | ✔ | ✔ | ✔ |
vue-request | ✔ | ✔ | ✔ | ❌ | ❌ | ✔ | ✔ | ✔ | ✔ |
vue-use useFetch | ✔ | ✔ | ✔ | ❌ | ❌ | ✔ | ✔ | ❌ | ✔ |
vue-useRequest | ✔ | ✔ | ❌ | ✔ | ❌ | ✔ | ✔ | ✔ | ✔ |