详解 VueUse 中 useAsyncState 实现原理

丶远方2024-01-11 18:33

首发于公众号：前端随想录，欢迎关注

useAsyncState

useAsyncState是一个用于管理异步状态的自定义钩子函数。它是你简化异步操作的最佳拍档，就像鱼儿离不开水，雄鹰离不开天空，你老婆离不开你，同时异步也离不开 useAsyncState，它简化了在Vue组件中处理异步操作的过程，如发送网络请求、加载数据或执行其他耗时的任务。

背景

在Vue 3 Composition API中，我们可以使用自定义钩子函数来封装可复用的逻辑。useAsyncState是一个强大而灵活的自定义钩子函数，帮助我们管理异步操作的状态，使代码更简洁、可读性更强。

我们先来看一下我们平时在项目开发的过程中如何使用异步状态：

html 复制代码 
<template>
  <div>{{ data }}</div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { getData } from './api'

const data = ref(null)
const loading = ref(false)
function loadData() {
  loading.value = true
  getData()
    .then(res => {
      data.value = res
    })
    .catch(e => {
      console.log(e)
    })
    .finally(() => {
      loading.value = false
    })
}

onMounted(() => {
  loadData()
})
</script>

在上面的代码中，我们可以看到，我们需要定义一个data变量来存储异步操作的结果，还需要定义一个loading变量来存储异步操作的加载状态，还需要定义一个loadData函数来执行异步操作，当异步操作开始时，我们需要将loading设置为true，当异步操作结束时，我们需要将loading设置为false，当异步操作成功时，我们需要将结果赋值给data，在这段代码中，我们需要定义两个变量和一个函数，来处理异步操作，这样的代码显然不够优雅，我们可以通过自定义钩子函数来优化它。

针对上面的代码，我们不难发现，当我们需要获取异步状态时，需要一个变量来接受获取到的异步状态，有时我们也会需要用到loading属性来判断异步操作是否正在加载，为此我们需要完成 useAsyncState 来实现它的功能，我们下来看一下实现后的代码：

html 复制代码 
<template>
  <div>{{ data }}</div>
</template>

<script lang="ts" setup>
import { useAsyncState } from './useAsyncState'
import { getData } from './api'
const { data, loading } = useAsyncState(getData, null) // 传递异步操作的函数和初始值
</script>

对此我们使用短短十行代码，就实现了异步操作的状态管理，比起之前的代码，我们可以看到，我们不需要定义额外的变量和函数，只需要调用useAsyncState函数，就可以获取异步操作的状态，这样的代码更加简洁，可读性更强。

目的

useAsyncState 旨在提供以下功能：

  • 方便管理异步操作的状态
  • 处理异步操作的加载中、成功和错误等不同状态
  • 支持自定义操作，如在成功或失败时执行其他逻辑
  • 提供性能优化选项，避免不必要的更新

基础设计

在实现useAsyncState之前，我们先来初步的设计一下它的结构：

参数

名称 描述 类型 必传 默认值
fn 用于执行异步操作的函数，该函数返回一个 Promise，在调用返回值 execute 时将会执行该函数，将 Promise 结果赋值给 state (...args) => Promise<any> 是 -
initialValue 默认值，fn函数未执行完成之前，state将为默认值，该参数的类型应和 fn 参数返回的 Promise 结果类型相同 Awaited<ReturnType> 是 -

返回值

名称 描述 类型
state 异步操作的状态，初始值为"initialValue"，当 fn 返回的Promise状态完成时，将结果赋值给 state Awaited<ReturnType>
loading 异步操作是否正在加载中，初始值为false，当 fn 执行时，状态为loadin为true，Promise状态完成时，loading为false boolean
execute 执行异步操作的函数，调用时会执行 fn 函数，重新获取异步状态 () => void

注：我们最初的设计是为了方便大家的理解，只实现基本的功能，后续我们会对其进行改进，使其更加易用。

实现

有了上面的设计，我们就可以开始实现useAsyncState了。首先，我们需要定义一个useAsyncState函数，该函数接受两个参数，分别是fn和initialValue，并返回一个对象，该对象包含多个属性。

typescript 复制代码 
import { ref, Ref } from 'vue'

interface UseAsyncStateReturnType<T> {
  state: Ref<T>
  loading: Ref<boolean>
  execute: () => void
}

/**
 * 响应式异步状态管理
 * @param {() => Promise<T>} fn
 * @param {T} initialValue
 * @returns {UseAsyncStateReturnType<T>}
 */
export function useAsyncState<T>(
  fn: () => Promise<T>,
  initialValue: T
): UseAsyncStateReturnType<T> {
  // 用于保存异步状态的 ref，默认为初始值
  const state = ref<T>(initialValue)
  // loading 状态，默认为 false
  const loading = ref<boolean>(false)

  async function execute() {
    // 将 loading 状态设置为 true
    loading.value = true
    try {
      const data = await fn()
    } finally {
      // 将 loading 状态设置为 false
      loading.value = false
    }
  }

  return {
    state,
    loading,
    execute
  }
}

在上面的代码中，我们实现了 useAsyncState 的基本功能，它接受两个参数，分别是 fn 和 initialValue，并返回一个对象，该对象包含我们约定的属性。

此时我们的 useAsyncState 就已经完成了，我们可以在组件中去使用它

html 复制代码 
<template>
  <div>
    <div v-if="loading">Loading...</div>
    <div v-else-if="state">Data: {{ state }}</div>
    <div v-else>Error</div>
    <button @click="execute">Execute</button>
  </div>
</template>

<script lang="ts" setup>
  import { useAsyncState } from './useAsyncState'

  const { state, loading, execute } = useAsyncState(
    () => new Promise(resolve => setTimeout(() => resolve('data'), 1000)),
    []
  )

  execute()
</script>

在使用过程中，我们发现useAsyncState还有一些不足之处：

  1. 需要手动调用execute函数，才能执行异步操作
  2. 调用 execute 函数时，无法传递参数
  3. 无法处理异步操作的错误
  4. 如果我们需要再响应成功和失败的情况下，执行不同的操作，就需要在execute函数中添加额外的逻辑

为了解决上面的问题，我们可以对useAsyncState进行改进，使其更加易用。

改进

功能改进

我们针对上面的问题，梳理一下我们的解决方案：

  1. 添加 immediate 参数，用于控制是否立即执行异步操作
  2. 在返回值中添加 error 属性，用于存储异步操作的错误信息
  3. 添加 onSuccess 和 onError 参数，用于在异步操作成功和失败时执行额外的操作
  4. 在调用 execute 函数时，无法传递参数，我们可以将 execute 函数改为接受一个参数，该参数为 fn 函数的参数

当我们改进后，useAsyncState 的结构如下：

typescript 复制代码 
import { ref, Ref } from 'vue'

interface UseAsyncStateReturnType<T, P extends any[]> {
  state: Ref<T>
  loading: Ref<boolean>
  execute: (...args: P) => void
  error: Ref<unknown>
}

interface UseAsyncStateOptions<T> {
  immediate?: boolean
  onSuccess?: (data: T) => void
  onError?: (e: unknown) => void
}

export function useAsyncState<T, P extends any[]>(
  fn: (...args: P) => Promise<T>,
  initialValue: T,
  options: UseAsyncStateOptions<T> = {}
): UseAsyncStateReturnType<T, P> {
  // 解构 options 参数
  const { immediate = false, onError, onSuccess } = options

  // 函数执行结果，默认为初始值
  const state = ref<T>(initialValue) as Ref<T>
  // loading 状态，默认为 false
  const loading = ref<boolean>(false)

  const error = ref<unknown>(null)

  async function execute(...args: any[]) {
    // 在执行异步动作之前将 error 设置为 null
    error.value = null
    // 将 loading 状态设置为 true
    loading.value = true
    try {
      const data = await fn(...(args as P))
      onSuccess?.(data)
    } catch (e: unknown) {
      error.value = error
      onError?.(e)
    } finally {
      // 将 loading 状态设置为 false
      loading.value = false
    }
  }

  if (immediate) {
    // 如果 immediate 为 true，则立即执行异步操作
    execute()
  }

  return {
    state,
    loading,
    execute,
    error
  }
}

在上面的代码中，我们添加了 error 属性，用于存储异步操作的错误信息，当异步操作成功时，我们会将 error 设置为 null，当异步操作失败时，我们会将 error 设置为错误信息。

性能优化

在上述代码中，我们将 state 定义为 Ref 类型，但是 Ref 是一个深度的响应式对象，在大部分情况下，我们使用 useAsyncState 获取到的数据只是用来做展示，所以我们应该避免使用 Ref，而是使用 ShallowRef 来代替，ShallowRef 它只会在修改ref.value时才会触发更新，而不会在修改ref.value的属性时触发更新。

typescript 复制代码 
import { ref, Ref, shallowRef } from 'vue'

interface UseAsyncStateReturnType<T, P extends any[]> {
  state: Ref<T>
  loading: Ref<boolean>
  execute: (...args: P) => void
  error: Ref<unknown>
}

interface UseAsyncStateOptions<T> {
  immediate?: boolean
  onSuccess?: (data: T) => void
  onError?: (e: unknown) => void
  shallow?: boolean
}

export function useAsyncState<T, P extends any[]>(
  fn: (...args: P) => Promise<T>,
  initialValue: T,
  options: UseAsyncStateOptions<T> = {}
): UseAsyncStateReturnType<T, P> {
  // 解构 options 参数
  const { immediate = false, shallow = true, onError, onSuccess } = options

  // 函数执行结果，默认为初始值
  const state = (shallow ? ref : shallowRef)<T>(initialValue) as Ref<T>
  // loading 状态，默认为 false
  const loading = ref<boolean>(false)

  const error = shallowRef<unknown>(null)

  async function execute(...args: any[]) {
    // 在执行异步动作之前将 error 设置为 null
    error.value = null
    // 将 loading 状态设置为 true
    loading.value = true
    try {
      const data = await fn(...(args as P))
      onSuccess?.(data)
    } catch (e: unknown) {
      error.value = error
      onError?.(e)
    } finally {
      // 将 loading 状态设置为 false
      loading.value = false
    }
  }

  if (immediate) {
    // 如果 immediate 为 true，则立即执行异步操作
    execute()
  }

  return {
    state,
    loading,
    execute,
    error
  }
}

至此，我们的 useAsyncState 就已经完成了。

使用

我们可以在组件中去使用 useAsyncState，来获取异步数据

html 复制代码 
<template>
  <div>
    <div v-if="loading">Loading...</div>
    <div v-else-if="state">Data: {{ state }}</div>
    <div v-else>Error</div>
    <button @click="execute">Execute</button>
  </div>
</template>

<script lang="ts" setup>
  import { useAsyncState } from './useAsyncState'

  const { state, loading, execute } = useAsyncState(
    () => new Promise(resolve => setTimeout(() => resolve('data'), 1000)),
    '',
    {
      immediate: true,
      onSuccess: data => console.log(data),
      onError: error => console.log(error)
    }
  )
</script>

我们来看一下它的效果

总结

在本篇文章中，我们实现了一个 useAsyncState，它可以帮助我们更加方便的获取异步数据，同时也可以帮助我们处理异步操作的错误，以及在异步操作成功和失败时执行额外的操作。

相关推荐
别拿曾经看以后~3 分钟前
【el-form】记一例好用的el-input输入框回车调接口和el-button按钮防重点击
javascript·vue.js·elementui
我要洋人死6 分钟前
导航栏及下拉菜单的实现
前端·css·css3
川石课堂软件测试8 分钟前
性能测试|docker容器下搭建JMeter+Grafana+Influxdb监控可视化平台
运维·javascript·深度学习·jmeter·docker·容器·grafana
科技探秘人17 分钟前
Chrome与火狐哪个浏览器的隐私追踪功能更好
前端·chrome
科技探秘人18 分钟前
Chrome与傲游浏览器性能与功能的深度对比
前端·chrome
JerryXZR23 分钟前
前端开发中ES6的技术细节二
前端·javascript·es6
七星静香25 分钟前
laravel chunkById 分块查询 使用时的问题
java·前端·laravel
q24985969328 分钟前
前端预览word、excel、ppt
前端·word·excel
小华同学ai33 分钟前
wflow-web：开源啦 ，高仿钉钉、飞书、企业微信的审批流程设计器，轻松打造属于你的工作流设计器
前端·钉钉·飞书
problc38 分钟前
Flutter中文字体设置指南：打造个性化的应用体验
android·javascript·flutter
热门推荐
01【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总02(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明03组基轨迹建模 GBTM的介绍与实现（Stata 或 R）04【AIGC】重塑未来的科技巨轮05全面解析：构建基于深度学习的安全帽检测系统（UI界面+YOLO代码+数据集）06【经验分享】Ubuntu22.04安装微信(linux官方版)07基于YOLOv10深度学习的CT扫描图像肾结石智能检测系统【python源码+Pyqt5界面+数据集+训练代码】深度学习实战、目标检测08Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO09RAG 实践- Ollama+RagFlow 部署本地知识库10红米手机使用google play