今天我們將延續上一篇對於API的介紹，介紹該如何整合外部API資料到我們的應用程式中。在現代軟體開發中，許多應用程式都是透過API來從外部獲取數據資料，經過處理後在呈現到網頁上。

要在JavaScript上取得API的資料基本上可以分為fetch及axios兩種方法

Fetch API

Fetch 是 JavaScript 中用於發送網路請求的現代 API，執行之後就會送出 Request，如果得到回應就會回傳帶有 Response 的 Promise 物件，使用 then 將回傳值傳遞下去。

<template>
  <h1>Fetch Example</h1>
  <div>{{ msg }}</div>
</template>

<script setup>
import { ref } from "vue";

const msg = ref(""); 

// 使用 fetch 從後端獲取資料
fetch("https://api.restful-api.dev/objects", { method: "get" })
  .then((response) => response.json()) // 解析回傳的資料為 JSON 格式
  .then((data) => {
    // 將資料顯示在 HTML 上
    msg.value = JSON.stringify(data);
  })
  .catch((error) => {
    console.error("Error:", error);
  });
</script>

首先將欲取得的API輸入至fetch()，並且在後面填寫欲使用的方法{method: 'xxx'}，在取得資料後需要先透過第一個then()將資料轉為JSON格式，轉換方法為response.json()，之後在下一個then()裡可以執行想要對於這些資料做的任何處理，若是失敗則使用catch()來進行錯誤處理，用來設定要顯示或是執行的內容。

Axios API

要使用Axios API前需要先將此套件進行安裝或引入。

安裝方式

使用npm的方式安裝:

npm install axios

Axios 是一個流行的 JavaScript函式庫，用於發送 HTTP 請求，它提供了一個簡單且強大的方式來與服務器或外部 API 進行通信。Axios 通常用於網頁應用程式和 Node.js 環境中，並且支援 Promise，使非同步操作更容易處理。

<template>
  <h1>Axios Example</h1>
  <div>{{ msg }}</div>
</template>

<script setup>
import { ref } from "vue";
import axios from "axios";

const msg = ref(""); 

// 使用 Axios 從後端獲取資料
axios
  .get("https://api.restful-api.dev/objects")
  .then((response) => {
    // 解析回傳的資料為 JSON 格式
    const data = JSON.stringify(response.data);
    // 將資料顯示在 HTML 上
    msg.value = data;
  })
  .catch((error) => {
    console.error("Error:", error);
  });
</script>

首先將欲取得的API輸入至axios()，並且設定欲使用的API方法axios.xxx()，在取得資料後可以先將資料轉為JSON格式，轉換方法為JSON.stringify(response.data)，之後即可執行想要對於這些資料做的任何處理，若是失敗則使用catch()來進行錯誤處理，用來設定要顯示或是執行的內容。

結語:

Axios 在 API 設計、錯誤處理和便利性方面提供了更多的功能，對於複雜的 AJAX 請求和大型應用程式來說，它可能更容易使用。然而，Fetch 是一個現代的 Web API，已經內置在瀏覽器中，可以在不添加額外庫的情況下使用，對於簡單的請求也很適用，選擇使用哪種工具取決於你的具體需求和偏好。