Parameter kedua di fetch()

Saat kami mencoba menggunakan fetch()fungsi di kelas, kami cenderung menggunakannya untuk mendapatkan data dari API di situs web.

https://reqres.in/adalah situs web yang menyediakan API bagi pengembang untuk menguji kode mereka. Pengembang dapat menguji berbagai metode HTTP dan mendapatkan respons nyata tetapi data palsu (REQRES, 2023). Kami akan menggunakan situs web ini untuk menguji kode kami beberapa kali.

Misalnya, kita bisa mendapatkan data palsu untuk mengetahui nama penggunanyahttps://reqres.in/dengan fetch().

Jika Anda mengklik tombol Test fetch() to Get data , fetch akan mencoba mendapatkan data dari 'https://reqres.in/api/users/2'dengan metode GET. Anda dapat melihat "Janet" ditambahkan di bawah ini.

Namun, pengambilan tidak hanya dapat digunakan untuk mengambil data. Ini memiliki parameter kedua yang memungkinkan Anda menyesuaikan apa yang ingin Anda lakukan dengan fungsi pengambilan.

Ini opsional , jadi Anda dapat mengabaikannya sepenuhnya, dan masih berfungsi untuk mendapatkan data, seperti yang kami lakukan sebelumnya.

Parameter kedua harus berupa objek . Dan di dalam objek ini, Anda dapat menyertakan beberapa sub-parameter, termasuk body, header, method… (MDN, 2023).

Ada sebuah contoh:

const secondParameter = {
  method : 'POST',
  body : JSON.stringify({
    "name": "morpheus",
    "job": "leader"
   }),
  };

Jadi, bagaimana kita menggunakannya?

Dalam contoh ini, setelah pengguna mengklik tombol Test Post, aplikasi kita akan memposting nama dan pekerjaan pengguna ke server. Dan akan ada stempel waktu di bawah untuk memberi tahu pengguna waktu pembuatan.

.catch((kesalahan) =>{})

Seperti yang kita semua tahu, fungsi fetch() akan mengembalikan a Promise Object. Namun, bagaimana jika server tidak merespon dan janji tidak terpenuhi?

Akan ada kesalahan!

Jadi kita perlu menggunakan catch((error) => {})untuk menangkap kesalahan agar tidak mogok.

Mari kita lihat contoh kodenya.

Dalam contoh ini, saya 'tidak sengaja' mendapat tautan yang salah. Jadi janji tidak akan terpenuhi, dan akan ada kesalahan. Jadi jika pengguna mengklik tombol Test Post, konsol akan mencetak 'Error!!!'.

Lebih banyak penggunaan objek Response

Kami membahas situasi ketika ada kesalahan, dan Promise Object tidak terpenuhi. Tetapi jika objek janji yang dikembalikan oleh fetch()dipenuhi, itu akan mengembalikan objek Respons .

Ada beberapa properti instance (MDN, 2023):

• Response.ok
• Response.status
• Response.statusTeks
• Response.url
• …

Saya menggunakan Response.status, yang mengembalikan kode status HTTP, dan Response.ok, yang mengembalikan nilai boolean , kita dapat melihat apakah pengambilan berhasil.

Untuk contoh ini, jika pengguna mengklik tombol Test Post, akan ada kode status HTTP dan nilai boolean untuk melihat apakah berhasil.

Membatalkan pengambilan

Pengguna juga dapat membatalkan pengambilan dengan menggunakan AbortController Object.

Kita perlu membuat secara AbortController Objectterpisah.

let controller = new AbortController();

Jadi parameter kedua kita yang baru adalah:

const secondParameter = {
  method : 'POST',
  body : JSON.stringify({
    "name": "morpheus",
    "job": "leader"
   }),
  signal: controller.signal
  };

Saya menetapkan interval untuk melakukan abort(). Jadi ketika saya mengklik batalkan terlebih dahulu, dan Test Post akan melempar AbortError di konsol. Dan status dan kode HTTP tidak akan ditampilkan di bawah tombol Test Post seperti yang kita lakukan sebelumnya.

Referensi

MDN. (2023). Fetch() — api web: MDN. API Web | MDN. Diakses 31 Maret 2023, darihttps://developer.mozilla.org/en-US/docs/Web/API/fetch

REQRES. (2023). Rest-API yang dihosting siap untuk menanggapi permintaan Ajax Anda. Reqres. Diakses 31 Maret 2023, darihttps://reqres.in/

MDN. (2023). Tanggapan — api web: MDN. API Web | MDN. Diakses 31 Maret 2023, darihttps://developer.mozilla.org/en-US/docs/Web/API/Response

MDN. (2023). Abortcontroller — api web: MDN. API Web | MDN. Diakses 31 Maret 2023, darihttps://developer.mozilla.org/en-US/docs/Web/API/AbortController