第十一屆鐵人賽 前端工程師的另一個選擇 svelte 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並解析呼叫後的結果並呈現。

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *