[筆記] API 串接, Axios 和綁定DOM事件 @地瓜大的飛翔旅程

章節連結

重點提示

運用 “Axios” 工具以 “GET” 方式請求資料
綁定事件到按鈕上

在 Alpha Camp 的第二學期課程中，有提到寫個網頁來向遠端伺服器請求資料，故整理一下自己腦海中所學到的技巧與觀念。

重點提示

運用 “Axios” 工具以 “GET” 方式請求資料

<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)
  })
}

// 回傳值儲存到 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)

})

}

綁定事件到按鈕上

<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))
})