###### tags:`ALPHACampWeek5_學期2-2`

# axios基本操作 + HTTP通訊協定

## 獲取歌詞API

[S8 - ajaxRequest blank](https://codepen.io/ks0dcongra/pen/ZEavbKq?editors=1010)

## axios也是ajax的一種，axios模板!

axios.get('www.example.com/api/')
  .then(function (response) {
    // 1.handle success
    console.log(response)
  })
  .catch(function (error) {
    // 2.handle error
    console.log(error)
  })
  .then(function () {
    // 3.always executed
  })ˇ123

## 引入axios CDN

<script src="<https://unpkg.com/axios/dist/axios.min.js>"></script>

## 顯示歌詞 HTML

<h1>API Exercise</h1>
<button>get lyrics</button>
<div id="show">

</div>

## 顯示歌詞 axios

let button = document.querySelector('button')
let show = document.querySelector('#show')
button.addEventListener('click', function () {
  axios
    .get('<https://lyric-api-403c0.firebaseio.com/Coldplay/Yellow.json>')
    .then(response => {
      console.log(response.data)
      let lyrics = response.data.lyrics
      show.innerHTML = lyrics
    })
    .catch(error => console.log(error))
})

## 通訊方法