Day 92

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

白天將 Fetch 與 Promise 補充的課程影片看過後，跟著實作與做筆記，有個大概的瞭解。
到了真正開始要做 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 解決了我的困惑。

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.

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

然後又碰到了一個問題就是那這樣要怎麼使用 async 及 await 呢？當時對於這個的概念還不太熟悉，所以又去查了資料，在> 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 & await 的 try catch 抓取錯誤訊息。
經過上週的多個生活突發事件（重灌電腦、無法救援回來的檔案、家裡的事情），學習軌道有點偏離 QQ，我終於要回到原本學習的正常軌道了！
希望可以緩慢跟上～～