until

変更を監視するための一度限りのプロミス

使用法

非同期データの準備が整うのを待つ

import { until, useAsyncState } from '@vueuse/core'

const { state, isReady } = useAsyncState(
  fetch('https://jsonplaceholder.typicode.com/todos/1').then(t => t.json()),
  {},
)

;(async () => {
  await until(isReady).toBe(true)

  console.log(state) // stateが準備完了！
})()

カスタム条件を待つ

非同期関数を呼び出すには invoke を使用できます。

import { invoke, until, useCounter } from '@vueuse/core'

const { count } = useCounter()

invoke(async () => {
  await until(count).toMatch(v => v > 7)

  alert('カウンターが7を超えました！')
})

タイムアウト

import { until } from '@vueuse/core'
// ---cut---
// ref.value === true になるか、1000msが経過するまで解決されます
await until(ref).toBe(true, { timeout: 1000 })

// タイムアウト時に例外を投げます
try {
  await until(ref).toBe(true, { timeout: 1000, throwOnTimeout: true })
  // ref.value === true
}
catch (e) {
  // タイムアウト
}

その他の例

import { until } from '@vueuse/core'
// ---cut---
await until(ref).toBe(true)
await until(ref).toMatch(v => v > 10 && v < 100)
await until(ref).changed()
await until(ref).changedTimes(10)
await until(ref).toBeTruthy()
await until(ref).toBeNull()

await until(ref).not.toBeNull()
await until(ref).not.toBeTruthy()