今天來簡單介紹一下如何呼叫(Call) API
以 Vue-cli 環境 結合 axios 套件為例

再開始 Coding 之前大略說明一下 HTTP 協定

HTTP 通訊協定

超文本傳輸協定（英語：HyperText Transfer Protocol，縮寫：HTTP）是一種用於分佈式、協作式和超媒體訊息系統的應用層協定。 HTTP是全球資訊網的數據通信的基礎。

Ref: Wiki維基百科

它主要是應用在 Web 與 Server 之間的資料傳遞、通訊。
並提供 HTTP 狀態碼 (HTTP Status Code) 來讓我們知道目前資料傳遞的請求 / 回應的狀態，而所有狀態碼的第一個數字代表了回應的五種狀態之一。

HTTP 狀態碼的 5 種狀態：

1. 1xx → 訊息
2. 2xx → 成功
3. 3xx → 重新導向
4. 4xx → 客戶端錯誤
5. 5xx → 伺服器錯誤

呼叫 API

這邊直接切到 axios 呼叫 API 的程式碼架構
關於 Vue-cli & axios 的安裝方式，不在這次的討論當中唷～

呼叫 API 的文字流程：

來人啊～上 Code

axios({
  method: 'get',
  baseURL: 'http://api.xxxx.com',
  url: '/users',
  headers: { 'Content-Type': 'application/json' }
}).then((result) => { 
    console.log(result.data)
}).catch((err) => {
    console.error(err)
})

• method Get 取 API
• baseURL API 主網域 (前面固定的網址部分)
• url Call API 此頁的路徑
• result 伺服器回傳類似 reponseObject，而其中 data 才是我們頁面上要的資料
• err 回傳失敗的錯誤訊息

Reference Data

• API是什麼？認識 Web API、HTTP 和 JSON 資料交換格式

今天就到這邊，謝謝大家觀看
有任何問題或是有誤寫的地方，也請各位捧油不吝指正唷～