快捷導(dǎo)航

使用Vue?Query實(shí)現(xiàn)高級(jí)數(shù)據(jù)獲取的示例詳解

更新時(shí)間：2023年08月18日 08:42:10 作者：王大冶

構(gòu)建現(xiàn)代大規(guī)模應(yīng)用程序最具挑戰(zhàn)性的方面之一是數(shù)據(jù)獲取,這也是?Vue?Query?庫的用途所在,下面就跟隨小編一起學(xué)習(xí)一下如何利用Vue?Query實(shí)現(xiàn)高級(jí)數(shù)據(jù)獲取吧

構(gòu)建現(xiàn)代大規(guī)模應(yīng)用程序最具挑戰(zhàn)性的方面之一是數(shù)據(jù)獲取。加載和錯(cuò)誤狀態(tài)、分頁、過濾、排序、緩存等許多功能可能會(huì)增加復(fù)雜性，并經(jīng)常使應(yīng)用程序充滿大量的樣板代碼。

這就是 Vue Query 庫的用途所在。它使用聲明式語法處理和簡化數(shù)據(jù)獲取，并在幕后為我們處理所有那些重復(fù)的任務(wù)。

理解 Vue Query

Vue Query 并不是 Axios 或 fetch 的替代品。它是在它們之上的一個(gè)抽象層。

管理服務(wù)器狀態(tài)時(shí)面臨的挑戰(zhàn)與管理客戶端狀態(tài)不同，而且更為復(fù)雜。我們需要解決的問題包括：

緩存...（可能是編程中最難的事情）
將對(duì)相同數(shù)據(jù)的多個(gè)請(qǐng)求進(jìn)行去重，合并為一個(gè)請(qǐng)求
在后臺(tái)更新過時(shí)的數(shù)據(jù)
了解何時(shí)數(shù)據(jù)過時(shí)
盡快反映數(shù)據(jù)的更新情況
像分頁和懶加載這樣的性能優(yōu)化
管理服務(wù)器狀態(tài)的內(nèi)存和垃圾回收
使用結(jié)構(gòu)共享來記憶化查詢結(jié)果

Vue Query真棒，因?yàn)樗鼮槲覀冸[藏了所有這些復(fù)雜性。它默認(rèn)基于最佳實(shí)踐進(jìn)行配置，但也提供了一種方法來更改這個(gè)配置（如果需要的話）。

基本示例使用

通過構(gòu)建以下簡單的應(yīng)用程序來展示這個(gè)圖書館。

在頁面級(jí)別上，我們需要獲取所有產(chǎn)品，將它們展示在一個(gè)表格中，并有一些簡單的額外邏輯來選擇其中的一個(gè)。

<!-- 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>

在選擇產(chǎn)品的情況下，我們會(huì)顯示一個(gè)模態(tài)框，并在顯示加載狀態(tài)時(shí)獲取額外的產(chǎn)品信息。

<!-- 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

這個(gè)庫預(yù)設(shè)了一些既激進(jìn)又理智的默認(rèn)設(shè)置。這意味著我們?cè)诨臼褂脮r(shí)不需要做太多操作。

<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 是用于緩存的唯一標(biāo)識(shí)符
fetchData 是一個(gè)函數(shù)，它返回一個(gè)帶有API調(diào)用的 promise
isLoading 表示API調(diào)用是否已經(jīng)完成
data 是對(duì)API調(diào)用的響應(yīng)

我們將其融入到我們的例子中：

<!-- 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>

現(xiàn)在，由于庫已經(jīng)處理了加載狀態(tài)，所以獲取函數(shù)已經(jīng)簡化。

同樣適用于模態(tài)組件：

<!-- 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 的響應(yīng)，如果我們想要重命名它，我們可以使用es6的解構(gòu)方式，如下 const { data: product } = useQuery(...) 當(dāng)在同一頁面進(jìn)行多次查詢時(shí)，這也非常有用。
由于同一功能將用于所有產(chǎn)品，因此簡單的字符串標(biāo)識(shí)符將無法工作。我們還需要提供產(chǎn)品id ["product", props.productId]

我們并沒有做太多事情，但我們從這個(gè)盒子里得到了很多。首先，即使在沒有網(wǎng)絡(luò)限制的情況下，當(dāng)重新訪問一個(gè)產(chǎn)品時(shí)，從緩存中得到的性能提升也是顯而易見的。

默認(rèn)情況下，緩存數(shù)據(jù)被視為過時(shí)的。當(dāng)以下情況發(fā)生時(shí)，它們會(huì)自動(dòng)在后臺(tái)重新獲?。?/p>

查詢掛載的新實(shí)例
窗口被重新聚焦
網(wǎng)絡(luò)已重新連接
該查詢可選擇配置為重新獲取間隔

此外，失敗的查詢會(huì)在捕獲并向用戶界面顯示錯(cuò)誤之前，靜默地重試3次，每次重試之間的延遲時(shí)間呈指數(shù)級(jí)增長。

添加錯(cuò)誤處理

到目前為止，我們的代碼都堅(jiān)信API調(diào)用不會(huì)失敗。但在實(shí)際應(yīng)用中，情況并非總是如此。錯(cuò)誤處理應(yīng)在 try-catch塊中實(shí)現(xiàn)，并需要一些額外的變量來處理錯(cuò)誤狀態(tài)。幸運(yùn)的是，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>