文章目录
- 前言
- 一、为什么选择 VueRequest？
- 二、使用步骤
- 1.安装
- 2.用例
前言
VueRequest——开发文档
VueReques——GitHub地址
在以往的业务项目中，我们经常会被 loading 状态的管理、请求的节流防抖、接口数据的缓存、分页等重复的功能实现所困扰。每次开启一个新项目都需要重新实现一遍，这是一项重复的工作，还需要确保团队的一致性。
VueRequest 的目的是为开发人员提供一种方便、快速的方式来管理 API 状态。通过简单的配置，可以省去那些繁琐的任务，专注于业务核心的开发。
提示：以下是本篇文章正文内容，下面案例可供参考
一、为什么选择 VueRequest？
- 🌈 兼容 Vue 2 & 3
- 🚀 所有数据都具有响应式
- 🔄 轮询请求
- 🤖 自动处理错误重试
- 🗄 内置请求缓存
- 💧 节流请求与防抖请求
- 🎯 聚焦页面时自动重新请求
- ⚙️ 强大的分页扩展以及加载更多扩展
- 📠 完全使用 Typescript 编写，具有强大的类型提示
- ⚡️ 兼容 Vite
- 🍃 轻量化
- 📦 开箱即用
二、使用步骤
1.安装
代码如下（示例）：
npm install vue-request
# or
yarn add vue-request
# or
pnpm install vue-request
2.用例
<template>
<div>
<div v-if="loading">loading...</div>
<div v-if="error">failed to fetch</div>
<div v-if="data">Hey! {{ data }}</div>
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
setup() {
const { data, loading, error } = useRequest(Service);
return {
data,
loading,
error,
};
},
});
</script>
在这个例子中，useRequest 接收了一个 Service 函数。Service是一个异步的请求函数，换句话说，你可以使用 axios 来获取数据，然后返回一个 Promise。更具体的说明可以在数据请求中查看。
useRequest 还返回了三个值， data、loading 和 error。当请求还没完成时, data 将会为 undefined 同时，loading 将被设置为 true。当请求完成后，则将会根据请求结果来设定 data 和 error，并对页面进行渲染。这是因为 data、 loading 和 error 是 Vue 的 响应式引用(shallowRef)，它们的值将根据请求状态及请求结果来修改。
