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.
然後,咦對耶,這不就是使用非同步的方法執行 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,我終於要回到原本學習的正常軌道了!
希望可以緩慢跟上~~
Decisional 決定行動
希望可以完成 twitch 改寫跟 hw4.md!