xhr/fetch/axios串api

範例 API 與前置作業

1. RANDOM USER GENERATOR
2. 基本架構 :

HTML​ :

<button id="fetch-data">Fetch Data</button>
<div id="data"></div>

Javascript​ :

const fetch-data= document.querySelector("#fetch-data")

const data= document.querySelector("#data")

let apiUrl = 'https://randomuser.me/api/'

let name = ''

let img = ''

let email = ''

1. xhr

在下面的例子裡，我們首先建立了一個 XMLHttpRequest 物件，並使用 .open() 開啟一個 URL，最後使用 .send() 發出 request。

 fetchDataButton.addEventListener("click", function () {
            dataDiv.innerHTML = '<p class="loading">Loading...</p>';

            // 使用 XMLHttpRequest 發送 GET 請求到 API
            let ​xhr = new XMLHttpRequest();
            // 開啟一個請求，這裡使用 GET，true 為非同步的意思
            xhr.open("GET", apiUrl, true);
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4) {
                    if (xhr.status === 200) {
                        try {
                            const response = JSON.parse(xhr.responseText);
                            let user = response.results[0];
                            let userInfo = `
                                <h2>${user.name.title} ${user.name.first} ${user.name.last}</h2>
                                <p>Gender: ${user.gender}</p>
                                <p>Email: ${user.email}</p>
                                <p>Location: ${user.location.city}, ${user.location.country}</p>
                                <img src="${user.picture.large}" alt="User Picture">
                            `;
                            dataDiv.innerHTML = userInfo;
                        } catch (e) {
                            dataDiv.innerHTML = '<p class="error">Error parsing response.</p>';
                            console.error("Error parsing response:", e);
                        }
                    } else {
                        dataDiv.innerHTML = `<p class="error">Error fetching data. Status: ${xhr.status}</p>`;
                    }
                }
            };
            // 送出請求
            xhr.send();
        });

2. Fetch API：這是瀏覽器原生提供的一個用於數據取得的介面，基於Promise設計，需要手動調用.json轉換為JSON對象。它是Ajax的一種現代化替代方案。

Fetch API 會需要我們手動進行 JSON 解析，所以需要 response.json()，而 Axios 會直接幫我們解析 JSON。

function fetchData() {
  fetch("https://randomuser.me/api/")
    .then((response) => {
      if (!response.ok) {
        throw new Error("Network response was not ok " + response.status);
      }
      return response.json();
    })
    .then((data) => {
      document.getElementById("output").textContent = JSON.stringify(
        data,
        null,
        2
      );
    })
    .catch((error) => {
      console.error("There was a problem with the fetch operation:", error);
      document.getElementById("output").textContent = "Error: " + error.message;
    });
}

3. Axios

需要額外引入Axios 庫， Axios 可以在 Node.js 環境中使用。

Axios 預設也會自動處理所有的 HTTP 狀態，包括錯誤的狀態。如果請求成功（HTTP 狀態碼在 200 到 299 之間），則會進入 .then 回調函數；如果請求失敗（HTTP 狀態碼在 200 到 299 以外）則會進入 .catch 回調函數。

fetchDataButton.addEventListener("click", function () {
  dataDiv.innerHTML = '<p class="loading">Loading...</p>';

  // 使用 axios 發送 GET 請求到 API
  axios
    .get(apiUrl)
    .then(function (response) {
      const user = response.data.results[0];
      const userInfo = `
                        <h2>${user.name.title} ${user.name.first} ${user.name.last}</h2>
                        <p>Gender: ${user.gender}</p>
                        <p>Email: ${user.email}</p>
                        <p>Location: ${user.location.city}, ${user.location.country}</p>
                        <img src="${user.picture.large}" alt="User Picture">
                    `;
      dataDiv.innerHTML = userInfo;
    })
    .catch(function (error) {
      dataDiv.innerHTML = '<p class="error">Error fetching data.</p>';
      console.error("Error fetching data:", error);
    });
});