Async State

Reactive async state.

Usage

<script>
    import { asyncState } from "@sveu/shared"

    const { state, ready, loading, error, execute } = asyncState(
        () => Promise.resolve(1),
        0,
    )
</script>
<script>
    import { asyncState } from "@sveu/shared"

    const { state, ready, loading, error, execute } = asyncState(
        () => Promise.resolve(1),
        0,
    )
</script>
svelte

Example

random

Loading: true

Ready: false

<script>
    import { asyncState } from "@sveu/shared"

    async function get_random_image() {
        const resp = await fetch("https://source.unsplash.com/random/")
        return resp.url
    }

    const { loading, state, ready, execute } = asyncState(
        get_random_image,
        "https://i.ibb.co/VjFRjmf/Bugs-in-Bah-Humduck.jpg"
    )
</script>

<img src="{$state}" alt="random" width="200" height="200" />
<br />
<h3>Loading: {$loading}</h3>
<h3>Ready: {$ready}</h3>
<button disabled="{!$ready}" on:click="{() => execute()}">Fetch</button>
<script>
    import { asyncState } from "@sveu/shared"

    async function get_random_image() {
        const resp = await fetch("https://source.unsplash.com/random/")
        return resp.url
    }

    const { loading, state, ready, execute } = asyncState(
        get_random_image,
        "https://i.ibb.co/VjFRjmf/Bugs-in-Bah-Humduck.jpg"
    )
</script>

<img src="{$state}" alt="random" width="200" height="200" />
<br />
<h3>Loading: {$loading}</h3>
<h3>Ready: {$ready}</h3>
<button disabled="{!$ready}" on:click="{() => execute()}">Fetch</button>
svelte
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
Click fold/expand code

API

Arguments

Name Description Type Required
promise The promise to execute. () => Promise<any> Yes
initialState The initial state of the state. any No


Options

Name Description Type
delay Delay for executing the promise in second. number
immediate Execute the promise right after the function is invoked. boolean
onError Callback when error is caught. (error: unknown) => void
resetOnExecute Sets the state to initial state before executing the promise. boolean
throwError An error is thrown when executing the execute function. boolean


Returns

Name Description Type
state The state. Readable<any>
ready A boolean that indicates if the promise has been resolved. Readable<boolean>
loading A boolean that indicates if the promise is being executed. Readable<boolean>
error The error that was caught. Readable<unknown>
execute A function that executes the promise manually. (delay?: number, ...args: any[]) => Promise<number>
Last update at: Invalid Date