Advance JavaScript 20 - fetch

Advance JavaScript 20 - fetch

Tentu, berikut adalah penjelasan detail tentang Fetch API dalam JavaScript, bersama dengan contoh penggunaan nyata:

Apa itu Fetch?
Fetch adalah API baru dalam JavaScript yang digunakan untuk mengambil resource (seperti file atau data) dari jaringan. Ini merupakan pengganti dari XMLHttpRequest (XHR) untuk melakukan komunikasi HTTP dengan server dan menjadikannya lebih mudah digunakan dan lebih powerful.

Cara Menggunakan Fetch:

fetch(url)
  .then(response => {
    // Mengonversi respons ke dalam bentuk JSON
    return response.json();
  })
  .then(data => {
    // Menggunakan data yang diperoleh
    console.log(data);
  })
  .catch(error => {
    // Menangani kesalahan
    console.error('Terjadi kesalahan:', error);
  });
```

Contoh Penggunaan Nyata:

// Mengambil data JSON dari server menggunakan Fetch
fetch('https://api.example.com/data')
  .then(response => {
    // Memeriksa apakah respons sukses (status code 200)
    if (!response.ok) {
      throw new Error('Terjadi kesalahan: ' + response.status);
    }
    // Mengonversi respons ke dalam bentuk JSON
    return response.json();
  })
  .then(data => {
    // Menggunakan data yang diperoleh
    console.log('Data yang diperoleh:', data);
  })
  .catch(error => {
    // Menangani kesalahan
    console.error('Terjadi kesalahan:', error);
  });
```

Dalam contoh di atas, `fetch` digunakan untuk mengambil data JSON dari URL yang diberikan. Setelah respons diperoleh, kita memeriksa apakah respons tersebut sukses dengan memeriksa status code. Jika respons sukses, kita mengonversi respons ke dalam bentuk JSON menggunakan `.json()`, kemudian menggunakan data yang diperoleh. Jika ada kesalahan dalam permintaan atau pengolahan data, kita menangani kesalahan tersebut dengan menggunakan `.catch()`.

Tentu, berikut adalah refactoring dari contoh penggunaan Fetch API JavaScript yang telah saya berikan sebelumnya:

// Mengambil data JSON dari server menggunakan Fetch
fetch('https://api.example.com/data')
  .then(checkResponseStatus)
  .then(response => response.json())
  .then(data => {
    console.log('Data yang diperoleh:', data);
  })
  .catch(error => {
    console.error('Terjadi kesalahan:', error);
  });

// Fungsi untuk memeriksa status respons
function checkResponseStatus(response) {
  if (!response.ok) {
    throw new Error('Terjadi kesalahan: ' + response.status);
  }
  return response;
}

Dalam refactoring ini, saya memisahkan logika untuk memeriksa status respons ke dalam sebuah fungsi terpisah yang disebut `checkResponseStatus`. Hal ini membuat kode lebih terstruktur dan memudahkan untuk mengelola respons dari server. Kita juga menggunakan chaining `.then()` untuk melakukan operasi secara berurutan, yang membuat kode lebih mudah dibaca.