Panduan Utama Node Fetch API: Membuat Permintaan HTTP di Node.js

Permintaan HTTP adalah bagian fundamental dari pengembangan web modern. Dengan diperkenalkannya Fetch API ke Node.js, pengembang sekarang memiliki cara yang ampuh dan konsisten untuk membuat permintaan jaringan di seluruh lingkungan browser dan server. Dalam tutorial komprehensif ini, kita akan menjelajahi cara menggunakan Node fetch secara efektif dalam proyek Anda.

Apa itu Node Fetch API dan Mengapa Anda Harus Menggunakannya?

Node fetch API adalah mekanisme modern berbasis promise untuk membuat permintaan HTTP di aplikasi Node.js. Awalnya merupakan fitur khusus browser, fetch menjadi fitur eksperimental di Node.js v18 dan mencapai stabilitas di Node.js v21.

Manfaat Utama Menggunakan Node Fetch:

Fungsionalitas bawaan: Tidak perlu menginstal paket pihak ketiga
Berbasis Promise: Sintaks modern yang bersih dengan dukungan async/await
Keakraban lintas platform: API yang sama dengan fetch sisi browser
Peningkatan kinerja: Dibangun di atas klien HTTP Undici berkinerja tinggi

Menguji Permintaan Node Fetch API Anda dengan Alat Modern

Saat belajar menggunakan Node fetch, penting untuk memiliki alat yang andal untuk menguji titik akhir API Anda. Apidog menonjol sebagai alternatif Postman terbaik untuk menguji dan mendokumentasikan permintaan Node fetch API Anda.

Sebagai platform pengembangan API all-in-one, Apidog menggabungkan dokumentasi API, pengujian, dan server mock dalam satu antarmuka intuitif.

Saat mengembangkan aplikasi dengan Node fetch, Apidog membantu Anda memvisualisasikan respons, berkolaborasi dengan anggota tim, dan memastikan panggilan API Anda berfungsi dengan benar sebelum menerapkannya dalam kode. Kemampuannya untuk menghasilkan cuplikan kode untuk permintaan Node fetch membuat transisi dari pengujian ke implementasi menjadi mulus.

button

Menyiapkan Lingkungan Anda untuk Node Fetch

Prasyarat untuk Menggunakan Node Fetch

Sebelum menyelami contoh Node fetch, pastikan Anda memiliki:

Node.js v18 atau lebih tinggi (sebaiknya v21+ untuk dukungan fetch yang stabil)
Periksa versi Node.js Anda:

node -v

Kompatibilitas Versi Node Fetch

Node.js v21+: Fetch stabil dan siap untuk penggunaan produksi
Node.js v18-v20: Fetch tersedia tetapi eksperimental (gunakan flag -experimental-fetch)
Versi Node.js yang lebih lama: Instal paket node-fetch atau tingkatkan Node.js

Jika Anda menggunakan v18-v20, jalankan aplikasi Anda dengan:

node --experimental-fetch app.js

Membuat Permintaan Node Fetch Pertama Anda

Mari kita mulai dengan permintaan GET dasar menggunakan Node fetch:

// Permintaan GET dasar dengan Node fetch
fetch('<https://api.example.com/data>')
  .then(response => {
    if (!response.ok) {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }
    return response.json(); // Parse JSON response
  })
  .then(data => {
    console.log('Data received:', data);
  })
  .catch(error => {
    console.error('Fetch error:', error);
  });

Menggunakan Node Fetch dengan Async/Await

Untuk kode yang lebih bersih, Anda dapat menggunakan async/await dengan Node fetch:

async function fetchData() {
  try {
    const response = await fetch('<https://api.example.com/data>');

    if (!response.ok) {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }

    const data = await response.json();
    console.log('Data received:', data);
    return data;
  } catch (error) {
    console.error('Fetch error:', error);
  }
}

// Call the function
fetchData();

Metode Permintaan Node Fetch Tingkat Lanjut

Membuat Permintaan POST dengan Node Fetch

async function postData(url, data) {
  try {
    const response = await fetch(url, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(data),
    });

    if (!response.ok) {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }

    return await response.json();
  } catch (error) {
    console.error('Fetch POST error:', error);
  }
}

// Example usage
const newUser = {
  name: 'John Doe',
  email: 'john@example.com',
};

postData('<https://api.example.com/users>', newUser)
  .then(data => console.log('User created:', data));

Permintaan PUT dengan Node Fetch

async function updateData(url, data) {
  try {
    const response = await fetch(url, {
      method: 'PUT',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(data),
    });

    if (!response.ok) {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }

    return await response.json();
  } catch (error) {
    console.error('Fetch PUT error:', error);
  }
}

// Example usage
const updatedUser = {
  id: 1,
  name: 'Jane Smith',
  email: 'jane@example.com',
};

updateData('<https://api.example.com/users/1>', updatedUser)
  .then(data => console.log('User updated:', data));

Permintaan DELETE dengan Node Fetch

async function deleteResource(url) {
  try {
    const response = await fetch(url, {
      method: 'DELETE',
    });

    if (!response.ok) {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }

    // Some APIs return no content on DELETE
    if (response.status === 204) {
      return { success: true };
    }

    return await response.json();
  } catch (error) {
    console.error('Fetch DELETE error:', error);
  }
}

// Example usage
deleteResource('<https://api.example.com/users/1>')
  .then(result => console.log('Delete result:', result));

Menangani Berbagai Jenis Respons dengan Node Fetch

Node fetch dapat bekerja dengan berbagai format respons:

Penanganan Respons JSON

fetch('<https://api.example.com/data>')
  .then(response => response.json())
  .then(data => console.log(data));

Penanganan Respons Teks

fetch('<https://example.com/plain-text>')
  .then(response => response.text())
  .then(text => console.log(text));

Penanganan Data Biner

fetch('<https://example.com/image.png>')
  .then(response => response.arrayBuffer())
  .then(buffer => {
    // Handle binary data
    const bytes = new Uint8Array(buffer);
    console.log('Binary data length:', bytes.length);
  });

Menyesuaikan Permintaan Node Fetch dengan Header dan Opsi

Mengatur Header Kustom

fetch('<https://api.example.com/protected-data>', {
  headers: {
    'Authorization': 'Bearer YOUR_TOKEN_HERE',
    'Content-Type': 'application/json',
    'Accept': 'application/json',
    'User-Agent': 'My Node.js Application'
  }
})
.then(response => response.json())
.then(data => console.log(data));

Mengonfigurasi Opsi Permintaan

fetch('<https://api.example.com/data>', {
  method: 'GET',
  headers: { 'Content-Type': 'application/json' },
  cache: 'no-cache',
  redirect: 'follow',      // follow, error, or manual
  referrerPolicy: 'no-referrer'
})
.then(response => response.json())
.then(data => console.log(data));

Penanganan Kesalahan dengan Node Fetch

Penanganan Kesalahan Komprehensif

Salah satu aspek penting untuk dipahami tentang Node fetch adalah bahwa ia tidak menolak kode status kesalahan HTTP. Promise hanya menolak kesalahan jaringan atau jika ada sesuatu yang mencegah permintaan selesai.

Berikut adalah pendekatan penanganan kesalahan yang komprehensif:

async function fetchWithErrorHandling(url) {
  try {
    const response = await fetch(url);

    // Check for HTTP errors
    if (!response.ok) {
      // Attempt to get error details from response
      let errorDetails;
      try {
        errorDetails = await response.json();
      } catch (e) {
        errorDetails = await response.text();
      }

      throw new Error(
        `HTTP error! Status: ${response.status}, Details: ${
          typeof errorDetails === 'object'
            ? JSON.stringify(errorDetails)
            : errorDetails
        }`
      );
    }

    return await response.json();
  } catch (error) {
    // Network errors, parsing errors, and our custom HTTP errors
    console.error('Fetch failed:', error.message);
    throw error; // Re-throw to allow calling code to handle
  }
}

Menerapkan Waktu Tunggu Permintaan dengan Node Fetch

Node fetch tidak memiliki dukungan waktu tunggu bawaan, tetapi Anda dapat menerapkannya menggunakan AbortController:

async function fetchWithTimeout(url, options = {}, timeoutMs = 5000) {
  const controller = new AbortController();
  const { signal } = controller;

  // Set up timeout
  const timeout = setTimeout(() => {
    controller.abort();
  }, timeoutMs);

  try {
    const response = await fetch(url, { ...options, signal });
    clearTimeout(timeout); // Clear timeout if fetch completes

    if (!response.ok) {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }

    return await response.json();
  } catch (error) {
    clearTimeout(timeout);
    if (error.name === 'AbortError') {
      throw new Error(`Request timed out after ${timeoutMs}ms`);
    }
    throw error;
  }
}

// Example usage
fetchWithTimeout('<https://api.example.com/data>', {}, 3000)
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error.message));

Menangani Otentikasi dengan Node Fetch

Otentikasi Dasar

const username = 'user';
const password = 'password';
const credentials = Buffer.from(`${username}:${password}`).toString('base64');

fetch('<https://api.example.com/protected>', {
  headers: {
    'Authorization': `Basic ${credentials}`
  }
})
.then(response => response.json())
.then(data => console.log(data));

Otentikasi Token Bearer

const token = 'your_jwt_or_oauth_token';

fetch('<https://api.example.com/protected>', {
  headers: {
    'Authorization': `Bearer ${token}`
  }
})
.then(response => response.json())
.then(data => console.log(data));

Praktik Terbaik untuk Menggunakan Node Fetch dalam Produksi

Selalu periksa status respons: Jangan berasumsi respons berhasil
Tangani berbagai jenis konten dengan tepat: Gunakan metode yang benar untuk jenis respons Anda (json(), text(), dll.)
Terapkan penanganan kesalahan yang tepat: Buat fungsi utilitas yang menangani kesalahan secara konsisten
Atur waktu tunggu permintaan: Cegah permintaan yang menggantung dengan AbortController
Buat pembungkus fetch yang dapat digunakan kembali: Bangun lapisan layanan dengan pola permintaan umum
Pertimbangkan logika coba lagi untuk permintaan yang gagal: Terapkan exponential backoff untuk API yang tidak stabil
Gunakan variabel lingkungan untuk URL dasar: Jaga agar URL khusus lingkungan tidak berada di dalam kode

Pemecahan Masalah Node Fetch Umum

Kesalahan "Fetch is not defined"

Jika Anda menemukan ReferenceError: fetch is not defined, periksa:

Anda menggunakan Node.js v18+
Untuk Node.js v18-v20, gunakan flag -experimental-fetch
Untuk versi yang lebih lama, instal paket node-fetch

Masalah Sertifikat HTTPS

Node fetch mewarisi penanganan sertifikat HTTPS Node. Untuk sertifikat khusus:

const https = require('https');
const fs = require('fs');

const httpsAgent = new https.Agent({
  ca: fs.readFileSync('./custom-certificate.pem')
});

fetch('<https://api.example.com/data>', {
  agent: httpsAgent
})
.then(response => response.json())
.then(data => console.log(data));

Kesimpulan: Merangkul Node Fetch dalam Proyek Anda

Node fetch API mewakili peningkatan signifikan dalam cara kita membuat permintaan HTTP di aplikasi Node.js. Dengan antarmuka berbasis promise, perilaku yang konsisten di seluruh platform, dan implementasi asli, ia menjadi pilihan yang disukai untuk pengembangan Node.js modern.

Dengan menguasai Node fetch, Anda dapat membuat kode yang lebih mudah dipelihara yang memanfaatkan fitur JavaScript modern sambil menikmati peningkatan kinerja dibandingkan dengan pustaka klien HTTP yang lebih lama. Karena implementasi stabil terus matang di Node.js, kita dapat mengharapkan lebih banyak pengembang untuk mengadopsi API yang kuat ini sebagai pendekatan standar mereka untuk membuat permintaan HTTP.

Sekarang Anda memiliki pemahaman yang komprehensif tentang Node fetch, Anda siap untuk menerapkannya dalam proyek Anda sendiri dan memanfaatkan API yang kuat ini untuk semua kebutuhan permintaan HTTP Anda.

button