zl fetch
v6.0.6
zlFetch es un complemento para la recuperación que le proporciona una manera conveniente de realizar solicitudes.
Sus características son las siguientes:
Mejoras en la calidad de vida con respecto a la función fetch nativa
response.json() , response.text() o response.blob()catch .await : se pueden devolver errores para que no tenga que escribir un bloque try/catch . Mejoras adicionales sobre la función fetch nativa
Content-Type se configuran automáticamente según el contenido body .headers , body , status y más.GET , POST , PUT , PATCH y DELETEauth . Nota: zlFetch es una biblioteca ESM desde v4.0.0 .
# Installing through npm
npm install zl-fetch --saveLuego puedes usarlo importándolo en tu archivo JavaScript.
import zlFetch from 'zl-fetch'zlFetch sin npm :Puede importar zlFetch directamente a JavaScript a través de una CDN.
Para hacer esto, primero debe configurar el tipo de script en module y luego importar zlFetch .
< script type =" module " >
import zlFetch from 'https://cdn.jsdelivr.net/npm/[email protected]/src/index.js'
</ script > Puede utilizar zlFetch como una función fetch normal. ¡La única diferencia es que ya no tienes que escribir un método response.json o response.text !
zlFetch lo maneja automáticamente para que pueda pasar directamente a usar su respuesta.
zlFetch ( 'url' )
. then ( response => console . log ( response ) )
. catch ( error => console . log ( error ) )zlFetch contiene métodos abreviados para estos métodos REST comunes para que pueda utilizarlos rápidamente.
zlFetch . get ( /* some-url */ )
zlFetch . post ( /* some-url */ )
zlFetch . put ( /* some-url */ )
zlFetch . patch ( /* some-url */ )
zlFetch . delete ( /* some-url */ ) zlFetch admite tipos de respuesta json , text y blob por lo que no es necesario escribir response.json() , response.text() o response.blob() .
Otros tipos de respuesta no son compatibles en este momento. Si necesita admitir otros tipos de respuestas, considere usar su propio controlador de respuestas
zlFetch le envía todos los datos que necesita en el objeto response . Esto incluye lo siguiente:
headers : encabezados de respuestabody : cuerpo de respuestastatus : estado de respuestastatusText : texto de estado de respuestaresponse : respuesta original de Fetch Hacemos esto para que usted no tenga que buscar los headers , status , statusText o incluso el resto del objeto response usted mismo.
Nuevo en v4.0.0 : puede depurar el objeto de solicitud agregando una opción debug . Esto revelará un objeto debug que contiene la solicitud que se está construyendo.
urlmethodheadersbody zlFetch ( 'url' , { debug : true } )
. then ( { debug } = > console . log ( debug ) ) zlFetch dirige todos los errores 400 y 500 al método catch . Los errores contienen la misma información que una respuesta.
headers : encabezados de respuestabody : cuerpo de respuestastatus : estado de respuestastatusText : texto de estado de respuestaresponse : respuesta original de buscarEsto hace que zlFetch sea muy fácil de usar con promesas.
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 */
} )async / await zlFetch le permite pasar todos los errores a un objeto errors . Puede hacer esto agregando una opción returnError . Esto es útil cuando trabajas mucho con async/await .
const { response , error } = await zlFetch ( 'some-url' , { returnError : true } ) Puede agregar query o queries como opción y zlFetch creará una cadena de consulta automáticamente. Utilice esto con solicitudes GET .
zlFetch ( 'some-url' , {
queries : {
param1 : 'value1' ,
param2 : 'to encode' ,
} ,
} )
// The above request can be written in Fetch like this:
fetch ( 'url?param1=value1¶m2=to%20encode' )Content-Type basada en el contenido body zlFetch establece Content-Type de forma adecuada según los datos de su body . Admite tres tipos de datos:
Si pasa un object , zlFetch establecerá Content-Type en application/json . También JSON.stringify su cuerpo para que no tenga que hacerlo usted mismo.
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 contiene un asistente toObject que le permite convertir datos de formulario en un objeto. Esto hace que sea muy fácil zlFetch con formularios.
import { toObject } from 'zl-fetch'
const data = new FormData ( form . elements )
zlFetch ( 'some-url' , {
body : toObject ( data ) ,
} ) Si pasa una cadena, zlFetch establecerá Content-Type en application/x-www-form-urlencoded .
zlFetch también contiene un método toQueryString que puede ayudarle a convertir objetos en cadenas de consulta para que pueda utilizar esta opción fácilmente.
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' ,
} ) Si pasa datos de formulario, zlFetch permitirá que la función fetch nativa maneje el Content-Type . Generalmente, esto utilizará multipart/form-data con las opciones predeterminadas. Si usa esto, asegúrese de que su servidor pueda recibir 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 ( ) ) Cambio importante en v5.0.0 : si pasa un encabezado Content-Type , zlFetch ya no establecerá el formato del contenido del cuerpo. Esperamos que pueda pasar el tipo de datos correcto. (Tuvimos que hacer esto para admitir la nueva API mencionada anteriormente).
Si proporciona a zlFetch una propiedad auth , generará un encabezado de autorización.
Si pasa una string (comúnmente para tokens), generará una autenticación de portador.
zlFetch ( 'some-url' , { auth : 'token12345' } )
// The above request can be written in Fetch like this:
fetch ( 'some-url' , {
headers : { Authorization : `Bearer token12345` } ,
} ) Si pasa un object , zlFetch generará una autenticación básica para usted.
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' ) } ` }
} ) ; Puede crear una instancia de zlFetch con opciones predefinidas. Esto es muy útil si necesita enviar solicitudes con options o url similares.
urloptions son opcionales import { createZLFetch } from 'zl-fetch'
// Creating the instance
const api = zlFetch ( baseUrl , options )Todas las instancias también tienen métodos abreviados.
// Shorthand methods
const response = api . get ( /* ... */ )
const response = api . post ( /* ... */ )
const response = api . put ( /* ... */ )
const response = api . patch ( /* ... */ )
const response = api . delete ( /* ... */ ) Nuevo en v5.0.0
Ahora puede utilizar una instancia zlFetch sin pasar una URL. Esto es útil si ha creado una instancia con los puntos finales correctos.
import { createZLFetch } from 'zl-fetch'
// Creating the instance
const api = zlFetch ( baseUrl , options )Todas las instancias también tienen métodos abreviados.
// 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 Si desea manejar una respuesta no admitida por zlFetch, puede pasar customResponseParser: true a las opciones. Esto devuelve la respuesta de una solicitud Fetch normal sin ningún tratamiento adicional de zlFetch. Luego puede utilizar response.json() u otros métodos que considere oportunos.
const response = await zlFetch ( 'url' , {
customResponseParser : true ,
} )
const data = await response . arrayBuffer ( )
