ข้ามไปยังเนื้อหา

Async Patterns

นักพัฒนา React จัดการ loading/error state ด้วย useState แบบ manual หรือใช้ Suspense + react-query เพื่อลด boilerplate Svelte มีทางออกแบบ declarative ในตัว: {#await promise}...{:then value}...{:catch err}...{/await} จัดการทั้งสามสถานะ — กำลังโหลด, สำเร็จ, และ error — ใน markup รวดเดียว ไม่ต้องมี flag manual ให้ track

manual loading/error/data เทียบกับ `{#await}`

function PostList() {
  const [posts, setPosts] = React.useState([]);
  const [loading, setLoading] = React.useState(true);
  const [error, setError] = React.useState(null);

  React.useEffect(() => {
    fetch('/api/posts')
      .then(r => r.json())
      .then(data => { setPosts(data); setLoading(false); })
      .catch(e => { setError(e.message); setLoading(false); });
  }, []);

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error: {error}</p>;
  return (
    <ul>
      {posts.map(p => <li key={p.id}>{p.title}</li>)}
    </ul>
  );
}

<script>
  const postsPromise = fetch('/api/posts').then(r => r.json());
</script>

{#await postsPromise}
  <p>Loading...</p>
{:then posts}
  <ul>
    {#each posts as p}
      <li>{p.title}</li>
    {/each}
  </ul>
{:catch error}
  <p>Error: {error.message}</p>
{/await}

สังเกตว่าโค้ด Svelte ไม่มี state variables เลย — {#await} ติดตามสถานะของ Promise โดยตรงและ render ตาม block ที่ถูกต้องอัตโนมัติ เมื่อ Promise resolve หรือ reject Svelte จะ update UI ให้เอง

ลองเล่น: simulated Promise + Reload button

SvelteOpen in Svelte Playground ↗ (copies code)

<script>
  function fetchData() {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        if (Math.random() > 0.3) {
          resolve([
            { id: 1, title: 'Svelte 5 Runes Deep Dive' },
            { id: 2, title: 'Building with SvelteKit' },
            { id: 3, title: 'Stores vs Module State' },
          ]);
        } else {
          reject(new Error('Network error — try reloading'));
        }
      }, 1000);
    });
  }

  let promise = $state(fetchData());
</script>

{#await promise}
  <p>Fetching posts...</p>
{:then posts}
  <ul>
    {#each posts as post}
      <li>{post.title}</li>
    {/each}
  </ul>
{:catch error}
  <p style="color: crimson">{error.message}</p>
{/await}

<button onclick={() => promise = fetchData()}>Reload</button>

<style>
  ul { padding-left: 1.2rem; }
  li { margin: 0.3rem 0; }
  button { margin-top: 1rem; padding: 0.4rem 1rem; cursor: pointer; }
</style>

กด Reload หลายๆ ครั้งเพื่อดูทั้งสถานะ loading และ error (มี 30% โอกาสเกิด error แบบสุ่ม) เมื่อ promise เปลี่ยน บล็อก {#await} จะ reset และเริ่มต้นใหม่อัตโนมัติ

🔀 React manual state vs Svelte {#await}

React ต้องการ state variables แยก 3 ตัว: loading, error, data — จัดการเองทั้งหมด
Svelte {#await} ติดตามสถานะ Promise โดยตรง ไม่ต้องมี state flags
{#await promise} คือสถานะ pending, {:then value} คือ resolved, {:catch err} คือ rejected
เมื่อ Promise variable เปลี่ยน บล็อก {#await} จะ re-run อัตโนมัติ — ง่ายสำหรับ “reload” pattern
React Suspense + react-query ให้ feature ใกล้เคียงกัน แต่ต้องใช้ library และ setup เพิ่ม
{#await} ทำงานกับ Promise ธรรมดาทุกตัว — ไม่ต้องมี library พิเศษ