使用Vue Query实现高级数据获取的示例详解

更新时间：2023年08月18日 08:42:10 作者：王大冶

构建现代大规模应用程序最具挑战性的方面之一是数据获取,这也是 Vue Query 库的用途所在,下面就跟随小编一起学习一下如何利用Vue Query实现高级数据获取吧

理解 Vue Query

Vue Query 并不是 Axios 或 fetch 的替代品。它是在它们之上的一个抽象层。

管理服务器状态时面临的挑战与管理客户端状态不同，而且更为复杂。我们需要解决的问题包括：

缓存...（可能是编程中最难的事情）
将对相同数据的多个请求进行去重，合并为一个请求
在后台更新过时的数据
了解何时数据过时
尽快反映数据的更新情况
像分页和懒加载这样的性能优化
管理服务器状态的内存和垃圾回收
使用结构共享来记忆化查询结果

Vue Query真棒，因为它为我们隐藏了所有这些复杂性。它默认基于最佳实践进行配置，但也提供了一种方法来更改这个配置（如果需要的话）。

基本示例使用

通过构建以下简单的应用程序来展示这个图书馆。

在页面级别上，我们需要获取所有产品，将它们展示在一个表格中，并有一些简单的额外逻辑来选择其中的一个。

<!-- Page component without Vue-Query -->
<script setup>
import { ref } from "vue";
import BoringTable from "@/components/BoringTable.vue";
import ProductModal from "@/components/ProductModal.vue";
const data = ref();
const loading = ref(false);
async function fetchData() {
  loading.value = true;
  const response = await fetch(
    `https://dummyjson.com/products?limit=10`
  ).then((res) => res.json());
  data.value = response.products;
  loading.value = false;
}
fetchData();
const selectedProduct = ref();
function onSelect(item) {
  selectedProduct.value = item;
}
</script>
<template>
  <div class="container">
    <ProductModal
      v-if="selectedProduct"
      :product-id="selectedProduct.id"
      @close="selectedProduct = null"
    />
    <BoringTable :items="data" v-if="!loading" @select="onSelect" />
  </div>
</template>

在选择产品的情况下，我们会显示一个模态框，并在显示加载状态时获取额外的产品信息。

<!-- Modal component without Vue-Query -->
<script setup>
import { ref } from "vue";
import GridLoader from 'vue-spinner/src/GridLoader.vue'
const props = defineProps({
  productId: {
    type: String,
    required: true,
  },
});
const emit = defineEmits(["close"]);
const product = ref();
const loading = ref(false);
async function fetchProduct() {
  loading.value = true;
  const response = await fetch(
    `https://dummyjson.com/products/${props.productId}`
  ).then((res) => res.json());
  product.value = response;
  loading.value = false;
}
fetchProduct();
</script>
<template>
  <div class="modal">
    <div class="modal__content" v-if="loading">
      <GridLoader />
    </div>
    <div class="modal__content" v-else-if="product">
      // modal content omitted
    </div>
  </div>
  <div class="modal-overlay" @click="emit('close')"></div>
</template>

添加 Vue Query

这个库预设了一些既激进又理智的默认设置。这意味着我们在基本使用时不需要做太多操作。

<script setup>
import { useQuery } from "vue-query";
function fetchData() {
  // Make api call here
}
const { isLoading, data } = useQuery(
  "uniqueKey",
  fetchData
);
</script>
<template>
  {{ isLoading }}
  {{ data }}
</template>

在上述例子中：

uniqueKey 是用于缓存的唯一标识符
fetchData 是一个函数，它返回一个带有API调用的 promise
isLoading 表示API调用是否已经完成
data 是对API调用的响应

我们将其融入到我们的例子中：

<!-- Page component with Vue-Query -->
<script setup>
import { ref } from "vue";
import { useQuery } from "vue-query";
import BoringTable from "@/components/BoringTable.vue";
import OptimisedProductModal from "@/components/OptimisedProductModal.vue";
async function fetchData() {
  return await fetch(`https://dummyjson.com/products?limit=10`).then((res) => res.json());
}
const { isLoading, data } = useQuery(
  "products",
  fetchData
);
const selectedProduct = ref();
function onSelect(item) {
  selectedProduct.value = item;
}
</script>
<template>
  <div class="container">
    <OptimisedProductModal
      v-if="selectedProduct"
      :product-id="selectedProduct.id"
      @close="selectedProduct = null"
    />
    <BoringTable :items="data.products" v-if="!isLoading" @select="onSelect" />
  </div>
</template>

现在，由于库已经处理了加载状态，所以获取函数已经简化。

同样适用于模态组件：

<!-- Modal component with Vue-Query -->
<script setup>
import GridLoader from 'vue-spinner/src/GridLoader.vue'
import { useQuery } from "vue-query";
const props = defineProps({
  productId: {
    type: String,
    required: true,
  },
});
const emit = defineEmits(["close"]);
async function fetchProduct() {
  return await fetch(
    `https://dummyjson.com/products/${props.productId}`
  ).then((res) => res.json());
}
const { isLoading, data: product } = useQuery(
  ["product", props.productId],
  fetchProduct
);
</script>
<template>
  <div class="modal">
    <div class="modal__content" v-if="isLoading">
      <GridLoader />
    </div>
    <div class="modal__content" v-else-if="product">
      // modal content omitted
    </div>
  </div>
  <div class="modal-overlay" @click="emit('close')"></div>
</template>

useQuery 返回名为 data 的响应，如果我们想要重命名它，我们可以使用es6的解构方式，如下 const { data: product } = useQuery(...) 当在同一页面进行多次查询时，这也非常有用。
由于同一功能将用于所有产品，因此简单的字符串标识符将无法工作。我们还需要提供产品id ["product", props.productId]

我们并没有做太多事情，但我们从这个盒子里得到了很多。首先，即使在没有网络限制的情况下，当重新访问一个产品时，从缓存中得到的性能提升也是显而易见的。

默认情况下，缓存数据被视为过时的。当以下情况发生时，它们会自动在后台重新获取：

查询挂载的新实例
窗口被重新聚焦
网络已重新连接
该查询可选择配置为重新获取间隔

此外，失败的查询会在捕获并向用户界面显示错误之前，静默地重试3次，每次重试之间的延迟时间呈指数级增长。

添加错误处理

到目前为止，我们的代码都坚信API调用不会失败。但在实际应用中，情况并非总是如此。错误处理应在 try-catch块中实现，并需要一些额外的变量来处理错误状态。幸运的是，vue-query 提供了一种更直观的方式，通过提供 isError 和 error 变量。

<script setup>
import { useQuery } from "vue-query";
function fetchData() {
  // Make api call here
}
const { data, isError, error } = useQuery(
  "uniqueKey",
  fetchData
);
</script>
<template>
  {{ data }}
  <template v-if="isError">
    An error has occurred: {{ error }}
  </template>
</template>

总结

总的来说，Vue Query通过用几行直观的Vue Query逻辑替换复杂的样板代码，简化了数据获取。这提高了可维护性，并允许无缝地连接新的服务器数据源。

直接的影响是应用程序运行更快、反应更灵敏，可能节省带宽并提高内存性能。此外，我们没有提到的一些高级功能，如预取、分页查询、依赖查询等，提供了更大的灵活性，应该能满足您的所有需求。

如果你正在开发中到大型的应用程序，你绝对应该考虑将 Vue Query 添加到你的代码库中。

以上就是使用Vue Query实现高级数据获取的示例详解的详细内容，更多关于Vue Query获取高级数据的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

Vuex模块化和命名空间namespaced实例演示
这篇文章主要介绍了Vuex模块化和命名空间namespaced的相关知识，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2021-11-11
Vue-cli@3.0 插件系统简析
Vue-cli@3.0 是一个全新的 Vue 项目脚手架。这篇文章主要介绍了Vue-cli@3.0 插件系统简析,需要的朋友可以参考下
2018-09-09
vue3使用el-upload上传文件示例详解
这篇文章主要为大家介绍了vue3使用el-upload上传文件实现示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-02-02
Vue+elementUI实现动态展示列表的数据
这篇文章主要介绍了Vue+elementUI实现动态展示列表的数据方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-08-08
el-select与el-tree结合使用实现树形结构多选框
我们在实际开发中需要用到下拉树,elementUI是没有这个组件的,我们就要自己去写了,下面这篇文章主要给大家介绍了关于el-select与el-tree结合使用实现树形结构多选框的相关资料,需要的朋友可以参考下
2022-10-10
Vue中调用组件使用kebab-case短横线命名法和使用大驼峰的区别详解
这篇文章主要介绍了Vue中调用组件使用kebab-case（短横线）命名法和使用大驼峰的区别,通过实例可以看出如果是在html中使用组件，那么就不能用大驼峰式写法，如果是在.vue 文件中就可以，需要的朋友可以参考下
2023-10-10
vuejs通过filterBy、orderBy实现搜索筛选、降序排序数据
这篇文章主要为大家详细介绍了vuejs通过filterBy、orderBy实现搜索筛选、降序排序数据实例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-02-02
vue elementUI 上传非空验证示例代码
这篇文章主要介绍了vue elementUI 上传非空验证,原理就是写一个假的红色*号,每次点击查看的时候执this.rules.staffImg[0].required = false,本文结合实例代码给大家介绍的非常详细,需要的朋友参考下吧
2023-12-12
vue系列之requireJs中引入vue-router的方法
这篇文章主要介绍了vue系列之requireJs中引入vue-router的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-07-07
Vue实现动态圆环百分比进度条
这篇文章主要为大家详细介绍了Vue实现动态圆环百分比进度条，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-09-09