維護(hù)loading加載狀態(tài)的幾個(gè)方法小結(jié)

更新時(shí)間：2024年09月03日 08:34:47 作者：vilan_微瀾

在項(xiàng)目開(kāi)發(fā)中,當(dāng)頁(yè)面請(qǐng)求接口時(shí),組件局部或者頁(yè)面全局顯示loading加載遮罩可謂是司空見(jiàn)慣了,下面來(lái)討論一下如何優(yōu)雅的使用loading狀態(tài),文中通過(guò)代碼示例介紹的非常詳細(xì),需要的朋友可以參考下

前言

在項(xiàng)目開(kāi)發(fā)中，當(dāng)頁(yè)面請(qǐng)求接口時(shí)，組件局部或者頁(yè)面全局顯示loading加載遮罩可謂是司空見(jiàn)慣了，下面來(lái)討論一下如何優(yōu)雅的使用loading狀態(tài)。下文引用了比較常用的兩個(gè)組件Button按鈕和Table表格作為例子，談?wù)勅绾蝺?yōu)雅的維護(hù)loading加載狀態(tài)。

Butoon組件原始加載用法

<template>
  <div>
    <div>數(shù)據(jù)：{{ list }}</div>
    <el-button type="primary" @click="asyncFetch" :loading="loading">異步獲取</el-button>
    <el-button type="primary" @click="syncFetch" :loading="loading">同步獲取</el-button>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { FetchApi } from '@/api'

const loading = ref(false)
const list = ref([])
// 異步調(diào)用
const asyncFetch = () => {
  loading.value = true
  FetchApi().then(res => {
    console.log(res)
    list.value = res
  }).finally(() => {
    loading.value = false
  })
}
// 同步調(diào)用
const syncFetch = async () => {
  loading.value = true
  try {
    const res = await FetchApi()
    console.log(res)
    list.value = res
  } catch (error) {
    console.log(error)
  }
  loading.value = false
}
</script>

由以上代碼可看出，在每次點(diǎn)擊按鈕提交時(shí)，都需要在調(diào)用接口前開(kāi)啟加載狀態(tài)，在接口調(diào)用結(jié)束時(shí)，無(wú)論成功與否，都結(jié)束加載狀態(tài)。為了簡(jiǎn)化這一操作步驟，減少代碼冗余，我們可以封裝一個(gè)button組件，把loading狀態(tài)及相關(guān)邏輯提取這個(gè)組件當(dāng)中。

封裝Button組件

<template>
  <!-- 新版本vue中，透?jìng)骺墒÷詖-bind="$attrs" -->
  <el-button v-bind="$attrs" :loading="loading" :onClick="handleClick">
    <slot></slot>
  </el-button>
</template>

<script setup>
import { ref } from 'vue'

const { onClick } = defineProps(['onClick'])

const loading = ref(false)
// 重寫點(diǎn)擊方法
const handleClick = async () => {
  loading.value = true
  try {
    // 傳遞的onClick方法必須為同步的
    onClick && await onClick()
  } catch (error) {
    console.error(error)
  }
  loading.value = false
}

</script>

以上對(duì)button組件進(jìn)行二次封裝，把一些重復(fù)的業(yè)務(wù)邏輯放到該組件中，為了能夠知道異步方法什么時(shí)候執(zhí)行結(jié)束，將點(diǎn)擊方法通過(guò)prop參數(shù)的形式傳遞到子組件中，交給子組件在合適的時(shí)機(jī)執(zhí)行，學(xué)過(guò)react的話應(yīng)該對(duì)此操作比較熟悉。

組件加載用法

Page.vue

<template>
  <div>
    <div>數(shù)據(jù)：{{ list }}</div>
    <ViButton type="primary" :onClick="syncFetch">同步獲取</ViButton>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { FetchApi } from '@/api'
import ViButton from '@/components/ViButton/ViButton.vue'

const list = ref([])
// 同步調(diào)用
const syncFetch = async () => {
  const res = await FetchApi()
  list.value = res
}
</script>

需要注意的是，我們需要把FetchApi()異步方法轉(zhuǎn)為同步，這是為了在Button組件中能夠方便地知道FetchApi方法的執(zhí)行結(jié)束時(shí)機(jī)，否則在Button組件中將不能正確的隱藏loading狀態(tài)。

封裝表格組件

<template>
  <!-- 新版本vue中，透?jìng)骺墒÷詖-bind="$attrs" -->
  <el-table v-bind="$attrs" v-loading="loading">
    <slot></slot>
  </el-table>
</template>

<script setup>
import { ref, onMounted } from 'vue'

const props = defineProps({
  // 獲取數(shù)據(jù)方法
  fetchData: {
    type: Function,
    default: () => {}
  },
  // 默認(rèn)是onMounted立即執(zhí)行fetchData
  immediateFetch: {
    type: Boolean,
    default: true
  }
})

const loading = ref(false)

const getList = async () => {
  loading.value = true
  try {
    await props.fetchData()
  } catch (error) {
    console.log(error)
  }
  loading.value = false
}

onMounted(() => {
  props.immediateFetch && getList()
})

// 暴露經(jīng)過(guò)loading處理的fetch方法，比如搜索時(shí)候需要在父組件手動(dòng)調(diào)用
defineExpose({ fetchData: getList })
</script>

組件加載用法

page.vue

<template>
  <div>
    <ViTable ref="ViTableRef" :data="list" :fetchData="syncFetch" :immediateFetch="false">
      <el-table-column prop="name" label="姓名"></el-table-column>
    </ViTable>
    <el-button @click="onSearch">查詢</el-button>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { FetchApi } from '@/api'
import ViTable from '@/components/ViTable/ViTable.vue'

const list = ref([])
const ViTableRef = ref(null)
// 同步調(diào)用
const syncFetch = async () => {
  console.log('syncFetch')
  const res = await FetchApi()
  list.value = res
  console.log(list.value)
}

// 搜索
const onSearch = () => {
  ViTableRef.value.fetchData()
}
</script>

以上需要注意的有兩點(diǎn)：

數(shù)據(jù)是否需要在表格掛載完成立即獲??；
需要對(duì)外暴露經(jīng)過(guò)loading加工的fetch方法，目的是滿足需要手動(dòng)調(diào)用獲取數(shù)據(jù)的需求，比如點(diǎn)擊搜索；

以上方式當(dāng)需要手動(dòng)調(diào)用時(shí)似乎還是有些麻煩，下面我們改成useHook方式來(lái)試試~

封裝useLoading鉤子函數(shù)

useLoading.js

import { ref } from 'vue'

// 多個(gè)組件共享統(tǒng)一狀態(tài)
const loading = ref(false)

export const useLoading = (prop = {
  fetchData: () => {}
}) => {
  // 對(duì)外暴露loading給table組件或者button組件使用
  // 內(nèi)部只負(fù)責(zé)處理業(yè)務(wù)邏輯，不負(fù)責(zé)調(diào)用，這樣更加靈活
  return {
    loading,
    fetchData: async () => {
      loading.value = true
      try {
        await prop.fetchData()
      } catch (error) {
        console.log(error)
      }
      loading.value = false
    }
  }
}

ViTablePlus.vue

<template>
  <!-- 新版本vue中，透?jìng)骺墒÷詖-bind="$attrs" -->
  <el-table v-bind="$attrs" v-loading="loading">
    <slot></slot>
  </el-table>
</template>

<script setup>
import { useLoading } from '@/hooks/useLoading'

const { loading } = useLoading()
</script>

用法

Page.vue

<template>
  <div>
    <ViTablePlus :data="list" :fetchData="syncFetch" :immediateFetch="false">
      <el-table-column prop="name" label="姓名"></el-table-column>
    </ViTablePlus>
    <el-button @click="onSearch">查詢</el-button>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { FetchApi } from '@/api'
import ViTablePlus from '@/components/ViTablePlus/ViTablePlus.vue'
import { useLoading } from '@/hooks/useLoading'

// 手動(dòng)執(zhí)行經(jīng)過(guò)loading處理的fetchData方法
const { fetchData } = useLoading({
  fetchData: syncFetch
})

const list = ref([])
// 需要使用function定義方法，進(jìn)行變量提升，因?yàn)閡seLoading在syncFetch方法定義前執(zhí)行
async function syncFetch() {
  const res = await FetchApi()
  list.value = res
}

// 搜索
const onSearch = () => {
  // 經(jīng)過(guò)loading處理的fetchData方法
  fetchData()
}

onMounted(() => {
  // 經(jīng)過(guò)loading處理的fetchData方法
  fetchData()
})
</script>

總結(jié)

本文講了在二次封裝的Button和Table組件內(nèi)部維護(hù)loading狀態(tài)，為了能夠獲取到異步方法的調(diào)用完成時(shí)機(jī)，我們把異步方法轉(zhuǎn)為同步方法后，通過(guò)prop的方式傳遞到子組件，委托子組件在恰當(dāng)?shù)臅r(shí)機(jī)執(zhí)行。但把loading狀態(tài)封裝到組件內(nèi)部還是不夠靈活，最后使用useLoading鉤子函數(shù)維護(hù)一個(gè)全局狀態(tài)，提供靈活的跨組件狀態(tài)共享。

以上就是維護(hù)loading加載狀態(tài)的幾個(gè)方法小結(jié)的詳細(xì)內(nèi)容，更多關(guān)于維護(hù)loading加載狀態(tài)的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: