Day 92 (Week14), 2021/07/12 (Monday)

學習時數:8 hr

Done

  • Fetch & promise 4~5/5
  • hw3 改寫第八週 Twitch 作業 66%

To Do @ this week

  • hw1 陽春部落格
  • hw2 留言版 plugin
  • hw3 改寫第八週 Twitch 作業

學習心得紀錄

Objective 客觀

白天將 FetchPromise 補充的課程影片看過後,跟著實作與做筆記,有個大概的瞭解。
到了真正開始要做 twitch request 改寫後,我就發現困難點了。
第一個困難點是:要怎麼將 XMLHttpRequest 改成 fetch,將 API URL 帶進去簡易版的 fetch 之後,要怎麼從 fetch 取到 data(fetch(...).then(resp => resp.json()),怎麼抓錯誤訊息提示(fetch(...).catch(err=>{})),然後要怎麼處理 API 拿到的資料?
先將前端發 request 的方法—— fetch,包成一個 function 為取 API URL 資料的 function。

第二個碰到的問題是:new Promise()fetch 能不能一起用?
(JS) Very confused about Promises with fetch 解決了我的困惑。

  1. What about "new Promise"? What is it? Do I need it? When?

    You need it when you don't have a promise already and you need a promise chain. You don't need it when you have a promise already (such as the one from fetch) and need a promise chain.

先前只知道 fetchasync & await 會回傳 promise 形式的內容,還以為兩個都要使用到 twitch 作業裡,後來才知道利用 fetch 發 request 就是已經擁有 promise,是原本沒有 promise chain,才需要建立一個 promisenew Promise)。

然後又碰到了一個問題就是那這樣要怎麼使用 asyncawait 呢?當時對於這個的概念還不太熟悉,所以又去查了資料,在> Promises provides us a simpler alternative to executing, composing and managing asynchronous operation compared to the traditional callback-bases approach. 看到一段文字:

Promises provides us a simpler alternative to executing, composing and managing asynchronous operation compared to the traditional callback-bases approach.

From:how to make http requests using fetch api and promises

然後,咦對耶,這不就是使用非同步的方法執行 code,然後有著同步的 code 長相嗎?所以就來試試看這樣寫:

async function abc() {
  await functionA // 例如取 API 資料
  await functionB // 新增 navbar 遊戲前五熱門的名稱
  ...
}
abc()

然後就神奇的試成功了。
但只有成功 load 出導覽列的前五熱門遊戲名稱與首頁最熱門遊戲的 20 個實況,點選熱門遊戲名稱並顯示該遊戲的 20 個實況台,還沒有做成功。

感受

今天真的有回到做 XMLHttpRequest 思考的感覺,很多內容夾在一起,要去思考流程跟語法怎麼使用才能拿到 API,然後利用 JavaScript 呈現。

今天有個小問題需要明天去努力,那就是今天我只做了 fetch.catch(err){}),還沒有做 async & awaittry catch 抓取錯誤訊息。
經過上週的多個生活突發事件(重灌電腦、無法救援回來的檔案、家裡的事情),學習軌道有點偏離 QQ,我終於要回到原本學習的正常軌道了!
希望可以緩慢跟上~~

Decisional 決定行動

希望可以完成 twitch 改寫跟 hw4.md!

#fetch #javascript







你可能感興趣的文章

【單元測試的藝術】Chap 3: 透過虛設常式解決依賴問題

【單元測試的藝術】Chap 3: 透過虛設常式解決依賴問題

Web Component 實戰

Web Component 實戰

財務分析(2) -- 財務指標分析

財務分析(2) -- 財務指標分析






留言討論