การดึงข้อมูลจาก API ด้วย Fetch

การดึงข้อมูลจาก API ด้วย Fetch

จากบทความที่แล้ว เราได้ทำความรู้จักกับ REST API, Fetch API และ Axios กันไปแล้ว ในบทความนี้ เราจะมาลงมือปฏิบัติจริงในการดึงข้อมูลจาก API โดยใช้ Fetch API ซึ่งเป็นเครื่องมือพื้นฐานที่มีมาให้ใน React Native อยู่แล้ว ทำให้เราไม่ต้องติดตั้ง Library เพิ่มเติม

การใช้ GET method

GET method เป็นวิธีที่ใช้กันบ่อยที่สุดในการดึงข้อมูลจาก API โดยเป็นการขอข้อมูลจาก Server โดยไม่มีการแก้ไขหรือเปลี่ยนแปลงข้อมูลใดๆ บน Server ตัวอย่างเช่น การดึงข้อมูลรายการสินค้า, ข้อมูลผู้ใช้งาน หรือข้อมูลสภาพอากาศ

ตัวอย่างโค้ด:

import React, { useState, useEffect } from 'react';
import { View, Text, FlatList, StyleSheet } from 'react-native';

const API_URL = 'https://jsonplaceholder.typicode.com/todos'; // URL ของ API ที่เราจะดึงข้อมูล

const App = () => {
  const [todos, setTodos] = useState([]); // State สำหรับเก็บข้อมูล todos

  useEffect(() => {
    fetchTodos(); // เรียกฟังก์ชัน fetchTodos เมื่อ Component ถูก Mount
  }, []);

  const fetchTodos = async () => {
    try {
      const response = await fetch(API_URL); // ส่ง Request ไปยัง API
      const json = await response.json(); // แปลง Response เป็น JSON
      setTodos(json); // อัปเดต State ด้วยข้อมูลที่ได้
    } catch (error) {
      console.error('Error fetching todos:', error); // แสดง Error หากเกิดข้อผิดพลาด
    }
  };

  const renderItem = ({ item }) => (
    <View style={styles.item}>
      <Text>{item.title}</Text>
      <Text>Completed: {item.completed ? 'Yes' : 'No'}</Text>
    </View>
  );

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Todos List</Text>
      <FlatList
        data={todos}
        renderItem={renderItem}
        keyExtractor={item => item.id.toString()}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 10,
  },
  item: {
    padding: 10,
    borderBottomWidth: 1,
    borderBottomColor: '#ccc',
  },
});

export default App;

คำอธิบายโค้ด:

• useState hook ใช้สำหรับสร้าง State todos เพื่อเก็บข้อมูลรายการ todos ที่ได้จาก API
• useEffect hook ใช้สำหรับเรียกฟังก์ชัน fetchTodos เมื่อ Component ถูก Mount (โหลดขึ้นมาแสดงผลครั้งแรก)
• fetchTodos เป็น async function ซึ่งทำให้เราสามารถใช้ await เพื่อรอการทำงานของ fetch และ response.json()
• fetch(API_URL) ส่ง GET request ไปยัง URL ที่ระบุ
• response.json() แปลง Response ที่ได้จาก API ให้อยู่ในรูปแบบ JSON
• setTodos(json) อัปเดต State todos ด้วยข้อมูล JSON ที่ได้
• FlatList ใช้สำหรับแสดงรายการ todos โดยวนลูปผ่านข้อมูลและแสดงผลแต่ละรายการ
• keyExtractor เป็น function ที่ใช้ในการกำหนด key ที่ไม่ซ้ำกันสำหรับแต่ละ item ใน FlatList ซึ่งจะช่วยเพิ่มประสิทธิภาพในการ render

กรณีใช้งานจริง:

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

การจัดการ Response

เมื่อเราส่ง Request ไปยัง API แล้ว เราจะต้องจัดการ Response ที่ได้รับกลับมา ซึ่งประกอบไปด้วย Header และ Body (ข้อมูลที่ API ส่งกลับมา) สิ่งสำคัญคือการตรวจสอบ response.ok เพื่อดูว่า Request สำเร็จหรือไม่ และจัดการกับ Response ในรูปแบบที่เหมาะสม (เช่น JSON, Text)

ตัวอย่างโค้ด:

const fetchTodos = async () => {
  try {
    const response = await fetch(API_URL);

    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`); // ตรวจสอบ status code และ throw error ถ้าไม่สำเร็จ
    }

    const json = await response.json();
    setTodos(json);
  } catch (error) {
    console.error('Error fetching todos:', error);
  }
};

คำอธิบายโค้ด:

• response.ok เป็น Boolean ที่บอกว่า Request สำเร็จหรือไม่ (status code อยู่ในช่วง 200-299)
• ถ้า response.ok เป็น false เราจะ throw new Error เพื่อแจ้งว่าเกิดข้อผิดพลาดขึ้น
• การ throw new Error จะทำให้ code ในส่วน catch ทำงาน ทำให้เราสามารถจัดการกับ Error ได้อย่างเหมาะสม

ข้อผิดพลาดที่พบบ่อย:

• ลืมตรวจสอบ response.ok: การไม่ตรวจสอบ response.ok อาจทำให้ application ทำงานผิดพลาดได้ หาก API ส่ง Response ที่มี status code ที่ไม่ใช่ 200
• Response format ไม่ถูกต้อง: บางครั้ง API อาจจะส่ง Response กลับมาในรูปแบบที่ไม่ใช่ JSON หรือ Text ซึ่งเราจะต้องจัดการกับ Response ในรูปแบบที่ถูกต้อง

การจัดการ Error

การจัดการ Error เป็นสิ่งสำคัญในการพัฒนา Application ที่มีความเสถียร เนื่องจาก API อาจจะล่ม, Network อาจจะขาด หรืออาจจะมีปัญหาอื่นๆ ที่ทำให้ Request ไม่สำเร็จ เราจึงต้องเตรียมพร้อมรับมือกับ Error เหล่านี้

ตัวอย่างโค้ด:

const fetchTodos = async () => {
  try {
    // ... (code เหมือนเดิม)
  } catch (error) {
    console.error('Error fetching todos:', error);
    // แสดงข้อความ Error ให้ผู้ใช้เห็น
    Alert.alert(
      'Error',
      'Failed to fetch data. Please try again later.',
      [{ text: 'OK' }],
      { cancelable: false }
    );
  }
};

คำอธิบายโค้ด:

• เราใช้ try...catch block เพื่อดักจับ Error ที่อาจจะเกิดขึ้นในระหว่างการ Request API
• ในส่วน catch เราจะ console.error เพื่อ Log Error และแสดงข้อความ Error ให้ผู้ใช้เห็นโดยใช้ Alert.alert
• Alert.alert เป็น Component ที่ใช้ในการแสดง Alert Message ให้ผู้ใช้เห็น

แนวคิดเชิงระบบ:

การจัดการ Error ที่ดีควรจะครอบคลุมถึง:

• Logging: บันทึก Error ที่เกิดขึ้นเพื่อให้เราสามารถวิเคราะห์และแก้ไขปัญหาได้
• User Feedback: แจ้งให้ผู้ใช้ทราบว่าเกิดข้อผิดพลาดขึ้น และแนะนำวิธีแก้ไข (เช่น ลองใหม่อีกครั้ง หรือติดต่อ support)
• Retry Mechanism: ลองส่ง Request ใหม่อีกครั้งโดยอัตโนมัติ (exponential backoff เป็นเทคนิคที่นิยมใช้)
• Fallback Mechanism: ถ้าไม่สามารถดึงข้อมูลจาก API ได้ ให้แสดงข้อมูลจาก Cache หรือข้อมูล Default แทน

สรุป:

ในบทความนี้ เราได้เรียนรู้วิธีการใช้ Fetch API เพื่อดึงข้อมูลจาก API ต่างๆ โดยใช้ GET method, การจัดการ Response และการจัดการ Error การเข้าใจหลักการเหล่านี้จะช่วยให้คุณสามารถสร้าง Application ที่สามารถดึงข้อมูลจาก API ได้อย่างมีประสิทธิภาพและมีความเสถียรมากขึ้น ในบทความถัดไป เราจะมาเรียนรู้เกี่ยวกับการจัดการ State ของข้อมูลที่ได้จาก API ซึ่งเป็นขั้นตอนสำคัญในการสร้าง Application ที่มีการตอบสนองต่อผู้ใช้ได้อย่างรวดเร็ว