mentor-program-day45

今天給自己打幾分？

進度

今天做了 week8 的第二個作業：

好久不見的 Twitch，雖然還沒完全做完，但希望明天能把它做的越來越好。

學到的事情

在串 API 的時候有個蠻特別的部分是「圖片網址」要自己設定寬高度，所以資料格式是長這樣：

https://static-cdn.jtvnw.net/previews-ttv/live_user_lck_korea-{width}x{height}.jpg

這時候以前學的「正則表達式」就派上用場了：

// 匹配 {a到z大小寫}x{a到z大小寫}
const regExp = /\{[a-zA-Z]+\}x\{[a-zA-Z]+\}/
const url = "https://static-cdn.jtvnw.net/previews-ttv/live_user_lck_korea-{width}x{height}.jpg"
url.replace(regExp, '600x360')

就可以拿到指定的圖片尺寸：

https://static-cdn.jtvnw.net/previews-ttv/live_user_lck_korea-600x360.jpg

以前花時間學的東西能派上用場，就讓人感覺特別開心。

另外串 API 不外乎就是要做各種「非同步」處理。儘管現在有好用的 Promise 可以避免「callback hell」，但還是想加強自己對於「callback」的概念。所以在寫 hw2 的時候都還是用傳統的 xhr 老方法來做，希望自己有天能成為 callback 大師！

我覺得非同步最麻煩的地方在於「迴圈」吧？因為這樣子寫絕對是錯的：

for(let i=1; i<=10; i++) {
  setTimeout(function() {
    console.log(i)
  }, 1000)
}

這樣寫絕對不是「每一秒印出 1, 2, 3, ..., 10」，而是 1 秒後直接印出 1 ~ 10。

所以就不能用迴圈來寫，而是得用「遞迴」的方式來做（先不管 Promise 這個好用的東西）：

let total = 10
let start = 1
function loop(i) {
  if (i > total) {
    return undefined
  }
  setTimeout(function() {
    console.log(i)
    // 一秒過後再 call 一次 loop
    loop(++i)
  }, 1000) 
}
loop(start)

所以換成發 request 的話可能就要變成這樣：

// 總共要發幾次 request
let total = 10
// 代表發了幾次 request
let counter = 1
function callback(data) {
  // 拿到資料就更新一次次數
  counter += 1
  /*
    ...
    ...
    ... 
  */
  // 發夠了就跳出去
  if (counter > total) {
    return undefined
  }
  // 不夠的話繼續 call API
  getData(url, callback)
}

好在一直都有練習遞迴的概念，不然大概會在這裡死很慘 ∑(✘Д✘๑ )

題外話

希望明天能買到好吃的胡椒餅。

期許

希望明天把 week8 的作業做完。