API串接練習

在Codepen Setting 裡設定 axios 函式庫；
在本地電腦上，可直接在 </body> 之前加入
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

Dog API 網站
API文件
使用GET方法，請求https://dog.ceo/api/breeds/image/random 的內容。
JSON

{
"message": "https://images.dog.ceo/breeds/terrier-bedlington/n02093647_3338.jpg",
"status": "success"
}

規格: 點擊按鈕，產生隨機的照片。

  <h1>DOG API</h1>
  <button>
      <i class="fas fa-paw"></i>
      dog breeds
      <i class="fas fa-paw"></i>
  </button>
  <div id="show">
    <!-- data show here -->
    <img src=" " alt="">
  </div>
  <script src="main.js"></script>

練習Codepen
要抽換照片內容，所以<img src=""> 會每點擊按鈕，就變更 屬性src的url。
疑問:
下圖: 宣告img節點包含src屬性property，無法顯示圖片。

直接抓到src屬性的值，值一開始就賦予，所以無法再去修改。

下圖: 宣告img節點不包含屬性，在函式內再以 img.src 修改src屬性，重新賦值新的url，即可顯示圖片。

1. 用 const 宣告img變數，因為只是改屬性
2. .then() .catch() 可用箭頭函式

const img = document.querySelector('.dog-image')
axios.get('https://dog.ceo/api/breeds/image/random')
    .then(response => { //箭頭函式
      img.src = response.data.message
    })

reference:
這篇介紹regular JS 和 jQuery方法，先抓節點img，再修改src屬性