พื้นฐานการเชื่อมต่อ API ใน React Native

พื้นฐานการเชื่อมต่อ API ใน React Native

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

ในบทนี้ เราจะมาทำความเข้าใจว่า REST API คืออะไร, fetch API คืออะไร, และ Axios คืออะไร ซึ่งเป็นเครื่องมือสำคัญที่เราจะใช้ในการเชื่อมต่อ API ใน React Native ครับ

REST API คืออะไร?

REST API ย่อมาจาก Representational State Transfer Application Programming Interface ครับ ฟังดูอาจจะยาก แต่จริงๆ แล้วมันคือรูปแบบสถาปัตยกรรม (architectural style) ที่ใช้ในการสร้าง API ที่เน้นความเรียบง่ายและเข้าใจง่ายครับ

ลองนึกภาพว่า REST API เหมือนกับพนักงานเสิร์ฟในร้านอาหารครับ คุณ (แอปพลิเคชันของคุณ) สั่งอาหาร (request) จากเมนู (API endpoint) พนักงานเสิร์ฟ (REST API) นำคำสั่งของคุณไปที่ห้องครัว (server) และนำอาหาร (response) กลับมาให้คุณ

คุณสมบัติหลักของ REST API ที่ควรรู้จักมีดังนี้ครับ:

• Client-Server: มีฝั่ง Client (แอปพลิเคชัน) และฝั่ง Server ที่ทำงานแยกกันอย่างชัดเจน
• Stateless: Server ไม่เก็บข้อมูลเกี่ยวกับ Client แต่ละราย ทำให้ Server สามารถรองรับ Client ได้จำนวนมาก
• Cacheable: Response สามารถถูก Cache ไว้ได้ เพื่อลดภาระของ Server และเพิ่มความเร็วในการตอบสนอง
• Layered System: สามารถมี Layer กลางคั่นระหว่าง Client และ Server ได้ เช่น Load Balancer หรือ Proxy Server
• Uniform Interface: มีรูปแบบการสื่อสารที่ชัดเจนและเป็นมาตรฐาน ทำให้ Client และ Server สามารถสื่อสารกันได้โดยไม่จำเป็นต้องรู้รายละเอียดภายในของกันและกัน

Method ที่ใช้บ่อยใน REST API:

• GET: ใช้สำหรับดึงข้อมูลจาก Server
• POST: ใช้สำหรับสร้างข้อมูลใหม่บน Server
• PUT: ใช้สำหรับแก้ไขข้อมูลที่มีอยู่บน Server (แทนที่ข้อมูลทั้งหมด)
• PATCH: ใช้สำหรับแก้ไขข้อมูลที่มีอยู่บน Server (แก้ไขเฉพาะบางส่วน)
• DELETE: ใช้สำหรับลบข้อมูลบน Server

ตัวอย่างเช่น ถ้าเราต้องการดึงข้อมูลผู้ใช้งานที่มี ID เป็น 1 จาก Server เราอาจจะส่ง request ไปที่ endpoint /users/1 ด้วย method GET

fetch API คืออะไร?

fetch API เป็น built-in API (API ที่มาพร้อมกับ JavaScript) ที่ใช้สำหรับทำการ request ไปยัง Server และรับ response กลับมาครับ มันเป็นวิธีที่ง่ายและสะดวกในการดึงข้อมูลจาก API โดยไม่ต้องพึ่งพา library ภายนอก

ตัวอย่างการใช้งาน fetch API:

const fetchData = async () => {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/todos/1'); // API endpoint ตัวอย่าง
    const json = await response.json(); // แปลง response เป็น JSON
    console.log(json); // แสดงข้อมูลที่ได้จาก API
  } catch (error) {
    console.error(error); // แสดงข้อผิดพลาด (ถ้ามี)
  }
};

fetchData();

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

• fetch('https://jsonplaceholder.typicode.com/todos/1'): ทำการ request ไปยัง API endpoint ที่ระบุ
• await response.json(): แปลง response ที่ได้จาก Server ให้เป็น JSON format เพื่อให้ง่ายต่อการนำไปใช้งาน
• console.log(json): แสดงข้อมูล JSON ที่ได้จาก API ใน console
• try...catch: ใช้สำหรับจัดการข้อผิดพลาดที่อาจเกิดขึ้นระหว่างการ request
• async...await: ใช้เพื่อให้โค้ดดูง่ายขึ้นและอ่านง่ายขึ้น (เป็นการเขียน asynchronous code ในรูปแบบ synchronous)

ข้อดีของ fetch API:

• เป็น built-in API ไม่ต้องติดตั้ง library เพิ่มเติม
• ใช้งานง่ายและสะดวก
• รองรับ Promises ทำให้สามารถจัดการ asynchronous operations ได้อย่างมีประสิทธิภาพ

ข้อเสียของ fetch API:

• ไม่รองรับ request cancellation (การยกเลิก request ที่กำลังดำเนินการ)
• ไม่รองรับ progress events (การติดตามความคืบหน้าของการอัพโหลด/ดาวน์โหลด)
• อาจต้องเขียนโค้ดเพิ่มเติมเพื่อจัดการกับ HTTP errors

Axios คืออะไร?

Axios เป็น JavaScript library ที่ใช้สำหรับทำการ HTTP requests จาก browser หรือ Node.js ครับ มันมีคุณสมบัติที่มากกว่า fetch API และเป็นที่นิยมอย่างมากในการพัฒนา React Native

ข้อดีของ Axios:

• รองรับ request cancellation
• รองรับ progress events
• มี built-in support สำหรับ JSON transformations
• มี interceptors สำหรับ intercepting requests และ responses
• รองรับการจัดการ HTTP errors ได้ดีกว่า fetch API
• ใช้งานง่ายและมี community ที่ใหญ่

ข้อเสียของ Axios:

• ต้องติดตั้ง library เพิ่มเติม

ตัวอย่างการใช้งาน Axios:

ก่อนอื่นต้องทำการติดตั้ง Axios ก่อนนะครับ สามารถทำได้โดยใช้คำสั่ง:

npm install axios

จากนั้นสามารถใช้งานได้ดังนี้:

import axios from 'axios';

const fetchData = async () => {
  try {
    const response = await axios.get('https://jsonplaceholder.typicode.com/todos/1'); // API endpoint ตัวอย่าง
    console.log(response.data); // แสดงข้อมูลที่ได้จาก API (response.data)
  } catch (error) {
    console.error(error); // แสดงข้อผิดพลาด (ถ้ามี)
  }
};

fetchData();

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

• import axios from 'axios';: นำเข้า Axios library
• axios.get('https://jsonplaceholder.typicode.com/todos/1'): ทำการ GET request ไปยัง API endpoint ที่ระบุ
• response.data: ข้อมูล JSON ที่ได้จาก API จะอยู่ใน property data ของ response object

สรุป:

ในบทนี้ เราได้เรียนรู้เกี่ยวกับ REST API, fetch API, และ Axios ซึ่งเป็นเครื่องมือสำคัญในการเชื่อมต่อ API ใน React Native ครับ fetch API เป็น built-in API ที่ใช้งานง่ายและสะดวก ในขณะที่ Axios เป็น library ที่มีคุณสมบัติที่มากกว่าและเป็นที่นิยมในการพัฒนา React Native

ในบทถัดไป เราจะมาลงลึกในเรื่องของการดึงข้อมูลจาก API ด้วย fetch API กันนะครับ เตรียมตัวให้พร้อม!