关于javascript:使用Vue-Query进行高级数据获取

3次阅读

共计 5009 个字符，预计需要花费 13 分钟才能阅读完成。

微信搜寻【大迁世界】, 我会第一工夫和你分享前端行业趋势，学习路径等等。
本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。

快来收费体验 ChatGpt plus 版本的，咱们出的钱 体验地址:https://chat.waixingyun.cn 能够退出网站底部技术群，一起找 bug，另外新版作图神器，ChatGPT4 已上线 https://cube.waixingyun.cn/home

构建古代大规模应用程序最具挑战性的方面之一是数据获取。加载和谬误状态、分页、过滤、排序、缓存等许多性能可能会减少复杂性，并常常使应用程序充斥大量的样板代码。

这就是 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>
  1. useQuery 返回名为 data 的响应，如果咱们想要重命名它，咱们能够应用 es6 的解构形式，如下 const {data: product} = useQuery(...) 当在同一页面进行屡次查问时，这也十分有用。
  2. 因为同一性能将用于所有产品，因而简略的字符串标识符将无奈工作。咱们还须要提供产品 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 增加到你的代码库中。

交换

有幻想，有干货，微信搜寻 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。

本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。

正文完
javascript
发表至： javascript
2023-08-21
 0
心灵沉淀第一阶段
大话javascript 5期：跨域
基于WebGL架构的ThingJS-3D可视化平台—电力组态
关于javascript:ShowMeBug-正式上线企业微信

站内搜索

-「」