vue 異步數據呈現方案

vue 異步數據呈現方案

​demo 地址 源碼地址

原由

當我領會到 寫程序的重點在於處理好輸入與輸出以後 再來寫一個搜索組件的時候我關於 loading 的思考以下

• 何時顯示 loading ？

  • 請求發起後尚未到達的這一段時間

• 怎麼控制視圖在這段時間內顯示 loading ？

  • 使用一個變量來控制

• 那這個變量屬於輸入嗎？

  • 不算，他是一個輸出，這個搜索組件的輸入只有一個: searchText

• 這個輸出的相關的 input、 transform 怎麼樣的？

  • input:searchText -> transform:異步請求 -> output:loading 狀態

• 怎麼實現這樣的一個 transform？

  • 這個 transform 須要當即的返回狀態，沒有狀態頁面上沒法肯定 loading 怎麼顯示

    • 想到了 promise to object

  • 這個 transform 須要持續的返回新狀態。loading 一開始必然是顯示，若是以後不返回新狀態就沒辦法關閉了

    • 想到了 vue 的計算屬性
    • 想到了事件機制

  • 這個 transform 還須要返回異步請求的結果。

    • object 中新增一個 data 字段用來放結果，還能夠有一個 error 字段
  • 因此這個 transform 能夠當 input 改變時返回一個 object 而且在 依據 input 發起的異步請求成功或者結束後修改以前返回的 object

而後就是在 vue 中實現這樣的一個思路

應用的代碼長啥樣

/讀書筆記/vue/vue異步數據呈現方案.html

​demo 地址 源碼地址

import { defineComponent, ref } from "vue";
import { usePromiseComputed } from "./lib/vue.composition.api";

export default defineComponent({
  setup(props, ctx) {
    const searchText = ref("");

    const searchResults = usePromiseComputed({
      defaultData: [] as string[],
      getter() {
        return searchApi(searchText.value);
      },
    });

    return { searchText, searchResults };
  },
});

這裏的 usePromiseComputed 就是以前思考的 transform ，他返回了一個 ref(object) 而後當 searchText 發生變化時會從新執行查詢請求 searchApi(searchText.value); , 當查詢請求結束的時候他會修改以前返回的 ref(object)

在模板中

<template>
  <input placeholder="請輸入你要搜索的關鍵字" v-model="searchText" />

  <div v-if="searchResults.pending">正在查詢中</div>
  <div v-else-if="searchResults.rejected">
    查詢失敗
    {{ searchResults.error }}
  </div>
  <div v-else-if="searchResults.fulfilled">
    <div v-for="(item, index) in searchResults.data" :key="index">
      {{ item }}
    </div>
  </div>
  
</template>

在這裏能夠看出來 usePromiseComputed 返回的結果其中的五個字段，三個狀態字段也就是 前文中提到的控制loading的那個變量 兩個 結果字段

總結

就上面的代碼而言是一個極簡 input -> tranform -> out 結構。這裏不須要手動的聲明一個狀態變量，而後在不一樣的階段在去修改這個變量，這樣的操做封裝在了 usePromiseComputed 裏面。

關於 usePromiseComputed 的實現能夠去這裏查看 https://github.com/2234839/vue-demo/blob/master/src/components/promise-loading/lib/vue.composition.api.ts

實際上針對業務還加入了兩個可選參數 deps 和 dataMergeFun

利用 deps 能夠顯式的聲明哪些變量變化的時候從新請求

利用 dataMergeFun 能夠很是簡單的在上面的代碼基礎上加入請求結果翻頁功能

by 崮生 from 崮生 • 一些隨筆 🎨,歡迎 贊助本文o")
本文歡迎分享與聚合，全文轉載未經受權（ 聯繫我）不準可。