Giải quyết 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

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

• Bắt đầu với Svelte - một hướng dẫn ngắn
• Cách làm việc với các đạo cụ trong Svelte
• Cách nhập các thành phần trong Svelte
• Cách xuất các hàm và biến từ một thành phần Svelte
• Mẫu Svelte: logic có điều kiện
• Cách kết xuất một thành phần Svelte theo yêu cầu
• Slotte Slots
• Cách thêm nhận xét trong các mẫu Svelte
• Ràng buộc mảnh mai
• Xử lý cập nhật trạng thái trong Svelte
• Câu lệnh phản ứng trong Svelte
• Sự kiện vòng đời của Svelte
• Svelte mẫu: vòng lặp
• Giải quyết lời hứa trong các mẫu Svelte
• Làm việc với các sự kiện trong Svelte
• Quản lý nhà nước nhiều thành phần trong Svelte
• Cách truy cập tham số URL trong Sapper bên ngoài mô-đun tập lệnh
• Cách áp dụng động CSS trong Svelte
• Cách chuyển hướng đến một URL trong Sapper
• Cách mô phỏng vòng lặp for trong các mẫu Svelte