概要

在Web開發中，通過API獲取數據是一項常見任務。Postman是一個功能強大的工具，可以幫助開發者測試API，并查看API的響應數據。在本篇博客中，我們將探討如何通過Postman測試API，并將測試代碼移植到React項目中，以axios獲取數據并在前端頁面中展示。

---

名詞解釋

1、Postman

Postman是一個功能強大的API開發工具，被廣泛用于各種開發場景，包括Web開發、移動應用開發和后端服務開發等。它的主要特點和功能包括：

1. 可視化界面：Postman提供了直觀的用戶界面，使用戶能夠輕松地創建、編輯和管理API請求和響應。

2. 支持多種HTTP請求：Postman支持常見的HTTP請求方法，如GET、POST、PUT、DELETE等，以及其他高級功能，如文件上傳、Cookie管理等。

3. 環境變量和全局變量：用戶可以在Postman中定義環境變量和全局變量，以便在不同的環境中使用相同的請求，從而簡化了測試和開發過程。

4. 測試腳本：Postman允許用戶編寫測試腳本，用于驗證API的響應是否符合預期，并進行自動化測試。

5. 集合和集合運行：用戶可以將多個相關的請求組織成集合，并使用集合運行功能執行這些請求，以便進行批量測試和自動化任務。

6. 分享和協作：Postman允許用戶將他們創建的請求和集合分享給團隊成員或其他用戶，實現協作開發和知識共享。

7. 實時協作：Postman還提供了實時協作功能，允許團隊成員同時編輯和共享請求和集合，從而更加高效地進行協作開發和測試。

總的來說，Postman為開發人員提供了一個集成的平臺，幫助他們簡化和加速API開發和測試過程，提高了開發效率和代碼質量。

2、axios

Axios是一個流行的基于Promise的HTTP客戶端，用于瀏覽器和Node.js環境。它可以在客戶端和服務器端之間進行數據傳輸，并提供了許多強大的功能，使得發送HTTP請求變得更加簡單和靈活。

Axios的特點和功能包括：

1. 簡單易用：Axios提供了簡潔的API，使得發送HTTP請求變得非常簡單，同時支持Promise API，方便處理異步操作。

2. 支持Promise：Axios基于Promise實現，使得處理HTTP請求和響應變得更加靈活和可控，支持鏈式調用和異步操作。

3. 支持瀏覽器和Node.js：Axios可以在瀏覽器和Node.js環境中使用，使得在不同的應用場景下都能方便地發送HTTP請求。

4. 支持取消請求：Axios允許取消未完成的HTTP請求，防止不必要的請求發送或資源浪費。

5. 攔截器：Axios提供了攔截器功能，允許在請求發送和響應接收的過程中插入自定義的邏輯，例如在請求發送前添加認證信息或在響應接收后處理返回的數據。

6. 客戶端和服務器端的CSRF保護：Axios提供了內置的CSRF保護功能，可以幫助防止跨站請求偽造攻擊。

7. 錯誤處理：Axios提供了豐富的錯誤處理機制，能夠捕獲和處理請求過程中可能出現的各種錯誤，提高了應用程序的健壯性和可靠性。

總的來說，Axios是一個功能強大、易用且靈活的HTTP客戶端，廣泛應用于前端開發和后端開發中，幫助開發人員更加輕松地與服務器進行數據交互。

使用Postman測試API

首先，我們使用Postman來測試TheCocktailDB API。我們想要獲取以字母A開頭的雞尾酒數據。在Postman中，我們發送一個GET請求到以下URL：

https://www.thecocktaildb.com/api/json/v1/1/search.php?f=a

可以看到請求返回了獲得的一些數據，我們確保我們能夠成功地獲取到數據，并且理解API返回的數據結構，以便在React中處理數據

點擊右邊的code<>，選擇NodeJs-Axios，可以看到含有axios的nodejs代碼

在React中獲取并展示數據

接下來，我們將使用axios庫在React中獲取數據，并使用Ant Design組件庫美化數據展示。第一步先創建一個react應用，創建方法可以參考之前的文章🚪，輸入以下代碼創建一個名字為react-postman的react應用

npx create-react-app react-postman

我們將創建一個React組件，名為productsList，來展示我們獲取到的雞尾酒數據，在app.js引用這個組件

productsList.js

import React, { useState, useEffect } from "react";
import axios from "axios";
import { Table, Pagination, Input } from "antd";
import "../node_modules/antd/dist/reset.css"; // 導入 Ant Design 樣式表const ProductsData = () => {const [userData, setUserData] = useState(null);const [filteredData, setFilteredData] = useState(null);const [searchText, setSearchText] = useState("");const [currentPage, setCurrentPage] = useState(1);const pageSize = 10; // 每頁顯示的數據量useEffect(() => {const fetchData = async () => {try {const response = await axios.get("https://www.thecocktaildb.com/api/json/v1/1/search.php?f=a");setUserData(response.data.drinks);setFilteredData(response.data.drinks);} catch (error) {console.log(error);}};fetchData();}, []);// 處理搜索功能const handleSearch = (value) => {setSearchText(value);if (value === "") {setFilteredData(userData);} else {const filtered = userData.filter((item) =>item.strDrink.toLowerCase().includes(value.toLowerCase()) ||item.strCategory.toLowerCase().includes(value.toLowerCase()));setFilteredData(filtered);}setCurrentPage(1); // 重置為第一頁};// 處理頁碼改變事件const handlePageChange = (page) => {setCurrentPage(page);};// 計算當前頁的數據const currentPageData = filteredData && Array.isArray(filteredData)? filteredData.slice((currentPage - 1) * pageSize, currentPage * pageSize): [];const columns = [{title: "飲品編號",dataIndex: "idDrink",key: "idDrink",},{title: "飲品名稱",dataIndex: "strDrink",key: "strDrink",},{title: "種類",dataIndex: "strCategory",key: "strCategory",},{title: "是否有酒精",dataIndex: "strAlcoholic",key: "strAlcoholic",},{title: "圖片",dataIndex: "strDrinkThumb",key: "strDrinkThumb",render: (url) => <img src={url} style={{ width: 100 }} alt="drink" />, // 自定義列渲染},// Add more columns for other product data if needed];return (<div><h2 style={{ textAlign: "center" }}>Drinks Data</h2><Input.Searchplaceholder="Search Drink Name or category..."value={searchText}onChange={(e) => handleSearch(e.target.value)}style={{ marginBottom: 16 }}/><TabledataSource={currentPageData}columns={columns}loading={!userData}pagination={false}/><Paginationcurrent={currentPage}pageSize={pageSize}total={filteredData ? filteredData.length : 0}onChange={handlePageChange}style={{ marginTop: 16, textAlign: "center" }}/></div>);
};export default ProductsData;

這個組件包括了從API獲取數據、搜索、分頁等功能，并且使用了Ant Design的Table和Pagination組件來美化數據展示和分頁。

在這個組件中，useEffect鉤子用于在組件加載時獲取數據，useState用于管理組件狀態，axios用于發送HTTP請求，而Table和Pagination組件用于展示數據和分頁。

實現了搜索功能，用戶可以通過輸入飲品名稱或種類來過濾數據，還有分頁功能，讓用戶可以瀏覽數據的不同頁面

---

小結

通過使用Postman測試API并在React中獲取數據，我們能夠輕松地集成外部數據到我們的應用程序中。同時，通過使用Ant Design組件庫，我們可以快速地美化數據展示，提高用戶體驗。這使得我們能夠構建更加動態和交互性的應用程序，更好地與外部API進行通信。如果有任何疑問，歡迎留言討論🌹