Hwweek8 #14
Hwweek8 #14
Conversation
| } else if (data.prize === 'NONE') { | ||
| cover.classList.add('none'); | ||
| content.innerText = '銘謝惠顧'; | ||
| } |
There was a problem hiding this comment.
這邊也可以使用 switch case 來做，但同學這樣寫也 OK
| request.setRequestHeader('Accept', 'application/vnd.twitchtv.v5+json'); | ||
| request.onload = () => { | ||
| if (request.status >= 200 && request.status < 400) { | ||
| cb(JSON.parse(request.response)); |
There was a problem hiding this comment.
直接將 JSON.parse(request.response) 帶入 callback function 中，如果後端回傳的資料為空或者非 JSON 格式，程式就掛了
可以回想 week4 時是怎麼去預防這樣的問題的
其實以老師的範例來說，他做的事情其實你在 week4 就已經做過了，就以你 week4 hw1 的作業舉例： const request = require('request');
const API_URL = 'https://lidemy-book-store.herokuapp.com';
request(`${API_URL}/books?_limit=10`, (error, response, body) => {
let list;
try {
list = JSON.parse(body);
// eslint-disable-next-line
} catch (error) {
console.error('抓取失敗', error);
return;
}
for (let i = 0; i < list.length; i += 1) {
console.log(`${list[i].id} ${list[i].name}`);
}
});其中 承上，假如今天我開給你一個需求，就是我要你寫一個函式，當我呼叫這個函式的時候，他要以上述的範例幫我執行 先解決第一個問題：包成函式。這時候你可能很直覺的就寫成下列： const request = require('request');
function requestSomething () {
const API_URL = "https://lidemy-book-store.herokuapp.com";
request(`${API_URL}/books?_limit=10`, (error, response, body) => {
let list;
try {
list = JSON.parse(body);
// eslint-disable-next-line
} catch (error) {
console.error("抓取失敗", error);
return;
}
for (let i = 0; i < list.length; i += 1) {
console.log(`${list[i].id} ${list[i].name}`);
}
});
}
requestSomething()但由於要能對 response 做不同處理，所以函式內的 const request = require('request');
function requestSomething (cb) {
const API_URL = "https://lidemy-book-store.herokuapp.com";
request(`${API_URL}/books?_limit=10`, cb);
}這樣的話，只要我執行 requestSomething 時，於參數帶入不同的函式，我就可以針對 response 做不同的處理了： const request = require('request');
function requestSomething (cb) {
const API_URL = "https://lidemy-book-store.herokuapp.com";
request(`${API_URL}/books?_limit=10`, cb);
}
// 其中一種處理方式，後面可以根據想做不同的處理帶入不同的函式為參數
requestSomething((error, response, body) => {
let list;
try {
list = JSON.parse(body);
// eslint-disable-next-line
} catch (error) {
console.error("抓取失敗", error);
return;
}
for (let i = 0; i < list.length; i += 1) {
console.log(`${list[i].id} ${list[i].name}`);
}
});其實老師的範例大概就是這樣。以這份作業的要求來說，我們要對 response 的處理大概就是逐個安插到頁面上，這沒有問題。 但如果今天我不只要這樣做，我作業換個題目的話，那我就只要改我當作參數帶進去的那個函式就好了，負責發 request 拿資料的部分就可以不用改變，因為他只是負責拿資料而已。 所以這個概念就比較符合老師之前提過的重用性，但我忘記是哪一週了。你應該有發現， 大概就是這樣，如果有說錯也請指正我 XD |
|
原來如此，這樣我就有理解 callback function 的方便了，感謝助教的詳細易懂解說！ |
助教安安，有關作業二的 Javascript 的部分，我在看完老師的參考範例影片之後才知道可以用 callback 函式的方法寫，所以將我原先寫的部分修改成現在作業交出去的樣子。
但因為我原本絞盡腦汁寫出來的版本的功能跑出來完全一樣（底下已附上程式碼），也不覺得有什麼特別冗長迂迴的地方（除了一開始取前五名遊戲那邊）。且因為目前還體會不到使用 callback 函式的優點，加上在看完範例影片又研究了超級久才理解其中的邏輯，就忍不住會想說到底是不是有必要用到 callback 函式，因此想麻煩助教幫我看我原先這樣的做法與老師範例方法相比有什麼缺點，非常感謝！