概要

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

---

名詞解釋

1、Postman

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

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

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

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

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

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

6. 分享和協(xié)作：Postman允許用戶將他們創(chuàng)建的請求和集合分享給團隊成員或其他用戶，實現(xiàn)協(xié)作開發(fā)和知識共享。

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

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

2、axios

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

Axios的特點和功能包括：

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

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

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

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

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

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

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

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

使用Postman測試API

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

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

可以看到請求返回了獲得的一些數(shù)據(jù)，我們確保我們能夠成功地獲取到數(shù)據(jù)，并且理解API返回的數(shù)據(jù)結(jié)構(gòu)，以便在React中處理數(shù)據(jù)

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

在React中獲取并展示數(shù)據(jù)

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

npx create-react-app react-postman

我們將創(chuàng)建一個React組件，名為productsList，來展示我們獲取到的雞尾酒數(shù)據(jù)，在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; // 每頁顯示的數(shù)據(jù)量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);};// 計算當前頁的數(shù)據(jù)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獲取數(shù)據(jù)、搜索、分頁等功能，并且使用了Ant Design的Table和Pagination組件來美化數(shù)據(jù)展示和分頁。

在這個組件中，useEffect鉤子用于在組件加載時獲取數(shù)據(jù)，useState用于管理組件狀態(tài)，axios用于發(fā)送HTTP請求，而Table和Pagination組件用于展示數(shù)據(jù)和分頁。

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

---

小結(jié)

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