Advertisement

Responsive Advertisement

Belajar Axios untuk React Native & Laravel


1️⃣ Pahami Dasar Axios

Axios adalah library untuk melakukan HTTP request di JavaScript/TypeScript. Untuk memahami dasar-dasarnya, pelajari:

  • GET, POST, PUT, DELETE Request
  • Menangani Response dan Error
  • Menggunakan Headers dan Token
  • Menggunakan Interceptors

Contoh Dasar:

import axios from 'axios';

const fetchData = async () => {
    try {
        const response = await axios.get('https://dummyjson.com/users/1');
        console.log(response.data); // Data user
    } catch (error) {
        console.error('Error fetching data:', error);
    }
};

2️⃣ Pahami Interceptors

Interceptor digunakan untuk memodifikasi request dan response secara global, seperti menambahkan token ke setiap request.

📌 Request Interceptor → Menambahkan token sebelum request dikirim

📌 Response Interceptor → Menangani error global

Baca dokumentasi Axios bagian interceptors: Axios Interceptors Docs

3️⃣ Gunakan di Project Laravel & React Native

Karena kamu pakai Laravel dan React Native, kamu bisa:

  • Gunakan Axios untuk komunikasi dengan API Laravel
  • Tambahkan autentikasi menggunakan JWT
  • Simpan token di AsyncStorage di React Native
  • Gunakan refresh token jika akses token expired

Contoh Request dengan Bearer Token:

import axios from 'axios';

const API = axios.create({
    baseURL: 'https://dummyjson.com/auth',
    withCredentials: true
});

API.interceptors.request.use((config) => {
    const token = localStorage.getItem('accessToken');
    if (token) {
        config.headers["Authorization"] = `Bearer ${token}`;
    }
    return config;
});

export default API;

4️⃣ Coba Explore Lebih Lanjut

📚 Belajar dari Dokumentasi Resmi: Axios Docs

🎥 Video Tutorial Axios (YouTube): Crash Course Axios

💻 Coba langsung di Playground Axios: Axios Playground

Jika ada pertanyaan, tinggalkan komentar! 🚀🔥

Posting Komentar

0 Komentar