Cara Menangani Panggilan Fetch API yang Gagal di JavaScript

Jadi, di posting sebelumnya , kami melihat semua kemungkinan (kecuali penanganan kesalahan) dengan fetch(url, {options}). Jika Anda belum membacanya, coba baca di sini .

Hari ini, kita akan belajar tentang cara menangani kesalahan atau panggilan gagal yang dilakukan oleh fetch(). Kami akan menggunakan URL yang sama seperti pada posting sebelumnya. Tanpa basa-basi lagi mari kita langsung ke dalamnya!

Dalam posting sebelumnya, saya menyebutkan satu poin:

Ambil selalu berhasil atau mendapat respons kecuali ada semacam kesalahan jaringan.

Yah, itu juga gagal jika sintaksnya salah atau URL tidak valid, yang merupakan kasus yang jelas. Ingat ini sebagai poin 1. Sekarang, mari kita lihat sintaks untuk catch():

fetch("https://reqres.in/api/users/1")
.then( response => response.json() )
.then( data => console.log(data) )
.catch( error => console.log(error) )

Pertama, mari kita lihat apa yang terjadi ketika kita mengakses detail pengguna yang tidak ada. Sejauh yang kami tahu, kami harus mendapatkan kembali kesalahan ' 404 ' yang mengatakan tidak ditemukan, bukan?

fetch("https://reqres.in/api/users/34")  
.then(res=>res.json())
.then(data=>console.log(data))

      

fetch("https://reqres.in/api/users/34")  
.then(res=>res.json())
.then(data=>console.log(data))
.catch( error => console.log(error) )

      

Untuk menangani kesalahan seperti itu, fetch menyediakan properti “ ok ” untuk objek respons yang dikembalikannya. Kita dapat mencetak objek res untuk melihat detail berikut:

fetch("https://reqres.in/api/users/34")
.then(res=>console.log(res))

      

fetch("https://reqres.in/api/users/34")
.then((res)=>{ 
        if(res.ok) return res.json(); 
        else throw new Error("Status code error :" + res.status) 
})
.then(data=>console.log(data))
.catch(err=>console.log(err))

      

fetch("https://reqres.in/api/users/34")
.then((res)=>{ 
        if(res.ok) return res.json(); 
        else throw new Error("Status code error :" + res.status) 
})

      

catch()blok dapat menangani kesalahan sintaks karena jika sintaksnya salah:
fetch tidak dapat berhasil → jadi janji tidak dikembalikan → jadi kesalahan masuk ke
sini, sintaksnya salah, jadi catch mengambil kesalahan dan mencetaknya:

fetch("https://reqres.in/api/users/34")
.then(res=>resjson())
.catch(error=>console.log(error))

      

fetch("https://reqres.in/api/users/4")
.then(res=>res.json())
.catch(err=>console.log(err))

      

fetch("https://reqres.in/api/users/34\")  
.then(res=>res.json())
.then(data=>console.log(data))
.catch(error=>console.log(error))

      

Semoga Anda menikmati artikelnya. Jika ya, pertimbangkan untuk memberikan umpan balik atau saran di bagian komentar. Ikuti terus agar tidak ketinggalan postingan saya selanjutnya. Nantikan artikel-artikel menarik selanjutnya.

Jika Anda terlalu senang, Anda selalu dapat membelikan saya kopi

Anda dapat membaca beberapa posting saya yang lain:

Putar Video YouTube di VLC dengan Hanya 1 Klik
Ubah File '.py' Anda menjadi '.exe' dengan Hanya 2 Perintah
Saya membuat kode skrip untuk mengunduh file "unduh terbatas" dari Google Drive

Untuk keraguan lebih lanjut dan lainnya, Anda dapat melakukan ping kepada saya di [email protected] ATAU temukan saya di Twitter .

Lebih banyak konten di plainenglish.io