การใช้ Axios Library สำหรับการเชื่อมต่อ API

React Native กับการเชื่อมต่อ API และจัดการข้อมูล: การใช้ Axios Library สำหรับการเชื่อมต่อ API

ในบทที่แล้ว เราได้เรียนรู้วิธีการดึงข้อมูลจาก API ด้วย fetch API ซึ่งเป็น built-in function ของ JavaScript ที่มีอยู่ใน React Native อยู่แล้ว แต่ในบทนี้ เราจะมาทำความรู้จักกับอีกทางเลือกหนึ่งที่ได้รับความนิยมอย่างมาก นั่นก็คือ Axios library ซึ่งจะช่วยให้การเชื่อมต่อ API ของเราง่ายและมีประสิทธิภาพมากยิ่งขึ้น

ทำไมต้อง Axios? ข้อดีที่มากกว่า Fetch

ถึงแม้ว่า fetch จะใช้งานได้ดี แต่ Axios ก็มีข้อดีหลายอย่างที่ทำให้มันเป็นที่นิยมในหมู่ React Native developers:

• HTTP request cancellation: Axios รองรับการยกเลิก HTTP request กลางคัน ซึ่งมีประโยชน์มากในกรณีที่ผู้ใช้เปลี่ยนหน้า หรือยกเลิก action บางอย่างก่อนที่ request จะเสร็จสิ้น (เช่น การพิมพ์คำค้นหา แล้วเปลี่ยนคำก่อนผลลัพธ์จะแสดง) fetch ไม่ได้มี built-in mechanism สำหรับการยกเลิก request โดยตรง
• Automatic JSON transformation: Axios จะทำการแปลง response ที่ได้จาก API ให้อยู่ในรูปแบบ JSON โดยอัตโนมัติ ทำให้เราไม่ต้องเรียกใช้ .json() method เหมือนกับ fetch
• Interceptor support: Axios มี interceptor ที่ช่วยให้เราสามารถแทรกแซงการทำงานของ request และ response ได้ เช่น การเพิ่ม header ที่จำเป็น (เช่น Authorization token) ก่อนส่ง request หรือการจัดการกับ error ที่เกิดขึ้นจาก API
• Wider browser support: Axios รองรับ browser รุ่นเก่าๆ ได้ดีกว่า fetch (แม้จะไม่ใช่ประเด็นสำคัญใน React Native แต่ก็เป็นข้อดีที่ควรทราบ)
• Error handling ที่ดีกว่า: Axios ให้ข้อมูล error ที่ละเอียดกว่า fetch ทำให้เรา debug ได้ง่ายขึ้น

เหตุผลเชิงออกแบบ (Design Rationale): Axios ถูกออกแบบมาให้เป็น HTTP client ที่มีความยืดหยุ่นสูงและใช้งานง่าย โดยเน้นที่การจัดการ request และ response อย่างมีประสิทธิภาพ และการให้เครื่องมือที่จำเป็นแก่ developers ในการจัดการกับสถานการณ์ต่างๆ ที่อาจเกิดขึ้นในการเชื่อมต่อ API

การติดตั้ง Axios ใน React Native

ก่อนที่เราจะเริ่มใช้งาน Axios ได้ เราต้องทำการติดตั้ง library นี้ลงในโปรเจกต์ของเราก่อน โดยใช้คำสั่งต่อไปนี้:

npm install axios
# หรือ
yarn add axios

การตั้งค่า Axios: Configuration is Key

ก่อนที่เราจะเริ่มใช้งาน Axios อย่างจริงจัง เราสามารถตั้งค่า default configuration ได้ เพื่อให้โค้ดของเราสะอาดและอ่านง่ายขึ้น ตัวอย่างเช่น เราสามารถกำหนด base URL ของ API ของเราได้:

import axios from 'axios';

// สร้าง Axios instance พร้อม default configuration
const api = axios.create({
  baseURL: 'https://api.example.com', // Base URL ของ API
  timeout: 10000, // กำหนด timeout เป็น 10 วินาที
  headers: {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer YOUR_API_TOKEN' // ใส่ Token ถ้า API ต้องการ
  }
});

export default api;

คำอธิบาย:

• axios.create(): เป็น function ที่ใช้สร้าง Axios instance ใหม่ โดยรับ object ที่มี configuration เป็น argument
• baseURL: กำหนด URL หลักของ API ของเรา
• timeout: กำหนดระยะเวลา timeout ของ request เป็น milliseconds หาก request ใช้เวลานานกว่านี้ Axios จะ throw error
• headers: กำหนด HTTP headers ที่จะถูกส่งไปพร้อมกับทุก request

แนวปฏิบัติที่ดี (Best Practices): การสร้าง Axios instance พร้อม default configuration ช่วยให้เราสามารถ reuse configuration นี้ได้ในหลายๆ Component และยังช่วยให้โค้ดของเราเป็นระเบียบและง่ายต่อการบำรุงรักษา

การใช้งาน Axios: ดึงข้อมูล, ส่งข้อมูล, แก้ไข และลบ

Axios รองรับ HTTP methods ที่หลากหลาย เช่น GET, POST, PUT, DELETE ซึ่งเราจะมาดูตัวอย่างการใช้งานแต่ละ method กัน

การดึงข้อมูล (GET Request)

การดึงข้อมูลจาก API ด้วย Axios นั้นง่ายมาก:

import React, { useState, useEffect } from 'react';
import { View, Text, ActivityIndicator } from 'react-native';
import api from './api'; // Import Axios instance ที่เราสร้างไว้

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

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await api.get('/users'); // ดึงข้อมูลจาก endpoint /users
        setData(response.data); // response.data คือข้อมูลที่ API ส่งกลับมา
      } catch (error) {
        setError(error);
        console.error('Error fetching data:', error);
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, []); // useEffect จะทำงานแค่ครั้งเดียวเมื่อ Component ถูก mount

  if (loading) {
    return (
      <View><ActivityIndicator size="large" color="#0000ff" /><Text>Loading...</Text></View>
    );
  }

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

  return (
    <View>
      <Text>User Data:</Text>
      {data && data.map(user => (
        <Text key={user.id}>{user.name}</Text>
      ))}
    </View>
  );
};

export default ExampleComponent;

คำอธิบาย:

• เราใช้ api.get('/users') เพื่อส่ง GET request ไปยัง endpoint /users
• response.data คือข้อมูลที่ API ส่งกลับมา
• เราใช้ try...catch block เพื่อจัดการกับ error ที่อาจเกิดขึ้น
• เราใช้ finally block เพื่อให้แน่ใจว่า loading state จะถูก set เป็น false เสมอ ไม่ว่า request จะสำเร็จหรือไม่ก็ตาม

การส่งข้อมูล (POST Request)

การส่งข้อมูลไปยัง API ทำได้โดยใช้ api.post() method:

const createNewUser = async (userData) => {
  try {
    const response = await api.post('/users', userData); // ส่ง userData ไปยัง endpoint /users
    console.log('New user created:', response.data);
  } catch (error) {
    console.error('Error creating user:', error);
  }
};

// ตัวอย่างการเรียกใช้
const newUser = {
  name: 'John Doe',
  email: 'john.doe@example.com'
};

createNewUser(newUser);

คำอธิบาย:

• เราใช้ api.post('/users', userData) เพื่อส่ง POST request ไปยัง endpoint /users พร้อมกับข้อมูล userData
• userData คือ object ที่มีข้อมูลที่เราต้องการส่งไปยัง API

การแก้ไขข้อมูล (PUT/PATCH Request)

การแก้ไขข้อมูลที่มีอยู่แล้ว ทำได้โดยใช้ api.put() หรือ api.patch() method:

const updateUser = async (userId, updatedData) => {
  try {
    const response = await api.put(`/users/${userId}`, updatedData); // ส่ง updatedData ไปยัง endpoint /users/:userId
    console.log('User updated:', response.data);
  } catch (error) {
    console.error('Error updating user:', error);
  }
};

// ตัวอย่างการเรียกใช้
const userId = 1;
const updatedData = {
  name: 'Jane Doe',
  email: 'jane.doe@example.com'
};

updateUser(userId, updatedData);

ความแตกต่างระหว่าง PUT และ PATCH:

• PUT: ใช้เพื่อแทนที่ resource ทั้งหมดด้วยข้อมูลใหม่
• PATCH: ใช้เพื่อแก้ไขเฉพาะบางส่วนของ resource

การลบข้อมูล (DELETE Request)

การลบข้อมูล ทำได้โดยใช้ api.delete() method:

const deleteUser = async (userId) => {
  try {
    await api.delete(`/users/${userId}`); // ส่ง DELETE request ไปยัง endpoint /users/:userId
    console.log('User deleted');
  } catch (error) {
    console.error('Error deleting user:', error);
  }
};

// ตัวอย่างการเรียกใช้
const userId = 1;

deleteUser(userId);

สรุป

ในบทนี้ เราได้เรียนรู้วิธีการใช้งาน Axios library ใน React Native เพื่อเชื่อมต่อกับ API และจัดการข้อมูลที่ได้รับมา เราได้เห็นข้อดีของ Axios เหนือ fetch API, วิธีการตั้งค่า Axios instance พร้อม default configuration, และวิธีการใช้งาน Axios ในการดึงข้อมูล, ส่งข้อมูล, แก้ไข และลบข้อมูล

ในบทถัดไป เราจะมาเรียนรู้วิธีการจัดการกับ loading และ error state ใน React Native อย่างมีประสิทธิภาพ เพื่อให้ผู้ใช้ได้รับประสบการณ์ที่ดีที่สุด