Svelte – Await Blocks

1 min read


Alright guyss.. welcome back to our channel.. sekarang kita lanjutkan materi Svelte tentang await statement ya… langsung aja

pertama kita buat file GenerateNumber.svelte

<script>
	let promise = getRandomNumber();

	async function getRandomNumber() {
		const res = await fetch(`https://svelte.dev/tutorial/random-number`);
		const text = await res.text();

		if (res.ok) {
			return text;
		} else {
			throw new Error(text);
		}
	}

	function handleClick() {
		promise = getRandomNumber();
	}
</script>

<button on:click={handleClick}>
	generate random number
</button>

{#await promise}
	<p>...waiting</p>
{:then number}
	<p>The number is {number}</p>
{:catch error}
	<p style="color: red">{error.message}</p>
{/await}

dan pada App.svelte kita akan menjadi seperti ini …

<script>
	
	import Counter from './components/Counter.svelte'
	import Toggle from './components/Toggle.svelte'
	import Img from './components/Img.svelte'
	import String from './components/String.svelte'
	import Statement from './components/Statement.svelte'
	import Condition from './components/Condition.svelte';
	import Nested from './components/Nested.svelte';
	import Info from './components/Info.svelte';
	import IfLogin from './components/IfLogin.svelte'
	import Comparison from './components/Comparison.svelte'
	import EachYoutube from './components/EachYoutube.svelte'
	import KeyEachThing from './components/KeyEachThing.svelte'
	import GenerateNumber from './components/GenerateNumber.svelte';

	export let name;

	const pkg = {
		name: 'svelte',
		version: 3,
		speed: 'blazing',
		website: 'https://svelte.dev'
	};
</script>

<main>
	<h1>Hello {name}!</h1>
	<p>Visit the <a href="https://svelte.dev/tutorial">Svelte tutorial</a> to learn how to build Svelte apps.</p>
	<Counter />
	<Toggle />
	<Img />
	<String />
	<Statement />
	<Condition />
	<Nested answer={42}/>
	<Nested/>
	<Info {...pkg}/>
	<IfLogin />
	<Comparison />
	<EachYoutube />
	<KeyEachThing />
	<GenerateNumber />

</main>

<link href="https://fonts.googleapis.com/css?family=Overpass:100,400" rel="stylesheet">

dan hasilnya :

jadi jika kalian udah paham tentang dasar JS pastinya udah tau function tersebut ya.. oke berikut link githubnya ada disini … cyaaaa….

Bima Sena

Leave a Reply

Your email address will not be published. Required fields are marked *