免费软件下载网站哪个好,商务网站建设毕业设计模板,无锡设计网站公司,淘宝上做网站 源代码怎么给你文章目录 前言一、为什么选择 VueRequest#xff1f;二、使用步骤1.安装2.用例 前言 VueRequest——开发文档 VueReques——GitHub地址 在以往的业务项目中#xff0c;我们经常会被 loading 状态的管理、请求的节流防抖、接口数据的缓存、分页等重复的功能实现所困扰。每次开… 文章目录 前言一、为什么选择 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-request2.用例
templatedivdiv v-ifloadingloading.../divdiv v-iferrorfailed to fetch/divdiv v-ifdataHey! {{ data }}/div/div
/templatescript langts
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)它们的值将根据请求状态及请求结果来修改。
