在 Alpha Camp 的第二學期課程中,有提到寫個網頁來向遠端伺服器請求資料,故整理一下自己腦海中所學到的技巧與觀念。
重點提示
運用 “Axios” 工具以 “GET” 方式請求資料
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<script src="https://unpkg.com/axios/dist/axios.min.js"></script> // 回傳值儲存到 response 變數中,可以用 Devtool 觀察究竟要怎樣才能取到想要的值。 // 若是 JSON 的格式 response,通常會是一個 object 或是 array // 可以先用 response, response.data 來檢查 // .catch是處理錯誤狀況的方式 axios.get('https://api.lyrics.ovh/v1/coldplay/yellow').then(function(response){ console.log(response.data) }).catch(function(error){ console.log(error) }) } |
綁定事件到按鈕上
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<button>get lyrics</button> <div id="show"> <!-- show data here --> </div> let button = document.querySelector('button') let show = document.querySelector('#show') button.addEventListener('click', function () { axios .get('https://api.lyrics.ovh/v1/coldplay/yellow') .then(response => { console.log(response.data) let lyrics = response.data.lyrics show.innerHTML = lyrics }) .catch(error => console.log(error)) }) |