Javascript初學筆記19 使用 axios 向第三方 API 請求資料(Ajax)-隨機狗狗圖片顯示實作

之前在工作時就不斷地聽到API這一詞，為了不讓自己顯得太無知還去補了一下背景知識，雖然大致了解概念，但對於怎麼透過API存取第三方資料這點我還是一直都沒有實作的經驗，剛好現在AC的課程進行到這邊，做個簡單的紀錄。

細部的細節我先不說明(也沒能耐說明)，還是先看一下用法會更為好懂!
要利用axios 請求資料的方式其實比預想的簡單，一般來說似乎都採用以下的語法

axios.get('www.example.com/api/')
   .then(function (response) {
     // 1.若成功則執行
     console.log(response)
   })
   .catch(function (error) {
     // 2.若出現錯誤則執行
     console.log(error)
   })
   .then(function () {
     // 3.總是執行
   })

知道語法後，接著就是去想取出資料的網站尋找API的說明文件，以下的例子我們用我在AC上做的狗狗作業作為例子，按照以下步驟操作。
請參照這支codepen https://codepen.io/yvkfgzhs/pen/VNJEKE?editors=1010

1. 前往https://dog.ceo/dog-api 尋找所需的API接口，我的目的是產生隨機的圖片，所以最後我選擇https://dog.ceo/api/breeds/image/random
2. 在瀏覽器直接開啟https://dog.ceo/api/breeds/image/random你會看到所取得的資料型態，又稱為json(Javascript Object Notation)，這跟我們之後如何選取想要的資料有關。
3. 在JS的部分，選取按鈕並加入點擊事件 將以上的語法放入函式內
4. 修改then catch的內容(此例中我只修改then ，暫不考慮錯誤的情況)

在這個練習中，我利用DOM的操作選取到我想變更的結構，接著利用response.data去做我想要取出的資料選取，暫時我只能用最土法煉鋼的方式選擇資料，之後若有更好的辦法會在更新這支codepen! 這個練習還挺有意思的，讓JS跟外部資料做連結應該是必不可免的事情，很高興終於踏出這一步。