React Native คือ ตอนที่ 8 : ระบบเครือข่ายการสื่อสาร (Networking)

1. พื้นฐาน: ทำความเข้าใจกับ API และ HTTP
2. ดึงข้อมูล(Fetch) API ใน React Native
3. การใช้ Axios ใน React Native
4. จัดระเบียบ (Organizing) การเรียก API
5. การจัดการข้อผิดพลาด (Error Handling) และสถานะการโหลด (Loading States)

ระบบเครือข่ายเป็นส่วนสำคัญของการทำแอพ React Native และทำแอพมือถือ เป็นกุญแจสำคัญในการเชื่อมต่อแอปของเรากับแหล่งข้อมูลภายนอก บริการของบุคคลที่สาม หรือโซลูชันแบ็กเอนด์แบบกำหนดเอง ด้วยคำขอเครือข่าย เราสามารถสร้าง อ่าน อัปเดต และลบข้อมูล (การดำเนินการ CRUD) ที่อยู่ในตำแหน่งอื่นที่ไม่ใช่อุปกรณ์ในระบบ ซึ่งโดยปกติจะอยู่บนเซิร์ฟเวอร์หรือในระบบคลาวด์ ใน React Native เราทำสิ่งนี้ผ่าน API (Application Programming Interfaces) API อนุญาตให้แอปพลิเคชันซอฟต์แวร์ต่างๆ สื่อสารกันได้ บทความนี้มีจุดมุ่งหมายเพื่อแนะนำคุณเกี่ยวกับการเรียกใช้ API และการจัดการคำขอเครือข่ายใน React Native ซึ่งเป็นขั้นตอนสำคัญในการทำแอพ React Native และทำแอพมือถือข้ามแพลตฟอร์มที่มีประสิทธิภาพ

1. พื้นฐาน: ทำความเข้าใจกับ API และ HTTP

ก่อนที่เราจะลงลึกในโค้ด เราจะกล่าวถึงพื้นฐานของ API และ HTTP กันพอสังเขป API ทำหน้าที่เป็น “คนกลาง” ระหว่างแอปพลิเคชันซอฟต์แวร์ต่างๆ อนุญาตให้แอปพลิเคชันโต้ตอบกับบริการและข้อมูลภายนอก API ทำงานผ่าน HTTP (Hypertext Transfer Protocol) ซึ่งเป็นชุดของกฎที่กำหนดวิธีการถ่ายโอนไฟล์บนเว็บ

คำขอ HTTP มีหลายประเภท โดยที่พบบ่อยที่สุดคือ GET (เรียกข้อมูล), POST (ส่งข้อมูล), PUT/PATCH (อัปเดตข้อมูล) และ DELETE (ลบข้อมูล) การทำความเข้าใจคำขอเหล่านี้และบทบาทในการจัดการข้อมูลเป็นพื้นฐานในการสร้างแอปบนอุปกรณ์เคลื่อนที่ด้วย React Native

2. ดึงข้อมูล(Fetch) API ใน React Native

React Native มี Fetch API เป็นค่าเริ่มต้น ทำให้เป็นเครื่องมือที่มีประโยชน์สำหรับทุกความต้องการในการร้องขอเครือข่าย นี่คือตัวอย่างง่ายๆ ของวิธีการส่งคำขอ GET โดยใช้ Fetch:

fetch('https://api.example.com/data')
  .then((response) => response.json())
  .then((json) => console.log(json))
  .catch((error) => console.error(error))
  .finally(() => setLoading(false));

ในตัวอย่างนี้ เรากำลังเรียกใช้fetch()ด้วย URL ของ API เมธอดส่งคืนสัญญาที่แก้ไขไปยังออบเจกต์การตอบสนองที่แสดงถึงการตอบสนองต่อคำขอ การตอบสนองนี้จะถูกแปลงเป็น JSON ด้วยresponse.json(). หากคำขอสำเร็จ เราจะเห็นข้อมูลของเราบันทึกอยู่ในคอนโซล ข้อผิดพลาดใด ๆ ที่เกิดขึ้นระหว่างการร้องขอจะถูกตรวจจับและบันทึกในcatchบล็อก

3. การใช้ Axios ใน React Native

แม้ว่า Fetch จะเป็นเครื่องมือที่ยอดเยี่ยม แต่ก็มีข้อจำกัดบางประการ ตัวอย่างเช่น ไม่รองรับการหมดเวลา และการจัดการข้อผิดพลาดอาจทำได้ยาก เนื่องจากไม่ได้แยกความแตกต่างระหว่างคำขอ HTTP ที่ล้มเหลวและคำขอที่สำเร็จซึ่งมีสถานะ HTTP ที่ล้มเหลว เพื่อหลีกเลี่ยงข้อจำกัดเหล่านี้ เราสามารถใช้ Axios ซึ่งเป็นไคลเอนต์ HTTP ตามสัญญาสำหรับเบราว์เซอร์และ Node.js

หากต้องการใช้ Axios กับ React Native ก่อนอื่นเราต้องติดตั้งโดยใช้ npm ( npm install axios) หรือ Yarn ( yarn add axios) เมื่อติดตั้งแล้ว เราสามารถใช้ Axios ได้ดังนี้:

import axios from 'axios';

axios.get('https://api.example.com/data')
  .then((response) => {
    console.log(response.data);
  })
  .catch((error) => {
    console.error(error);
  });

response.json()Axios แปลงข้อมูล JSON โดยอัตโนมัติ ช่วยให้เราไม่ต้องเรียกอีกขั้น นอกจากนี้ยังถือว่าสถานะ HTTP ที่น้อยกว่า 200 หรือมากกว่า 300 เป็นสถานะข้อผิดพลาด ทำให้การจัดการข้อผิดพลาดง่ายขึ้น

4. จัดระเบียบ (Organizing) การเรียก API

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

ตัวอย่างเช่น เราสามารถสร้าง api.js ไฟล์ได้ดังนี้:

import axios from 'axios';

export const fetchData = () => {
  return axios.get('https://api.example.com/data')
    .then((response) => {
      return response.data;
    })
    .catch((error) => {
      console.error(error);
    });
};

จากนั้น เราสามารถนำเข้า fetchData ฟังก์ชันในส่วนประกอบของเรา:

import React, { useEffect, useState } from 'react';
import { fetchData } from './api';

// ... inside a component

const [data, setData] = useState(null);

useEffect(() => {
  fetchData().then((fetchedData) => setData(fetchedData));
}, []);

5. การจัดการข้อผิดพลาด (Error Handling) และสถานะการโหลด (Loading States)

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

มาแก้ไข fetchData ฟังก์ชันก่อนหน้าของเราเพื่อจัดการข้อผิดพลาดและสถานะการโหลด:

import React, { useEffect, useState } from 'react';
import { View, Text, ActivityIndicator } from 'react-native';
import { fetchData } from './api';

const ExampleComponent = () => {
  const [isLoading, setLoading] = useState(true);
  const [data, setData] = useState(null);
  const [error, setError] = useState(null);

  useEffect(() => {
    fetchData()
      .then((fetchedData) => setData(fetchedData))
      .catch((error) => setError(error))
      .finally(() => setLoading(false));
  }, []);

  if (isLoading) {
    return <ActivityIndicator size="large" color="#0000ff" />;
  }

  if (error) {
    return <Text>Error: {error.message}</Text>;
  }

  return (
    <View>
      {/* Render your data here */}
      <Text>{data}</Text>
    </View>
  );
};

ในตัวอย่างข้างต้น เราได้เพิ่มสถานะการโหลดและสถานะข้อผิดพลาด เมื่อคอมโพเนนต์เมาต์ isLoading คือ true เพื่อให้ ActivityIndicator คอมโพเนนต์ถูกเรนเดอร์ เมื่อคำขอเสร็จสิ้น (ไม่ว่าจะสำเร็จหรือไม่ก็ตาม) setLoading(false) จะถูกเรียก และตัวบ่งชี้การโหลดจะถูกลบออก หากมีข้อผิดพลาด ข้อความแสดงข้อผิดพลาดจะปรากฏขึ้น

---

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

---

React Native คืออะไร

React Native คือ ตอนที่ 7 : การจัดการสถานะ (State Management)

React Native คือ ตอนที่ 9 : การจัดเก็บข้อมูลภายในเครื่อง (Data Persistence)