zl fetch

zlAmbil

zlFetch adalah pembungkus pengambilan yang memberi Anda cara mudah untuk membuat permintaan.

Fitur-fiturnya adalah sebagai berikut:

• Peningkatan kualitas hidup dibandingkan fungsi fetch asli

  • Gunakan respon segera tanpa menggunakan response.json() , response.text() , atau response.blob()
  • Penanganan kesalahan seperti janji — semua kesalahan 400 dan 500 diarahkan ke blok catch secara otomatis.
  • Penanganan kesalahan yang mudah ketika menggunakan await — kesalahan dapat dikembalikan sehingga Anda tidak perlu menulis blok try/catch .

• Peningkatan tambahan pada fungsi fetch asli

  • Header Content-Type disetel secara otomatis berdasarkan konten body .
  • Dapatkan semua yang Anda perlukan tentang respons Anda — headers , body , status , dan banyak lagi.
  • Debug permintaan Anda tanpa melihat panel Jaringan
  • Singkatan dari metode GET , POST , PUT , PATCH , dan DELETE
  • Pembantu untuk menghasilkan string kueri sehingga Anda tidak perlu dipusingkan dengan parameter kueri.
  • Menghasilkan header otorisasi dengan properti auth .
  • Buat instance untuk menampung url dan opsi sehingga Anda tidak perlu mengulanginya sendiri.

Catatan: zlFetch adalah perpustakaan ESM sejak v4.0.0 .

Menginstal zlFetch

Melalui npm (disarankan)

 # Installing through npm
npm install zl-fetch --save

Kemudian Anda dapat menggunakannya dengan mengimpornya ke file JavaScript Anda.

 import zlFetch from 'zl-fetch'

Menggunakan zlFetch tanpa npm :

Anda dapat mengimpor zlFetch langsung ke JavaScript melalui CDN.

Untuk melakukan ini, pertama-tama Anda perlu menyetel tipe script Anda ke module , lalu mengimpor zlFetch .

 < script type =" module " >
  import zlFetch from 'https://cdn.jsdelivr.net/npm/[email protected]/src/index.js'
</ script > 

Mulai Cepat

Anda dapat menggunakan zlFetch seperti fungsi fetch biasa. Satu-satunya perbedaan adalah Anda tidak perlu menulis metode response.json atau response.text lagi!

zlFetch menanganinya untuk Anda secara otomatis sehingga Anda dapat langsung menggunakan respons Anda.

 zlFetch ( 'url' )
  . then ( response => console . log ( response ) )
  . catch ( error => console . log ( error ) )

Metode singkat untuk GET, POST, PUT, PATCH, dan DELETE

zlFetch berisi metode singkat untuk metode REST umum ini sehingga Anda dapat menggunakannya dengan cepat.

 zlFetch . get ( /* some-url */ )
zlFetch . post ( /* some-url */ )
zlFetch . put ( /* some-url */ )
zlFetch . patch ( /* some-url */ )
zlFetch . delete ( /* some-url */ )

Jenis respons yang didukung

zlFetch mendukung tipe respons json , text , dan blob sehingga Anda tidak perlu menulis response.json() , response.text() atau response.blob() .

Jenis respons lainnya tidak didukung saat ini. Jika Anda perlu mendukung tipe respons lain, pertimbangkan untuk menggunakan pengendali respons Anda sendiri

Responsnya berisi semua data yang mungkin Anda perlukan

zlFetch mengirimi Anda semua data yang Anda perlukan di objek response . Ini termasuk yang berikut:

• headers : header respons
• body : badan tanggapan
• status : status respons
• statusText : teks status respons
• response : tanggapan asli dari Ambil

Kami melakukan ini sehingga Anda tidak perlu mengambil sendiri headers , status , statusText atau bahkan objek response lainnya.

Men-debug permintaan

Baru di v4.0.0 : Anda dapat men-debug objek permintaan dengan menambahkan opsi debug . Ini akan menampilkan objek debug yang berisi permintaan yang sedang dibuat.

• url
• method
• headers
• body

 zlFetch ( 'url' , { debug : true } )
  . then ( { debug } = > console . log ( debug ) )

Penanganan Kesalahan

zlFetch mengarahkan semua kesalahan 400 dan 500 ke metode catch . Kesalahan berisi informasi yang sama dengan respons.

• headers : header respons
• body : badan tanggapan
• status : status tanggapan
• statusText : teks status respons
• response : tanggapan asli dari pengambilan

Hal ini membuat zlFetch sangat mudah digunakan dengan janji.

 zlFetch ( 'some-url' ) . catch ( error => {
  /* Handle error */
} )

// The above request can be written in Fetch like this:
fetch ( 'some-url' )
  . then ( response => {
    if ( ! response . ok ) {
      Promise . reject ( response . json )
    }
  } )
  . catch ( error => {
    /* Handle error */
  } )

Penanganan kesalahan yang mudah saat menggunakan async / await

zlFetch memungkinkan Anda meneruskan semua kesalahan ke dalam objek errors . Anda dapat melakukan ini dengan menambahkan opsi returnError . Ini berguna ketika Anda banyak bekerja dengan async/await .

 const { response , error } = await zlFetch ( 'some-url' , { returnError : true } ) 

Fitur Bermanfaat

Pembantu string kueri

Anda dapat menambahkan query atau queries sebagai opsi dan zlFetch akan membuat string kueri untuk Anda secara otomatis. Gunakan ini dengan permintaan GET .

 zlFetch ( 'some-url' , {
  queries : {
    param1 : 'value1' ,
    param2 : 'to encode' ,
  } ,
} )

// The above request can be written in Fetch like this:
fetch ( 'url?param1=value1&param2=to%20encode' )

Pembuatan Content-Type berdasarkan konten body

zlFetch menyetel Content-Type dengan tepat bergantung pada data body Anda. Ini mendukung tiga jenis data:

• Obyek
• String Kueri
• Data Formulir

Jika Anda memasukkan object , zlFetch akan menyetel Content-Type ke application/json . Ini juga akan JSON.stringify tubuh Anda sehingga Anda tidak perlu melakukannya sendiri.

 zlFetch . post ( 'some-url' , {
  body : { message : 'Good game' } ,
} )

// The above request is equivalent to this
fetch ( 'some-url' , {
  method : 'post' ,
  headers : { 'Content-Type' : 'application/json' } ,
  body : JSON . stringify ( { message : 'Good game' } ) ,
} )

zlFetch berisi pembantu toObject yang memungkinkan Anda mengubah Data Formulir menjadi objek. Ini membuatnya sangat mudah untuk melakukan zlFetch dengan formulir.

 import { toObject } from 'zl-fetch'
const data = new FormData ( form . elements )

zlFetch ( 'some-url' , {
  body : toObject ( data ) ,
} )

Jika Anda memasukkan string, zlFetch akan menyetel Content-Type ke application/x-www-form-urlencoded .

zlFetch juga berisi metode toQueryString yang dapat membantu Anda mengonversi objek menjadi string kueri sehingga Anda dapat menggunakan opsi ini dengan mudah.

 import { toQueryString } from 'zl-fetch'

zlFetch . post ( 'some-url' , {
  body : toQueryString ( { message : 'Good game' } ) ,
} )

// The above request is equivalent to this
fetch ( 'some-url' , {
  method : 'post' ,
  headers : { 'Content-Type' : 'application/x-www-form-urlencoded' } ,
  body : 'message=Good%20game' ,
} )

Jika Anda meneruskan Data Formulir, zlFetch akan membiarkan fungsi fetch asli menangani Content-Type . Umumnya, ini akan menggunakan multipart/form-data dengan opsi default. Jika Anda menggunakan ini, pastikan server Anda dapat menerima multipart/form-data !

 import { toObject } from 'zl-fetch'
const data = new FormData ( form . elements )

zlFetch ( 'some-url' , { body : data } )

// The above request is equivalent to this
fetch ( 'some-url' , { body : data } )

// Your server should be able to receive multipart/form-data if you do this. If you're using Express, you can a middleware like multer to make this possible:
import multer from 'multer'
const upload = multer ( )
app . use ( upload . array ( ) )

Perubahan yang Melanggar di v5.0.0 : Jika Anda meneruskan header Content-Type , zlFetch tidak akan mengatur format konten isi Anda lagi. Kami berharap Anda dapat memasukkan tipe data yang benar. (Kami harus melakukan ini untuk mendukung API baru yang disebutkan di atas).

Pembantu header otorisasi

Jika Anda memberikan zlFetch properti auth , itu akan menghasilkan Header Otorisasi untuk Anda.

Jika Anda memasukkan string (umumnya untuk token), itu akan menghasilkan Bearer Auth.

 zlFetch ( 'some-url' , { auth : 'token12345' } )

// The above request can be written in Fetch like this:
fetch ( 'some-url' , {
  headers : { Authorization : `Bearer token12345` } ,
} )

Jika Anda meneruskan sebuah object , zlFetch akan menghasilkan Auth Dasar untuk Anda.

 zlFetch ( 'some-url' , {
  auth : {
    username : 'username'
    password : '12345678'
  }
} )

// The above request can be written in Fetch like this:
fetch ( 'some-url' , {
  headers : { Authorization : `Basic ${ btoa ( 'username:12345678' ) } ` }
} ) ;

Membuat Instans zlFetch

Anda dapat membuat instance zlFetch dengan opsi yang telah ditentukan sebelumnya. Ini sangat membantu jika Anda perlu mengirim permintaan dengan options atau url serupa.

• url diperlukan
• options adalah opsional

 import { createZLFetch } from 'zl-fetch'

// Creating the instance
const api = zlFetch ( baseUrl , options )

Semua contoh juga memiliki metode singkat.

 // Shorthand methods
const response = api . get ( /* ... */ )
const response = api . post ( /* ... */ )
const response = api . put ( /* ... */ )
const response = api . patch ( /* ... */ )
const response = api . delete ( /* ... */ )

Baru di v5.0.0

Anda sekarang dapat menggunakan instance zlFetch tanpa meneruskan URL. Ini berguna jika Anda telah membuat sebuah instance dengan titik akhir yang tepat.

 import { createZLFetch } from 'zl-fetch'

// Creating the instance
const api = zlFetch ( baseUrl , options )

Semua contoh juga memiliki metode singkat.

 // Shorthand methods
const response = api . get ( ) // Without URL, without options
const response = api . get ( 'some-url' ) // With URL, without options
const response = api . post ( 'some-url' , { body : 'message=good+game' } ) // With URL, with options
const response = api . post ( { body : 'message=good+game' } ) // Without URL, with options

Penangan respons khusus

Jika Anda ingin menangani respons yang tidak didukung oleh zlFetch, Anda dapat meneruskan customResponseParser: true ke dalam opsi. Ini mengembalikan respons dari permintaan Ambil normal tanpa perlakuan tambahan apa pun dari zlFetch. Anda kemudian dapat menggunakan response.json() atau metode lain yang Anda anggap cocok.

 const response = await zlFetch ( 'url' , {
  customResponseParser : true ,
} )
const data = await response . arrayBuffer ( )