Pernahkah Anda menghadapi frustrasi karena permintaan API yang timeout, yang mengakibatkan kesalahan seperti "request failed with status code 408" atau "network error"?

Opsi timeout di Axios memungkinkan Anda menentukan berapa lama menunggu respons server sebelum memunculkan kesalahan, mencegah aplikasi Anda menggantung tanpa batas waktu.

Namun, memilih nilai timeout yang tepat dan menangani timeout dengan baik bisa jadi menantang. Di sinilah Apidog, sebuah platform pengujian dan debugging API, dapat menguji dan men-debug permintaan axios Anda dengan timeout.

💡

Uji dan debug permintaan axios Anda dengan timeout menggunakan Apidog, sebuah platform terintegrasi untuk desain, debugging, pengembangan, mock, dan pengujian API secara gratis.

button

Apa Itu Axios Timeout dan Mengapa Itu Penting

Sebelum kita membahas detail tentang cara menangani timeout axios, mari kita pahami dulu apa itu dan mengapa itu penting.

Axios timeout adalah jumlah waktu maksimum axios akan menunggu respons dari server sebelum membatalkan permintaan dan memunculkan kesalahan. Nilai timeout bawaan di axios adalah 0, yang berarti tidak ada timeout dan axios akan menunggu respons tanpa batas waktu.

Dengan menetapkan nilai timeout, Anda dapat memberi tahu axios untuk menyerah pada permintaan setelah jangka waktu tertentu, dan memunculkan kesalahan. Dengan cara ini, Anda dapat menangani kesalahan dalam kode Anda, dan memberikan opsi fallback atau alternatif kepada pengguna, seperti:

Menampilkan pesan kesalahan atau indikator pemuatan
Meminta pengguna untuk mencoba lagi atau menyegarkan halaman
Mengarahkan pengguna ke halaman atau layanan lain
Mencatat kesalahan atau mengirim pemberitahuan ke pengembang

Dengan menangani kesalahan, Anda dapat meningkatkan pengalaman pengguna, menghemat sumber daya, dan mencegah risiko keamanan. Anda juga dapat menghindari permintaan yang tidak perlu atau duplikat, dan mengoptimalkan kinerja aplikasi Anda.

Tetapi bagaimana Anda menetapkan nilai timeout di axios? Dan bagaimana Anda menangani kesalahan ketika itu terjadi? Itulah yang akan kita lihat di bagian selanjutnya.

Cara Menetapkan Opsi Timeout di Axios

Menetapkan opsi timeout di axios sangat mudah dan sederhana. Anda dapat menentukan nilai timeout dalam milidetik sebagai properti dari objek konfigurasi yang Anda berikan ke metode permintaan axios, seperti axios.get, axios.post, axios.put, dll.

Misalnya, jika Anda ingin menetapkan nilai timeout menjadi 5 detik (5000 milidetik) untuk permintaan GET ke endpoint API tertentu, Anda dapat menulis sesuatu seperti ini:

axios.get('/api/users', {timeout: 5000})
  .then(response => {
    // handle success
  })
  .catch(error => {
    // handle error
  });

Atau, Anda juga dapat menetapkan nilai timeout secara global untuk semua permintaan axios, dengan menggunakan objek axios.defaults. Misalnya, jika Anda ingin menetapkan nilai timeout menjadi 5 detik untuk semua permintaan axios, Anda dapat menulis sesuatu seperti ini:

axios.defaults.timeout = 5000;

Anda juga dapat membuat instance axios dengan nilai timeout khusus, dan menggunakannya untuk permintaan tertentu. Misalnya, jika Anda ingin membuat instance axios dengan nilai timeout 10 detik, dan menggunakannya untuk beberapa permintaan, Anda dapat menulis sesuatu seperti ini:

const instance = axios.create({timeout: 10000});

instance.get('/api/products')
  .then(response => {
    // handle success
  })
  .catch(error => {
    // handle error
  });

Seperti yang Anda lihat, menetapkan opsi timeout di axios sangat sederhana dan fleksibel. Anda dapat menyesuaikannya untuk permintaan yang berbeda, tergantung pada kebutuhan dan preferensi Anda.

Tetapi bagaimana Anda memilih nilai timeout yang tepat untuk permintaan Anda? Berapa lama Anda harus menunggu respons sebelum menyerah? Tidak ada jawaban pasti untuk pertanyaan ini, karena itu tergantung pada banyak faktor, seperti:

Jenis dan tujuan permintaan
Kecepatan dan keandalan server dan jaringan
Harapan dan toleransi pengguna
Ketersediaan dan kelayakan opsi fallback atau alternatif

Tetapi apa yang terjadi ketika nilai timeout tercapai, dan permintaan dibatalkan? Bagaimana Anda menangkap dan menangani kesalahan timeout di axios? Itulah yang akan kita lihat di bagian selanjutnya.

Cara Menangkap dan Menangani Kesalahan Timeout di Axios

Ketika nilai timeout tercapai, dan permintaan dibatalkan, axios akan memunculkan kesalahan, yang dapat Anda tangkap dan tangani dalam kode Anda. Ada berbagai cara untuk menangkap dan menangani kesalahan, tergantung pada bagaimana Anda menulis permintaan axios Anda, seperti menggunakan try/catch, promises, atau async/await.

Menggunakan try/catch

Jika Anda menggunakan try/catch untuk menulis permintaan axios Anda, Anda dapat menangkap kesalahan di blok catch, dan menanganinya sesuai dengan itu. Misalnya, jika Anda menggunakan blok try/catch untuk membuat permintaan GET ke endpoint API tertentu, dengan nilai timeout 5 detik, Anda dapat menulis sesuatu seperti ini:

try {
  const response = await axios.get('/api/users', {timeout: 5000});
  // handle success
} catch (error) {
  // handle error
}

Tetapi bagaimana Anda tahu jika kesalahan itu adalah kesalahan timeout, atau jenis kesalahan lainnya? Salah satu cara untuk memeriksa adalah dengan menggunakan properti error.code, yang akan diatur ke ‘ECONNABORTED’ jika kesalahan itu adalah kesalahan timeout. Misalnya, Anda dapat menulis sesuatu seperti ini:

try {
  const response = await axios.get('/api/users', {timeout: 5000});
  // handle success
} catch (error) {
  // handle error
  if (error.code === 'ECONNABORTED') {
    // handle timeout error
    console.error('Request timed out');
    // do something else, such as showing an error message or a retry button
  } else {
    // handle other types of errors
    console.error(error.message);
    // do something else, such as logging the error or sending a notification
  }
}

Seperti yang Anda lihat, menggunakan try/catch adalah cara sederhana dan efektif untuk menangkap dan menangani kesalahan timeout di axios. Namun, itu mengharuskan penggunaan sintaks async/await, yang mungkin tidak didukung oleh beberapa browser atau lingkungan. Jika Anda ingin menggunakan cara yang lebih kompatibel dan tradisional untuk menulis permintaan axios Anda, Anda dapat menggunakan promises sebagai gantinya.

Menggunakan promises

Jika Anda menggunakan promises untuk menulis permintaan axios Anda, Anda dapat menangkap kesalahan di metode catch, dan menanganinya sesuai dengan itu. Misalnya, jika Anda menggunakan rantai promise untuk membuat permintaan GET ke endpoint API tertentu, dengan nilai timeout 5 detik, Anda dapat menulis sesuatu seperti ini:

axios.get('/api/users', {timeout: 5000})
  .then(response => {
    // handle success
  })
  .catch(error => {
    // handle error
  });

Untuk memeriksa apakah kesalahan itu adalah kesalahan timeout, Anda dapat menggunakan properti error.code yang sama seperti sebelumnya, dan membandingkannya dengan ‘ECONNABORTED’. Misalnya, Anda dapat menulis sesuatu seperti ini:

axios.get('/api/users', {timeout: 5000})
  .then(response => {
    // handle success
  })
  .catch(error => {
    // handle error
    if (error.code === 'ECONNABORTED') {
      // handle timeout error
      console.error('Request timed out');
      // do something else, such as showing an error message or a retry button
    } else {
      // handle other types of errors
      console.error(error.message);
      // do something else, such as logging the error or sending a notification
    }
  });

Seperti yang Anda lihat, menggunakan promises adalah cara mudah dan familiar lainnya untuk menangkap dan menangani kesalahan timeout di axios. Namun, itu mungkin menghasilkan kode yang bersarang dan bertele-tele, terutama jika Anda memiliki beberapa permintaan axios dalam urutan atau secara paralel. Jika Anda ingin menggunakan cara yang lebih modern dan elegan untuk menulis permintaan axios Anda, Anda dapat menggunakan async/await sebagai gantinya.

Menggunakan async/await

Jika Anda menggunakan async/await untuk menulis permintaan axios Anda, Anda dapat menangkap kesalahan di blok try/catch, dan menanganinya sesuai dengan itu. Ini adalah metode yang sama yang kita lihat sebelumnya, tetapi saya akan mengulanginya di sini untuk kelengkapan. Misalnya, jika Anda menggunakan fungsi async untuk membuat permintaan GET ke endpoint API tertentu, dengan nilai timeout 5 detik, Anda dapat menulis sesuatu seperti ini:

async function getUsers() {
  try {
    const response = await axios.get('/api/users', {timeout: 5000});
    // handle success
  } catch (error) {
    // handle error
    if (error.code === 'ECONNABORTED') {
      // handle timeout error
      console.error('Request timed out');
      // do something else, such as showing an error message or a retry button
    } else {
      // handle other types of errors
      console.error(error.message);
      // do something else, such as logging the error or sending a notification
    }
  }
}

Seperti yang Anda lihat, menggunakan async/await adalah cara yang bersih dan ringkas untuk menangkap dan menangani kesalahan timeout di axios. Namun, itu mengharuskan penggunaan sintaks async/await, yang mungkin tidak didukung oleh beberapa browser atau lingkungan. Jika Anda ingin menggunakan cara yang lebih kompatibel dan tradisional untuk menulis permintaan axios Anda, Anda dapat menggunakan promises sebagai gantinya.

Ini adalah tiga cara utama untuk menangkap dan menangani kesalahan timeout di axios, menggunakan try/catch, promises, atau async/await. Anda dapat memilih salah satu yang paling sesuai dengan preferensi dan situasi Anda, dan menggunakannya secara konsisten di seluruh kode Anda.

Tetapi bagaimana Anda menguji dan men-debug permintaan axios Anda dengan timeout?

Cara Menguji dan Men-debug Permintaan Axios Anda dengan Timeout Menggunakan Apidog

Apidog adalah platform yang kuat dan mudah digunakan yang membantu Anda mendesain, men-debug, mengembangkan, membuat mock, dan menguji API Anda. Ia memiliki banyak fitur dan alat yang menjadikannya solusi terpadu untuk semua kebutuhan API Anda.

button

Buka Apidog dan klik tombol "Permintaan Baru" untuk membuat permintaan baru

Anda akan melihat editor permintaan, tempat Anda dapat memasukkan detail permintaan Anda, seperti metode, URL, header, body, dll.

Klik tombol "Kirim" untuk mengirim permintaan

Anda akan melihat panel respons, tempat Anda dapat melihat detail respons, seperti status, header, body, waktu, dll.

Dengan Apidog, Anda dapat dengan mudah menguji dan men-debug permintaan axios Anda dengan timeout.

Kesimpulan

Dalam postingan blog ini, kita telah belajar cara menangani timeout axios seperti seorang profesional, menggunakan praktik dan alat terbaik yang tersedia. Kita telah melihat bagaimana cara:

Menetapkan opsi timeout di axios dan menyesuaikannya untuk permintaan yang berbeda
Menangkap dan menangani kesalahan timeout di axios menggunakan try/catch, promises, atau async/await
Menguji dan men-debug permintaan axios Anda dengan timeout menggunakan Apidog, sebuah platform terintegrasi untuk desain, debugging, pengembangan, mock, dan pengujian API

Dengan mengikuti langkah-langkah ini, Anda dapat meningkatkan pengalaman pengguna, kinerja, dan keamanan aplikasi web Anda, dan menghindari frustrasi dan kesulitan menunggu respons dari server tanpa batas waktu.

button