電商 API，不禁讓我回想起過去和程世社季子一起逛網拍的日子。那時我們一起挑選商品、比較價格、討論風格，每次購物都是我們之間的小小冒險。記得有次，我們還一起搶到了一件限量商品，那種等待確認的緊張感，和現在用 useAsyncState 等待 API 回應的感覺一模一樣。只不過，這次是我一個人在等待。

前情提要

本篇將會以 PM 的需求出發，實作一個電商的商品列表， 為了把重點放在 useAsyncState 上，電商的 api 將會採用 Fake Store API 所提供的 api 作為範例，好啦那我們開始吧~

專案需求

做一個跟商品有關的頁面，這個頁面會顯示很多不同的商品。使用者可以在上面看到一些商品的資訊，像是它的名字啊、價格啊，還有圖片什麼的。然後呢，這個頁面應該要讓使用者感覺很好用，東西要能夠很快就看得到，不要有那種等很久的感覺。商品的數量可能會很多，所以你們要想想怎麼讓它運作起來流暢一點，別讓使用者等太久。

而且商品的資料可能會隨時有變動，有的時候會增加一些新的商品，或是有些商品會變化，我們希望這些東西能夠很自然地在頁面上顯示出來，讓使用者不用重整頁面也可以看到最新的商品。嗯…資料載入的時候呢，頁面不要空空的，讓使用者知道它還在跑，不然可能會覺得怪怪的。

總之，這個頁面就是要好用、快速、資料變動的時候不要讓使用者有明顯的感覺，該顯示的內容都要顯示。技術的部分你們應該都懂啦。

嗯.…不愧是 PM 這需求真不是一般的模糊

什麼是 Fake Store

fakestoreapi 官網

Fake Store 是一個免費的線上 REST API，主要用來提供模擬的電商或購物網站資料，無需額外撰寫伺服器端的程式碼。這個 API 非常適合用來當教學的範例、測試以及開發電商網站時所需的假資料。Fake Store API 提供了一些「接近真實」的商品、購物車、使用者資料等資源，讓開發者能夠輕鬆地構建和測試原型系統，而不需要自己撰寫後端程式碼或手動建立 JSON 檔案。

主要資源：

1. Products（商品）：提供各種模擬商品的資料，包括名稱、價格、描述、分類、評分等。
2. Carts（購物車）：模擬購物車的資料，用於展示使用者的購買行為。
3. Users（用戶）：用來模擬不同使用者的資料，適合用於測試認證、使用者管理功能。
4. Login Token（登入憑證）：提供登入認證功能，讓開發者可以模擬使用者登入過程。

Fake Store API 的靈感來自於開發者在設計購物網站原型時，找不到免費且有「接近真實」的假資料，於是他們用 Node.js 和 MongoDB 建立了這個服務，讓其他開發者可以輕鬆取得這些模擬資料。

透過簡單的 API 請求（例如 fetch API、Axios 或 jQuery ajax），就能夠取得這些模擬的電商資料，用於前端開發或測試，節省開發者準備假資料的時間。

動手時間

從 Fake Store API 中取得商品資料，並包含不同的查詢方式來篩選或排序資料。

fetch('https://fakestoreapi.com/products')

這段程式碼發送一個 GET 請求到 Fake Store API 的 /products 端點，從而取得所有商品的完整列表。資料會以 JSON 格式返回，並顯示在 console.log() 中。每個商品的資料結構包括以下欄位：

• id: 商品的唯一識別碼
• title: 商品名稱
• price: 商品價格
• description: 商品描述
• category: 商品分類
• image: 商品圖片的 URL
• rating: 評分資訊，包含兩個子欄位
  • rate: 平均評分
  • count: 評分次數

例如：

{
  "id": 1,
  "title": "Fjallraven - Foldsack No. 1 Backpack, Fits 15 Laptops",
  "price": 109.95,
  "description": "Your perfect pack for everyday use and walks in the forest.",
  "category": "men's clothing",
  "image": "<https://fakestoreapi.com/img/81fPKd-2AYL._AC_SL1500_.jpg>",
  "rating": {
    "rate": 3.9,
    "count": 120
  }
}

fetch('https://fakestoreapi.com/products?limit=5')

這段程式碼增加了 ?limit=5 的查詢參數，這表示我們希望 API 只返回最多 5 筆商品資料，而不是完整的商品列表。這樣可以在需要展示部分商品時提高效能。

例如，返回的資料會只包含前五筆商品：

[
  {
    "id": 1,
    "title": "Fjallraven - Foldsack No. 1 Backpack, Fits 15 Laptops",
    "price": 109.95,
    "description": "Your perfect pack for everyday use and walks in the forest.",
    "category": "men's clothing",
    "image": "<https://fakestoreapi.com/img/81fPKd-2AYL._AC_SL1500_.jpg>",
    "rating": {
      "rate": 3.9,
      "count": 120
    }
  },
  {
    "id": 2,
    "title": "Mens Casual Premium Slim Fit T-Shirts",
    "price": 22.3,
    "description": "Slim-fitting style, contrast raglan long sleeve, three-button henley placket.",
    "category": "men's clothing",
    "image": "<https://fakestoreapi.com/img/71-3HjGNDUL._AC_SY879._SX._UX._SY._UY_.jpg>",
    "rating": {
      "rate": 4.1,
      "count": 259
    }
  },
  // ... 另外三筆商品資料
]

fetch('https://fakestoreapi.com/products?sort=desc')

這段程式碼增加了 ?sort=desc 的查詢參數，這會將商品按降序排列，可能是根據商品的 ID 或者其他默認的排序規則。這樣的功能適合當你想要顯示最新或價格最高的商品時。

返回的資料將按降序排列，例如：

[
  {
    "id": 20,
    "title": "DANVOUY Womens T Shirt Casual Cotton Short",
    "price": 12.99,
    "description": "95%Cotton,5%Spandex. The fabric is soft and has some stretch.",
    "category": "women's clothing",
    "image": "<https://fakestoreapi.com/img/61pHAEJ4NML._AC_UX679_.jpg>",
    "rating": {
      "rate": 3.6,
      "count": 145
    }
  },
  {
    "id": 19,
    "title": "Opna Women's Short Sleeve Moisture",
    "price": 7.95,
    "description": "100% Polyester, Machine wash",
    "category": "women's clothing",
    "image": "<https://fakestoreapi.com/img/51eg55uWmdL._AC_UX679_.jpg>",
    "rating": {
      "rate": 4.5,
      "count": 146
    }
  },
  // ... 其他商品，按降序排列
]

整理一下

查詢型別

如果我們想從 https://fakestoreapi.com/products 中進行查詢，可能的查詢參數包括：

• limit：限制返回的產品數量。
• sort：按升序或降序排序商品。

interface ProductQuery {
  limit?: number;
  sort?: 'asc' | 'desc';
}

這個 ProductQuery interface 可以用來定義發送 API 請求時，所需的查詢參數。

返回結果的型別

根據 Fake Store API 的返回結構，我們可以定義以下 TypeScript interface：

interface Product {
  id: number;
  title: string; //商品名稱
  price: number; //商品價格
  description: string; //商品描述
  category: string; //商品分類
  image: string; //商品圖片的 URL
  rating: {
	  rate: number; //平均評分
	  count: number; //評分次數
	};
}

// Array of products as return type
type ProductList = Product[];

使用範例

線上玩範例

這段 TypeScript 程式碼展示如何發送請求並使用定義好的 interface 來處理返回的商品資料：

// Fetch all products
async function fetchProducts(query?: ProductQuery): Promise<ProductList> {
  const queryString = query
    ? `?${new URLSearchParams(query as any).toString()}`
    : '';
  const response = await fetch(`https://fakestoreapi.com/products${queryString}`);
  const data: ProductList = await response.json();
  return data;
}

// Example usage
fetchProducts({ limit: 5, sort: 'desc' }).then(products => {
  console.log(products);
});

總結

ok 有這些前置知識就可以了~ 明天把 useAsyncState 導入，做一個商品列表，先來根據 PM 的模糊需求來通靈整理一下明天可能可以做的

明天的計劃：

1. 導入 useAsyncState：
   我們將使用 useAsyncState 來管理從 Fake Store API 取得商品資料的非同步請求。讓我們在資料載入中、成功取得資料、或是發生錯誤時，能夠做出相應的 UI 顯示變化。例如，當資料正在載入時，我們可能會顯示一個 loading 狀態；當資料載入成功時，我們會顯示商品列表；而當載入失敗時，我們則會提示使用者發生了錯誤。
2. 構建商品列表的 UI：
   我們將基於從 Fake Store API 中獲得的商品資料，來構建一個商品列表。這個列表會顯示每個商品的圖片、名稱、價格、描述等基本資訊，並確保頁面能夠隨著資料載入而動態更新。
3. 狀態管理與用戶體驗的提升：
   使用 useAsyncState 可以讓我們更加靈活地管理不同狀態下的 UI，比如：
   • 當商品資料尚未載入時，我們會顯示一個占位符或是 loading 圖示，避免空白畫面。
   • 載入過程中，可以確保頁面流暢性，並且讓使用者知道正在載入。

今天就先到這邊~如果有任何錯誤再麻煩留言讓我知道喔~ 又或是想看看什麼主題也可以許願看看