前言：

vue里普通的计算属性computed只能计算一些同步的值，但是如果碰到需要在计算属性中发送一些异步的网络请求，需要用vue-async-computed异步计算属性

场景：

如下图1，红框灰色背景的小卡片已封装成一个组件，卡片内的数据类型值需要做判断后返回值显示，如果组件外部传进的值dataType！==quote，则原样显示，否则需要调用接口查名称

用法：

<ElTag size="small" :type="tagType" >{{ userInfo }}</ElTag>

<script setup lang="ts">
const userInfo = asyncComputed(() => {
    if (props.data.dataType !== 'quote') {
        return props.data.dataType
    }
    return getModelDetailApi({ id: props.data.quoteId }).then((res) => {
        return res.data.space + '.' + res.data.label
    })
}, '默认值')
</script>

安装

npm install --save vue-async-computed

在vue3中无需安装，可直接导入使用

import { asyncComputed } from '@vueuse/core'

特性：

1.与常规同步计算属性一样，可以设置get，但与常规计算属性不同，如果设置set方法，将被忽略；可以设置默认值，在首次加载数据之前使用。

2.默认情况下，computedAsync将在创建时立即开始解析，指定lazy: true使其在第一次访问时开始解析。

const userInfo = asyncComputed(() => {
    if (props.data.dataType !== 'quote') {
        return props.data.dataType
    }
    return getModelDetailApi({ id: props.data.quoteId }).then((res) => {
        return res.data.space + '.' + res.data.label
    })
}, null,{ lazy: true})

3.当计算源在前一个异步函数得到解析之前发生变化时，希望取消前一个，用到onCancel。

const downloads = computedAsync(async(onCancel) => {
  const abortController = new AbortController()

  onCancel(() => abortController.abort())

  return await fetch(
    `https://api.npmjs.org/downloads/point/last-week/${packageName.value}`,
    { signal: abortController.signal },
  )
    .then(response => response.ok ? response.json() : { downloads: '—' })
    .then(result => result.downloads)
}, 0)

4.捕获展示错误信息

const userInfo = asyncComputed(() => {
    if (props.data.dataType !== 'quote') {
        return props.data.dataType
    }
    return getModelDetailApi({ id: props.data.quoteId }).then((res) => {
        return res.data.space + '.' + res.data.label
    })
}, null,{ lazy: true,onError:(err)=>{console.log(err)})