串接 API 的方式有很多種，你可以使用任何喜歡的 Ajax 函式庫來串接，如 Axios、ky 等等…，這邊將會以 JavaScript 原生方法 Fetch 來串接遠端資料，最後會將資料渲染在畫面上

認識 Fetch API

Fetch 為 ES6 取得遠端資料的原生方法，並以 Promise 物件來作回應，Promise 物件生成後，可以用 Promise 的原型方法來執行取得的結果，一開始會先得到一個 ReadableStream 物件，需透過 json() 轉成可用的資訊，之後就可以取得資料囉！

Fetch API 使用方法

Fetch 基本用法

fetch( requestUrl, {method: "GET"}) // 設定使用 GET

// res 為 ReadableStream 的物件，透過 json() 轉成可用的資訊
.then(res => res.json())

.then(data => {
 // 接到 request data後要做的事情
})
.catch(e => {
 // 發生錯誤
})

Promise 物件

.then() 綁定當 fulfilled 或 rejected 狀態時，分別要執行的函數

.catch() 綁定當 rejected 狀態時，要執行的函數

Fetch 帶入 headers、body

fetch(requestUrl, {
  method: 'POST',
  // headers 加入 json 格式
  headers: {
    'Content-Type': 'application/json'
  },
  // body 將 json 轉字串送出
  body: JSON.stringify(data)
})

.then((response) => {
  return response.json();
})

.then(data => {
  console.log(data);
})

.catch((err) => {
  console.log('錯誤:', err);
})

body 所送出的資料必須先轉純字串後才能送出

範例

import { useEffect, useState } from "react";

export default function App() {
  const [state, setState] = useState({});

  const fetchData = () => {
    fetch("https://randomuser.me/api/", { method: "GET" })

      .then((response) => response.json())

      .then((data) => {
        setState(data["results"][0]);
      })

      .catch((err) => {
        console.log(err);
      });
  };

  useEffect(() => {
    fetchData();
  }, []);

  return (
    <div className="App">
      <h1>React 熱炒店會員資料</h1>

      <div>
        <img src={state.picture?.large} alt="" />
        姓名：{state.name?.first} <br />
        性別：{state.gender} <br />
        E-mail：{state.email} <br />
      </div>
    </div>
  );
}

我們利用 https://randomuser.me/api/ 隨機產生出會員資料

利用 fetch 做串接
取得 data 後，儲存到 state
渲染畫面

會員資料就顯示出來啦~~~~

結語

利用簡單的 fetch API 串接，將資料渲染到畫面，就可以完成很多事啦！我自己也很習慣用 Axios 做串接 API，大家有興趣也可以去研究看看唷！!

Reference

ReactJS 入門－使用 fetchAPI 送出 HTTP 請求
 ES6 原生 Fetch 遠端資料方法

本文為 IT 鐵人賽系列文你 React 了嗎? 30 天解鎖 React 技能

Hey！想學習更多前端知識嗎?

最近 Lala 開了前端課程 👉【實地掌握RWD - 12小時新手實戰班】👈
無論您是 0 基礎新手，又或是想學 RWD 的初學者，
我們將帶你從零開始，深入了解並掌握 RWD 響應式網頁設計的核心技術，快來一起看看吧 😊

🚀線上課程分享

線上課程可以加速學習的時間，省去了不少看文件的時間XD，以下是我推薦的一些課程
想學習更多關於前後端的線上課程，可以參考看看。

Lala Code

【DAY 25】串接 API，透過 Fetch 將遠端資料渲染在畫面