JavaScript 連接API工具 — fetch
在JavaScript 世界中，我們沒有Browser 可以放入API 網址，也不可能按Enter 去拿資料。所以我們要用一個指令 — fetch。
格式十分簡單，fetch加上()，中間放入API網址，用引號括着。如果用真實的港鐵API就是 — fetch( 'https://rt.data.gov.hk/v1/transport/mtr/getSchedule.php?line=AEL&sta=HOK' )。
你會問：「你不是說很多運作原理嗎？」其實最後寫完成也只是以下這5行，但多了fetch、async await、json() 這三個不明物體(?)。
async function (){
const res = await fetch(‘https://rt.data.gov.hk/v1/transport/mtr/getSchedule.php?line=AEL&sta=HOK’)
const json= await res.json()
document.getElementById(‘ message ‘).innerHTML＝json.data
}第一行是叫fetch連接外部伺服器拿資料，放進res這個變數；
第二行，將拿回來的資料轉換格式；
第三行是把可用的資料抽入HTML。
稍等！那async await 是什麼？.？
API 延時問題
async await 的出現，是因為連接API 的時候，我們可能需要等待。以我們的案例來說，假設我們的網頁很順暢，但萬一港鐵API回資料要 10秒鐘，怎辦？
假設javascript 檔第10行是API，下面還有1000行資料，那是不是在第10行等10秒才繼續餘 989行的資料？如果API沒有回應，是不是要等到海枯石爛？
JavaScript是隻沒有腳的小鳥，它不會停下。
async await 就像一個標示，提醒某一行程式需要等待，JavaScript 派人去領取資料後，可以先跳過這句，到API 有回應的時候再回來。
故事例子 — foodpanda叫譚仔
第一步：你拿起手機看譚仔MENU，等於開始進入function 。
第二步：你決定要吃「勿演米線」按付款。等於執行fetch。
第三步：你不用自己親自到譚仔等，於是你可以去唱歌去sit up。在JavaScript層面等於你跳出這個Function外，先處理其他程序。
第四步：外送員到了你家門口，放下用膠袋包好的「勿演米線」。等於資料終於回來，用res這個variable內，就回到function 內繼續下一行。
第五步：由於你太懶的關係，於是大聲呼叫媽媽幫忙，將食物從膠袋中拿出，放進平日用的碗內。但媽媽不會急着幫你，所以你又要等一下！
第六步：然後，你就繼續唱歌。在JavaScript層面等於你跳出這個Function外。
第七步：最後，媽媽把米線放進你的碗內，你就可以吃了。JavaScript的資料準備好，可以放進HTML內。
假設，如果沒有async await 的話，會發生什麼事呢？這就等於你最後會吃空氣。
JSON運作解說
剛剛故事中提到叫媽媽幫忙，將食物從膠袋中拿出「拆膠袋」的情節，到底是什麼呢？
原因是在伺服器回來的資料，格式是一種叫JSON的東西，需要轉換才能使用。你可以假想，一碗「勿演米線」需要用膠袋包好才送出，foodpanda 不會把一碗米線直接送去你家。
JSON — JavaScript Object NotationObject
const obj={a:1, b:2 , c:”panda” }
JSON
{“a”: 1 , ”b”:2 , ”c”: ”panda” }（JSON的格式會叫object中的KEY以雙引號括着，相比起以往CSV和TSV等格式省位置，想了解的朋友請到 https://www.json.org/json-en.html）
作者的話 (可以略過)「我要控制科技，而不是被科技控制我！」感謝您看我的文章。
我原本是一個新聞記者，但年近30，開始感到迷惘。
於是報讀了Coding Bootcamp，3個多月成功轉職「軟件工程師」。很多朋友問我到底難不難？
我嘗試運用記者經驗，將問題深入淺出，簡短地讓沒有經驗的你，感受一下Programming適不適合自己。另一個目的，我希望累積教學經驗。
日後有手足要幫忙，我可以幫到。
即使沒有財力開公司請人，也希望授之以漁。
所以有問題請留言，我也希望知道自己哪裏講得不夠好。▲▲香港 時代▲▲