Skip to main content

Nhiều ứng dụng web sẽ phải làm việc với dữ liệu không được đồng bộ (asynchronous, viết tắt: async). Svelte giúp bạn đợi (await) giá trị dữ liệu của promises vào thẳng trong markup một cách dễ dàng:

App.svelte
{#await promise}
	<p>...vui lòng đợi</p>
{:then number}
	<p>Con số đó là số {number}</p>
{:catch error}
	<p style="color: red">{error.message}</p>
{/await}

Chỉ có promise gần nhất sẽ được xem xét, tức là bạn không cần phải lo về việc xử lí race conditions (tranh đoạt điều khiển).

Race conditions là gì?

Nếu bạn chắc rằng promise của bạn không reject (từ chối), có thể bỏ khối catch. Bạn cũng có thể bỏ luôn khối đầu nếu bạn không muốn hiện gì cho đến khi promise được giải quyết:

{#await promise then number}
	<p>Con số đó là số {number}</p>
{/await}

Tiếp theo: Sự kiện

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<script>
	import { getRandomNumber } from './utils.js';
 
	let promise = getRandomNumber();
 
	function handleClick() {
		promise = getRandomNumber();
	}
</script>
 
<button on:click={handleClick}>
	lấy số ngẫu nhiên
</button>
 
<p>...vui lòng đợi</p>
initialising