如何透過 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並解析呼叫後的結果並呈現。