Giải quyết lời hứa trong các mẫu Svelte

Tìm hiểu cách làm việc với các lời hứa trong các mẫu Svelte

Hứa hẹn là một công cụ tuyệt vời mà chúng tôi có sẵn để làm việc với các sự kiện không đồng bộ trong JavaScript.

Phần giới thiệu tương đối gần đây củaawaitcú pháp trong ES2017 làm cho việc sử dụng các hứa hẹn trở nên đơn giản hơn.

Svelte cung cấp cho chúng tôi{#await}cú pháp trong các mẫu để trực tiếp làm việc với các lời hứa ở cấp mẫu.

Chúng ta có thể đợi các lời hứa giải quyết và xác định một giao diện người dùng khác cho các trạng thái khác nhau của lời hứa: chưa được giải quyết, đã giải quyết và bị từ chối.

Đây là cách nó hoạt động. Chúng tôi xác định một lời hứa và sử dụng{#await}chặn chúng tôi chờ nó giải quyết.

Khi lời hứa được giải quyết, kết quả được chuyển đến{:then}khối:

<script>
  const fetchImage = (async () => {
    const response = await fetch('https://dog.ceo/api/breeds/image/random')
    return await response.json()
  })()
</script>

{#await fetchImage} <p>…waiting</p> {:then data} <img src={data.message} alt=“Dog image” /> {/await}

Bạn có thể phát hiện một lời hứa từ chối bằng cách thêm một{:catch}khối:

{#await fetchImage}
  <p>...waiting</p>
{:then data}
  <img src={data.message} alt="Dog image" />
{:catch error}
  <p>An error occurred!</p>
{/await}

Chạy ví dụ:https://svelte.dev/repl/70e61d6cc91345cdaca2db9b7077a941

Tải xuống miễn phí của tôiSổ tay Svelte


Các hướng dẫn nhỏ gọn hơn: