Как асинхронно использовать вычисляемые свойства в Vue3

Предисловие

Как мы все знаем, Vue в computed Вычисляемые По умолчанию свойства должны вызываться синхронно, а это значит, что все значения должны быть возвращены немедленно. Если вы попытаетесь вызвать его асинхронно, то. Vue Об ошибке будет сообщено немедленно.

Но это явно не отвечает некоторым нашим потребностям: например, я хочу передать fetch Функция извлекает данные из серверной части и возвращает их в computed в, в это время Vue Входит в комплект computed Он не сможет удовлетворить наши потребности.

Конечно, это не значит, что решения данной ситуации не существует. Мы можем полностью создать ситуацию. reactive объект или ref ссылка, а затем в компоненте onMounted Присвоение значений этому объекту в жизненном цикле вручную также может решить проблему, но это немного громоздко и недостаточно элегантно.

Случайно я увидел лучшее решение.

useAsyncComputed функция

Я GitHub Gist Тот, что виден, был создан человеком по имени loilo опубликовано пользователями два года назад Гист по имени Async Computed Values for Vue 3。в этом Gist представил метод, основанный на Vue 3.0 и TypeScript 4.0 названный useAsyncComputed комбинированных API функция。

Чтобы использовать эту функцию, просто добавьте в свой проект следующий код:

import { ref, readonly, watchEffect, Ref, DeepReadonly } from 'vue'

/**
 * Handle overlapping async evaluations
 *
 * @param cancelCallback The provided callback is invoked when a re-evaluation of the computed value is triggered before the previous one finished
 */
export type AsyncComputedOnCancel = (cancelCallback: () => void) => void

export type AsyncComputedResult<T> = [
  value: DeepReadonly<Ref<T>>,
  evaluating: DeepReadonly<Ref<boolean>>
]

/**
 * Create an asynchronous computed dependency
 *
 * @param callback     The promise-returning callback which generates the computed value
 * @param defaultValue A default value, used until the first evaluation finishes
 * @returns A two-item tuple with the first item being a readonly ref to the computed value and the second item holding a boolean ref, indicating whether the async computed value is currently (re-)evaluated
 */
export default function useAsyncComputed<T>(
  callback: (onCancel: AsyncComputedOnCancel) => T | Promise<T>,
  defaultValue?: T
): AsyncComputedResult<T> {
  let counter = 0
  const current = ref(defaultValue) as Ref<T>
  const evaluating = ref<boolean>(false)

  watchEffect(async onInvalidate => {
    counter++
    const counterAtBeginning = counter
    let hasFinished = false

    try {
      // Defer initial setting of `evaluating` ref
      // to avoid having it as a dependency
      Promise.resolve().then(() => {
        evaluating.value = true
      })

      const result = await callback(cancelCallback => {
        onInvalidate(() => {
          evaluating.value = false
          if (!hasFinished) {
            cancelCallback()
          }
        })
      })

      if (counterAtBeginning === counter) {
        current.value = result
      }
    } finally {
      evaluating.value = false
      hasFinished = true
    }
  })

  return [readonly(current), readonly(evaluating)]
}

Его использование также очень просто:

import { ref } from 'vue'
import useAsyncComputed from './use-async-computed'

const packageName = ref('color-blend')

function getDownloads() {
  return fetch(`https://api.npmjs.org/downloads/point/last-week/${packageName.value}`)
    .then(response => response.json())
    .then(result => result.downloads)
}

const [downloads] = useAsyncComputed(getDownloads, 0)

Вот downloads Переменные могут быть такими computed Используйте то же самое, и оно будет автоматически обновляться по мере изменения исходных данных. Как видно, вводя useAsyncComputed,Мы можем получить нужные данные в асинхронном сценарии.

Итак, давайте посмотрим на это поближе useAsyncComputed Как использовать функцию:

первый,Эта функция имеет два параметра,первый параметр callback: (onCancel: AsyncComputedOnCancel) => T | Promise<T>,Может передаваться в асинхронном режимефункция；второй параметр defaultValue?: T,Это когда асинхронный вызов не завершен.

Во-вторых, возвращаемое значение этой функции на самом деле представляет собой размер 2 Массив, первый элемент массива — это текущее значение операции, а второй элемент — возврат ли асинхронного вызова. Из-за этого вы можете видеть, что в приведенном выше примере мы использовали JavaScript Грамматика деконструкции происходит от useAsyncComputed значение вместо того, чтобы присваивать его напрямую.

Еще лучше, это useAstncComputed Функция также позволяет реагировать на события отмены. Конкретные методы см. в оригинале. Gist Пример приведен.

лучшее решение

На самом деле, как упоминалось выше, этот Gist уже работал два года назад, так что есть ли более удобное решение два года спустя?

Ответ — да. В разговоре с первоначальным автором я узнал, что мы можем познакомить. VueUse Эта библиотека и ее использование Входит в комплект computedAsync функциячтобы добиться того же эффекта。этотфункция Метод использования такой же, как описанный выше.функция Почти то же самое,и предоставляет больше функций (например, отложенную загрузку),Конкретную информацию можно найти в документации.