axios打API手不痠

axios 官網

一個前端工程師的日常就是打不完的 API，接不完的資料。而串接 API 最常使用的函式庫莫過於 axios，但是雖然每天都在用，卻常常覺得用的只是皮毛，始終都沒有好好地去研究與了解 axios，這篇筆記就讓我好好來記錄一下 axios 的使用觀念與方法。

axios 官網開宗明義就寫到 axios 是基於 promise 的 HTTP 用戶端工具，供瀏覽器與 node.js使用。

所以它的特點是：

• 一致的 Java Script promise 撰寫風格。
• 解決 API 串接的非同步問題。
• 鍊式寫法，易閱讀，好維護。

CDN 引入

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

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

npm 引入

$ npm install axios

在使用 axios 前必須有的觀念

甚麼是 API，想像一下你去投自動販賣機的飲料，投錢之後，按下按鈕，自動販賣機就吐出你買的飲料，投下的零錢就是取得驗證的身分，那顆選擇按鈕就是 API，自動販賣機吐出來的飲料就是打 API 後得到的資料。

對於使用者來說，不用去管自動販賣機裡面怎麼運作，只要投錢，按下選擇的按鈕就可以取得想要的飲料。

而對前端工程師而言，也不用去管後端跟資料庫怎麼運作，只要使用對的方法，對應正確的路徑，發出請求(request)就可以界接 Web API。取得想要的資料。

上面有提到 對的方法 跟 正確的路徑，在這裡解釋一下幾種常用的界接API的方法，分別對應 CRUD 的Create 新增、Read 讀取、Update 更新、Delete 刪除：

• get/取得
• post/新增
• put/編輯更新
• delete/刪除

實務上界接 API 並非只有以上 4 種方法。

所以基本的 axios 寫法會是這樣：

// axios.方法('路徑')
axios.get('https://randomuser.me/api/')

再加上前面提到的 promise 鍊式寫法，console.log 就可以看到回應(response)的結果：

axios.get(`https://randomuser.me/api/`).then((res) => {
  console.log("第一次打API", res);
  const { seed } = res.data.info;
  console.log("seed", seed);
});

如果要依序打多個 API 可以在 .then 裡面 return 下一個 axios，然後再用另一個 .then 串接：

axios
  .get(`https://randomuser.me/api/`)
  .then((res) => {
    console.log("第一次打API", res);
    const { seed } = res.data.info;
    console.log("seed", seed);
    return axios.get(`https://randomuser.me/api/?seed=${seed}`);
  })
  .then((res) => {
    const { seed } = res.data.info;
    console.log("第二次打API", res);
    return axios.get(`https://randomuser.me/api/?seed=${seed}`);
  })
  .then((res) => {
    const { seed } = res.data.info;
    console.log("第三次打API", res);   
  });

搭配 async await 使用

也可以搭配 promise 的語法糖 async await 來使用，語法會更簡潔。

const getData = async () => {
  const response = await axios.get(`https://randomuser.me/api/`);
  const response2 = await axios.get(`https://randomuser.me/api/`);
  console.log("1", response);
  console.log("2", response2);
  console.log("hi");
};

getData();

如果要做非同步的錯誤處理就要搭配 try catch 來使用

const getData = async () => {
  try {
    const response = await axios.get(`https://randomuser.me/api/`);
    console.log("1", response);
  } catch (error) {
    console.log(error);
  }
  try {
    const response = await axios.get(`https://randomuser.me/api/`);
    console.log("2", response);
  } catch (error) {
    console.log(error);
  }

  console.log("hi");
};

getData();

參考資料

• https://rapidapi.com/guides/axios-async-await