前言

最近剛接觸到axios的學習內容，所以今天想很淺很淺地聊一下怎麼使用axios來串接第三方資料。

在開始使用axios之前，先來認識一些相關內容：

API

API指應用程式對外開放的介面，API使用者主要是針對能夠寫程式的開發者，開發者們可以透過API來使用他人撰寫的應用程式，而在網路應用程式開發情境下的API被稱為Web API，例如：想要製作一個美食地圖，除了自己開發地圖系統外，最常使用的方法之一就是選擇串接Google提供的Google Map API。

Web API串接方式由製作者制定，雖然細節上會有些不太一樣的地方但方法上大致相同，通常會有相應的說明文件可以查看使用說明，只要針對說明中指定的方式發出請求(request)，API就會回應(response)對應的資訊。

Ajax

提到Ajax就要先了解一下同步請求和非同步請求的差異，當我們對伺服器端發出請求時，同步請求在等待回應的過程中不能繼續處理其他事情，需要待收到回應後才能夠繼續動作；非同步請求則在這過程中可以繼續處理其他事情，而當收到回應後即直接融合進當下頁面。

Ajax實踐了非同步請求的技術，讓我們不需要一直重新整理就能順暢且即時的瀏覽內容。最一開始Ajax是利用XMLHttpRequest物件來實作，但因為使用上較為繁瑣，隨著時間的進展慢慢就發展出許多替代方案，像是HTML5提供的Fetch API及接下來會接觸到JS函式庫中的axios。

JSON

當使用Web API在交換資料時，目前最常使用的回應格式之一即是JSON，與其他格式相比它為輕量、易讀，所以幾乎所有網頁開發相關語言都有解析JSON資料的函式庫。

由於JSON的格式參考了JS中物件的表示方式(通常會運用到Array和Object)，但其實是不同的資料格式，在使用時會需要經過解析(例如JSON.stringify())。

axios

接下來我們就來嘗試藉由axios這個非常方便好用的JS函式庫來和Web API提供的網址來進行串接吧！

在使用前，記得先要在HTML文件中載入axios工具，我們可以先在</body>前藉由CDN的方式載入(因為瀏覽器解析HTML的順序是由上而下進行，為了避免錯誤發生，假如有其他JS文件需要載入的話，記得要放置於axios的後面哦！)：

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

假設我們現在需要運用Dog API來製作一個隨機生成狗狗圖片的小專案，觀看完Dog API的文件後可以知道能經由它提供的網址來達到我們想要的目的，因此我們可以運用axios的語法來取得狗狗的圖片：

const dogImage = document.querySelector('.dog-img')

axios.get("https://dog.ceo/api/breeds/image/random")
  .then((response) => {
    dogImage.src = response.data.message;
  })
  .catch((error) => console.log(error));

我們將這段語法拆開來看

1. axios.get(URL)

   向伺服器端(藉由Web API提供的網址)發出請求

2. then(response)

   主要是用來處理成功接收到的response，而通常我們所需要的資訊會放置於response.data中，其中狗狗的照片則被存放在message裡面。

3. catch(error)

   負責處理發生錯誤時的狀況，當有錯誤發生時，藉由console.log()輸出錯誤訊息來查找問題發生在什麼地方。

如此操作下來我們就能順利從Dog API中取出隨機生成的狗狗圖片！

認識到基本語法後，可以開始嘗試串連有興趣的API來完成更多種類的專案了(好想做個自己的寶可夢圖鑑阿)！當我上禮拜開始接觸時真的會有種世界天旋地轉的感受(今天決定發這篇文我真的是抖個不停阿)，目前只敢稍微淺淺地談論一下學習到的內容，之後打算藉由增加實際操作來提升熟悉度，希望能讓自己對於學習到的知識更有把握。