วิธีใช้ Fetch API ใน React

```html

ในการพัฒนาเว็บสมัยใหม่ การรวมข้อมูลจากแหล่งข้อมูลภายนอกเป็นข้อกำหนดทั่วไป React ซึ่งเป็นไลบรารี JavaScript ยอดนิยมสำหรับการสร้างส่วนต่อประสานผู้ใช้ มีวิธีง่ายๆ ในการดึงข้อมูลจาก API

ในคู่มือนี้ เราจะสำรวจกระบวนการดึงข้อมูลจาก API ใน React พร้อมตัวอย่างการใช้งาน นอกจากนี้ เราจะนำเสนอวิธีง่ายๆ ในการสร้างโค้ด Fetch Client ด้วยคลิกเดียวใน Apidog

button

API คืออะไร

API (Application Programming Interface) คือชุดของกฎและโปรโตคอลที่ช่วยให้แอปพลิเคชันซอฟต์แวร์ต่างๆ สามารถสื่อสารและโต้ตอบซึ่งกันและกันได้

ตัวอย่างเช่น เมื่อคุณใช้แอปพยากรณ์อากาศบนโทรศัพท์ของคุณ แอปนั้นน่าจะโต้ตอบกับ API ของบริการพยากรณ์อากาศเพื่อดึงข้อมูลสภาพอากาศปัจจุบันสำหรับตำแหน่งของคุณ แอปจะส่งคำขอไปยัง API ของบริการพยากรณ์อากาศตามรูปแบบเฉพาะ และ API จะตอบสนองด้วยข้อมูลสภาพอากาศที่ร้องขอ ซึ่งอำนวยความสะดวกในการรวมระบบระหว่างระบบซอฟต์แวร์ทั้งสองอย่างราบรื่น

การสร้าง API ใน React ด้วย Fetch API

Fetch API มีอินเทอร์เฟซที่ทันสมัยสำหรับการสร้าง คำขอ HTTP เช่น GET และ POST จากเบราว์เซอร์ โดยใช้ JavaScript promises ซึ่งทำให้การทำงานกับคำขอและการตอบสนองง่ายขึ้น ในการสร้างคำขอ คุณเพียงแค่เรียกเมธอด fetch() ส่ง URL ที่จะดึงข้อมูลจากนั้นจัดการการตอบสนองเมื่อมีการแก้ไข ซึ่งง่ายกว่าการทำงานโดยตรงกับ XMLHttp Requests มาก

เมื่อใช้ Fetch กับ React คุณสามารถสร้างคำขอในเมธอดวงจรชีวิตของคอมโพเนนต์ เช่น useEffect และอัปเดตสถานะของคอมโพเนนต์เมื่อได้รับข้อมูล ซึ่งช่วยให้คุณดึงข้อมูลจาก API และแสดงผลใน UI ของคุณได้

Fetch API ผสานรวมกับ React ได้อย่างดีเนื่องจากทั้งคู่ใช้ promises คุณสามารถจัดการสถานะการโหลดและข้อผิดพลาดเพื่อให้ผู้ใช้ได้รับประสบการณ์ที่ราบรื่น โดยรวมแล้ว Fetch รวมกับ React เป็นชุดค่าผสมที่มีประสิทธิภาพมากสำหรับการสร้างแอปพลิเคชันหน้าเดียวที่ขับเคลื่อนด้วยข้อมูล

วิธีใช้ Fetch APIs ใน React พร้อมตัวอย่างโดยละเอียด

สำหรับผู้ที่คุ้นเคยกับไลบรารี JavaScript นี่คืออีกวิธีหนึ่งในการใช้ Fetch API ใน React

สร้าง React App

การตั้งค่าโปรเจกต์ React เกี่ยวข้องกับชุดของขั้นตอน นี่คือคำแนะนำพื้นฐานเพื่อช่วยให้คุณเริ่มต้น:

1.ติดตั้ง Node.js และ npm: ดาวน์โหลดและติดตั้ง Node.js และ npm จาก https://nodejs.org/

2. สร้าง React App: เปิดเทอร์มินัลของคุณและเรียกใช้ npx create-react-app my-react-app แทนที่ "my-react-app" ด้วยชื่อโปรเจกต์ที่คุณต้องการ

3. เริ่ม Development Server:

ย้ายเข้าไปในโฟลเดอร์โปรเจกต์ของคุณด้วย cd my-react-app
เปิด Development Server ด้วย npm start
React app ของคุณจะเปิดที่ http://localhost:3000/ ในเบราว์เซอร์

แค่นั้น! คุณได้สร้าง React app สำเร็จแล้วในสามขั้นตอนง่ายๆ ตอนนี้คุณสามารถเจาะลึกโค้ดของคุณ ทำการปรับเปลี่ยน และดูการเปลี่ยนแปลงแบบเรียลไทม์ขณะที่คุณพัฒนาแอปพลิเคชันของคุณ

ใช้ Fetch API ใน React

การใช้ Fetch API ใน React เกี่ยวข้องกับการสร้างคำขอ HTTP ไปยังทรัพยากรภายนอกหรือ API นี่คือคำแนะนำง่ายๆ เกี่ยวกับวิธีใช้ Fetch API ในคอมโพเนนต์ React:

ขั้นตอนที่ 1: นำเข้า React และ useState Hook

import React, { useState, useEffect } from 'react';

ขั้นตอนที่ 2: สร้าง Functional Component

function MyComponent() {
  // State to store fetched data
  const [data, setData] = useState(null);

  // Effect to fetch data when the component mounts
  useEffect(() => {
    fetchData();
  }, []); // Empty dependency array ensures the effect runs once on mount

  // Function to fetch data
  const fetchData = async () => {
    try {
      // Make a GET request using the Fetch API
      const response = await fetch('https://api.example.com/data');
      
      // Check if the response is successful (status code 200-299)
      if (!response.ok) {
        throw new Error('Network response was not ok');
      }

      // Parse the JSON data from the response
      const result = await response.json();

      // Update the state with the fetched data
      setData(result);
    } catch (error) {
      console.error('Error fetching data:', error.message);
    }
  };

  // Render the component
  return (
    <div>
      {data ? (
        // Display the fetched data
        <p>{JSON.stringify(data)}</p>
      ) : (
        // Display a loading message or other UI while data is being fetched
        <p>Loading...</p>
      )}
    </div>
  );
}

export default MyComponent;

ขั้นตอนที่ 3: ใช้ Component

import React from 'react';
import MyComponent from './MyComponent';

function App() {
  return (
    <div>
      <h1>React Fetch Example</h1>
      <MyComponent />
    </div>
  );
}

export default App;

ในตัวอย่างนี้:

เราใช้ฟังก์ชัน fetch เพื่อสร้างคำขอ GET ไปยังปลายทาง API สมมติ (https://api.example.com/data)
เราจัดการการตอบสนอง ตรวจสอบว่าสำเร็จหรือไม่ และแยกวิเคราะห์ข้อมูล JSON
ข้อมูลที่ดึงมาจะถูกเก็บไว้ในสถานะของคอมโพเนนต์โดยใช้ฟังก์ชัน setData
คอมโพเนนต์จะแสดงข้อมูลที่ดึงมาหรือข้อความการโหลด ขึ้นอยู่กับสถานะ

การสร้างโค้ดไคลเอนต์ด้วยคลิกเดียวด้วย Apidog

การผสานรวมกับบริการแบ็กเอนด์อย่างราบรื่นเป็นรากฐานสำคัญของการพัฒนาฟรอนต์เอนด์ ซึ่งมักจะทำได้ผ่าน fetch API อินเทอร์เฟซนี้อำนวยความสะดวกในการสร้างคำขอ HTTP โดยตรงจากเบราว์เซอร์ ทำให้แอปพลิเคชัน React มีความสามารถในการดึงข้อมูลจากแบ็กเอนด์หรือ API ภายนอกได้อย่างมีประสิทธิภาพ

สำหรับนักพัฒนาที่อาจพบว่าการเขียนโค้ดคำขอ API โดยละเอียดภายใน React นั้นน่ากลัว เครื่องมือสร้างโค้ดไคลเอนต์ด้วยคลิกเดียว เช่น Apidog นำเสนอตัวช่วยประหยัดเวลาที่มีค่า นี่คือ API ร้านขายสัตว์เลี้ยง POST เป็นตัวอย่าง

คลิกที่ไอคอนเพื่อสร้างโค้ดไคลเอนต์ดังนี้:

นี่คือผลลัพธ์ Fetch Data

Apidog ทำให้กระบวนการนี้ง่ายขึ้นโดยการแปลงข้อมูลจำเพาะ API ของแบ็กเอนด์ให้เป็นโค้ดพร้อมใช้งานสำหรับฝั่งไคลเอนต์ ซึ่งตรงกับโครงสร้างข้อมูลและปลายทางที่ต้องการอย่างแม่นยำ และหลีกเลี่ยงความซับซ้อนและข้อผิดพลาดที่เกี่ยวข้องกับการเขียนโค้ดด้วยตนเอง

รวมโค้ดไคลเอนต์ที่สร้างขึ้นใน React App

โค้ดไคลเอนต์ที่สร้างขึ้นสามารถรวมเข้ากับแอปพลิเคชัน React ได้โดยทำตามขั้นตอนทั่วไปเหล่านี้:

นำเข้าไฟล์ที่สร้างขึ้นใน React App: คัดลอกไฟล์ที่สร้างขึ้น (หรือทั้งโฟลเดอร์) ลงในโปรเจกต์ React ของคุณ ตรวจสอบให้แน่ใจว่าไฟล์เหล่านี้เข้ากันได้กับโครงสร้างโปรเจกต์ของคุณ

2. นำเข้าและใช้ฟังก์ชันคำขอ API ที่สร้างขึ้น: ในคอมโพเนนต์ React ของคุณหรือตำแหน่งที่เหมาะสมอื่นๆ ให้นำเข้าฟังก์ชันคำขอ API ที่สร้างขึ้นและใช้งาน ตัวอย่างเช่น:

import { createPet, getPetById } from './path/to/generated/api';

// Use in a component or elsewhere
async function fetchData() {
  try {
    const newPet = await createPet({ name: 'Fido', age: 2 });
    const petDetails = await getPetById(newPet.id);
    console.log(petDetails);
  } catch (error) {
    console.error('Error fetching data:', error.message);
  }
}

3. จัดการข้อมูล: ประมวลผลข้อมูลที่ส่งคืนจากคำขอ API อาจอัปเดตสถานะของคอมโพเนนต์ แสดงผล UI ฯลฯ

เคล็ดลับโบนัสของ Apidog:

ข้อดีของการใช้ประโยชน์จาก Apidog ขยายไปถึงคุณสมบัติการจำลอง ซึ่งช่วยให้นักพัฒนาสามารถเลียนแบบการตอบสนองของแบ็กเอนด์ ซึ่งเป็นความสามารถที่สำคัญในช่วงเริ่มต้นของการพัฒนาหรือเมื่อ API ของแบ็กเอนด์ยังไม่พร้อมใช้งาน

ข้อมูลจำลองนี้ช่วยให้การพัฒนาฟรอนต์เอนด์ยังคงเป็นไปตามกำหนดการ ทำให้สามารถทำงานบนส่วนต่อประสานผู้ใช้ ประสบการณ์ผู้ใช้ และตรรกะของแอปพลิเคชันโดยรวมได้โดยไม่ต้องพึ่งพาความพร้อมของแบ็กเอนด์

button

```