Async Patterns

นักพัฒนา React track async state ด้วยมือ: useState สามตัวสำหรับ loading, data, และ error แล้วต่อด้วย if/else chain ใน JSX React 18 เพิ่ม <Suspense> และ error boundary เพื่อทำให้ declarative ขึ้น แต่ต้อง setup เพิ่มและต้องใช้ data library ที่ throw Promise ได้

Svelte มีคำตอบเดียวที่หรูหรา ฝังอยู่ใน template syntax:

{#await promise}
  <!-- loading -->
{:then value}
  <!-- resolved -->
{:catch err}
  <!-- rejected -->
{/await}

บล็อกเดียว สามสถานะ ไม่มี hook ไม่มี error boundary component ไม่มีการ throw Promise ถ้าตัวแปร promise ถูกแทนที่ด้วย Promise ใหม่ (เช่น เมื่อผู้ใช้กด “Reload”) Svelte จะกลับเข้าสถานะ loading ให้อัตโนมัติ

Manual useState เทียบกับ `{#await}`

function UserCard({ userId }) {
  const [user, setUser] = React.useState(null);
  const [loading, setLoading] = React.useState(true);
  const [error, setError] = React.useState(null);

  React.useEffect(() => {
    setLoading(true);
    fetch(`/api/users/${userId}`)
      .then(r => r.json())
      .then(data => { setUser(data); setLoading(false); })
      .catch(err => { setError(err.message); setLoading(false); });
  }, [userId]);

  if (loading) return <p>Loading...</p>;
  if (error) return <p style={{ color: 'red' }}>Error: {error}</p>;
  return <div><h2>{user.name}</h2><p>{user.email}</p></div>;
}

<script>
  let { userId } = $props();

  async function loadUser(id) {
    const res = await fetch(`/api/users/${id}`);
    if (!res.ok) throw new Error('Not found');
    return res.json();
  }

  let userPromise = $derived(loadUser(userId));
</script>

{#await userPromise}
  <p>Loading...</p>
{:then user}
  <div>
    <h2>{user.name}</h2>
    <p>{user.email}</p>
  </div>
{:catch err}
  <p style="color:red">Error: {err.message}</p>
{/await}

เมื่อ userId เปลี่ยน $derived จะสร้าง Promise ใหม่ และ {#await} จะกลับเข้าสถานะ pending ทันที ไม่ต้อง reset state ด้วยมือ

React Suspense เทียบกับ `{#await}`

// React — requires library support (react-query, SWR, Relay)
// The library must throw a Promise for Suspense to catch
<Suspense fallback={<Spinner />}>
  <ErrorBoundary fallback={<ErrorUI />}>
    <UserCard userId={1} />
  </ErrorBoundary>
</Suspense>

<!-- Svelte — no extra library, no boundary components -->
{#await userPromise}
  <Spinner />
{:then user}
  <UserCard {user} />
{:catch err}
  <ErrorUI message={err.message} />
{/await}

ลองเล่น: simulated async พร้อม reload

Demo นี้ใช้ setTimeout จำลอง network call 500 ms ที่บางครั้ง reject กดปุ่ม “Load” เพื่อสร้าง Promise ใหม่ — {#await} จัดการทั้งสามสถานะให้อัตโนมัติ

SvelteOpen in Svelte Playground ↗ (copies code)

<script>
  const MOCK_DATA = [
    { id: 1, name: 'Ada Lovelace', role: 'Mathematician' },
    { id: 2, name: 'Grace Hopper', role: 'Computer Scientist' },
    { id: 3, name: 'Alan Turing', role: 'Mathematician' },
  ];

  function fakeApi() {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        if (Math.random() < 0.3) {
          reject(new Error('Server error (simulated — try again)'));
        } else {
          const item = MOCK_DATA[Math.floor(Math.random() * MOCK_DATA.length)];
          resolve(item);
        }
      }, 500);
    });
  }

  let personPromise = $state(fakeApi());

  function reload() {
    personPromise = fakeApi();
  }
</script>

<h3>Person Lookup</h3>

{#await personPromise}
  <p>⏳ Fetching...</p>
{:then person}
  <div style="padding:1rem;border:1px solid #ccc;border-radius:6px;margin-bottom:0.75rem">
    <strong>{person.name}</strong>
    <p style="margin:0.25rem 0 0;color:#666">{person.role}</p>
  </div>
{:catch err}
  <p style="color:red">❌ {err.message}</p>
{/await}

<button onclick={reload}>Reload (random result)</button>

🔀 Declarative {#await} vs imperative useState loading state

React: state variable useState สามตัว (loading, data, error) + useEffect + conditional JSX — state machine อยู่ใน JavaScript logic
Svelte: บล็อก {#await} encode state machine ไว้ใน markup — pending, resolved, และ rejected เป็น structural template section ไม่ใช่ boolean flag
เมื่อตัวแปร promise ถูกแทนที่ด้วย promise ใหม่ Svelte จะเปลี่ยนกลับไปสถานะ pending ให้อัตโนมัติ ส่วน React ต้อง reset loading = true และ error = null เอง
React <Suspense> ต้องใช้ data library ที่รองรับการ throw Promise ส่วน {#await} ทำงานกับ Promise ธรรมดาได้เลย — ไม่ต้องมี library
บล็อก {:catch} เป็น optional ถ้าไม่ใส่ rejection จะถูกเพิกเฉยแบบเงียบๆ (ใส่ไว้ระหว่าง develop เสมอ จะตัดออกก็ต่อเมื่อมั่นใจว่า promise ไม่มีทาง reject)
ใช้ {#await promise then value} เป็น shorthand เพื่อข้าม loading state ไปเลยได้

Async Patterns

Manual useState เทียบกับ {#await}

React Suspense เทียบกับ {#await}

ลองเล่น: simulated async พร้อม reload

Manual useState เทียบกับ `{#await}`

React Suspense เทียบกับ `{#await}`