iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 2
0
Modern Web

前端工程的另一個選擇 Svelte 系列 第 13

DAY13-fetch和promise還有await抓抓資料

如何透過 fetch 及 promise 還有 await 抓取資料

在昨天的文章介紹給大家的是如何將變數綁定到html的下拉選單上,最後還有結合之前分享的foreach動態呈現下拉選單的選項,然後今天跟大家介紹一下如何呼叫api並且把資料抓回來。

本文同步放置於此

javascript怎麼呼叫api

要將呼叫api抓資料之前當然要講歷史一下,在最早之前是透過XMLHttpRequest取得資料,然而在jQuery時是透過ajax來取得資料,今天筆者兩個都不說明,因為有好用的fetch為什麼要在說明那兩個呢?

fetch的式子

接下來跟大家分享一下如何透過fetch來取得資料,並且介紹一下如何非同步傳輸,廢話不多說先看一下下列式子。

<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>

<!-- replace this element -->
<p>The number is {promise}</p>

上面是一個非同步的fetch,他會呼叫api去取得資料,當然直接用會顯示一個Promise的物件,如果熟javascript會知道用then跟resolve將結果取出來,不過今天svelte有更簡單的作法來處理promise。

await 語法

這邊要講的不是async await的await,而是svelte 的語法await,透過這語法可以幫忙解析promise物件,並依據成功、失敗及處理中給予顯示不同區塊,實際的內容就看一下下面的例子吧。

<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>

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

小結

今天介紹給大家的是透過fetch以及promise還有svelte的await語法來處理呼叫api並解析呼叫後的結果並呈現。


上一篇
DAY12-下拉選單的設定
下一篇
DAY14- slot 複合式元件
系列文
前端工程的另一個選擇 Svelte 30

尚未有邦友留言

立即登入留言