Pengambilan Async dalam Svelte 5

Apabila anda ingin mengambil sesuatu dalam Svelte, kaedah yang disyorkan ialah meletakkannya dalam fungsi beban.

Saya menulis artikel tentang pengambilan async dan sebab ini penting untuk berfungsi di luar fungsi beban.

Secara umumnya, apabila SSR tidak terlibat, anda mempunyai kawalan yang lebih baik terhadap keadaan perlumbaan, pengendalian ralat dan pelaksanaan di luar fungsi beban. Walaupun saya bersetuju dalam KEBANYAKAN situasi anda harus menggunakan fungsi muat (dengan SvelteKit), ini tidak benar untuk SEMUA situasi.

Berikut ialah fungsi sumber mudah untuk mengendalikan perkara ini:

// resource.svelte.ts

export let resource = <T>(
    fn: () => Promise<T>,
    initialValue?: T
) => {

    const _rune = $state<{ value: T | undefined }>({
        value: initialValue
    });

    $effect(() => {
        fn().then((data) => {
            _rune.value = data;
        });
    });

    return _rune;
};

Dan anda akan menggunakannya seperti itu dalam komponen anda:

import { resource } from '$lib/resource.svelte';
...
const todo = resource<Todo>(() =>
  fetch(`https://jsonplaceholder.typicode.com/todos/${id}`)
    .then((response) => response.json())
);

Dan tunjukkan nilai dengan:

{todo.value}

Konsep Serupa dalam Rangka Kerja Lain

• Pertanyaan Bertindak Balas
• Jam tangan Vue
• SolidJS createResource
• Qwik useResource$
• Sumber sudut 19
• ngxtension derivedAsync

Kini anda boleh membuat isyarat dengan mudah daripada sumber tak segerak! Saya harap sesuatu seperti ini boleh dilaksanakan dalam Svelte seperti $resource suatu hari nanti.

Demo: Vercel
Repo: GitHub

J

Atas ialah kandungan terperinci Pengambilan Async dalam Svelte 5. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!