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

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

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

理解 Vue Query

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

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

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

Vue Query真棒，因為它為我們隱藏了所有這些復雜性。它默認基于最佳實踐進行配置，但也提供了一種方法來更改這個配置（如果需要的話）。

基本示例使用

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

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

<!-- 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)品的情況下，我們會顯示一個模態(tài)框，并在顯示加載狀態(tài)時獲取額外的產(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

這個庫預設(shè)了一些既激進又理智的默認設(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 是用于緩存的唯一標識符
fetchData 是一個函數(shù)，它返回一個帶有API調(diào)用的 promise
isLoading 表示API調(diào)用是否已經(jīng)完成
data 是對API調(diào)用的響應

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

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

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

默認情況下，緩存數(shù)據(jù)被視為過時的。當以下情況發(fā)生時，它們會自動在后臺重新獲?。?/p>

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

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

添加錯誤處理

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