API por Método Ajax

 

Uno de los secretos peor guardados sobre AJAX en la web es que la API subyacente XMLHttpRequestno se hizo para lo que hemos estado usando. Hemos hecho bien en crear API elegantes en torno a XHR, pero sabemos que podemos hacerlo mejor. Nuestro esfuerzo para mejorar es la fetchAPI. Echemos un vistazo básico al nuevo window.fetchmétodo, disponible ahora en Firefox y Chrome Canary.

XMLHttpRequest

En mi opinión, XHR es un poco complicado, y no me explique por qué «XML» está en mayúsculas, pero «Http» está hecho de camello. De todas formas, así es como usas XHR ahora:

// ¡Solo obtener XHR es un desastre! 
if  ( window . XMLHttpRequest )  {  // Mozilla, Safari, ... 
  request =  new  XMLHttpRequest ( ) ; 
}  else  if  ( ventana . ActiveXObject )  {  // IE 
  try  { 
    request =  new  ActiveXObject ( 'Msxml2.XMLHTTP' ) ; 
  }  
  catch  ( e )  { 
    try  { 
      request =  new ActiveXObject ( 'Microsoft.XMLHTTP' ) ; 
    }  
    catch  ( e )  { } 
  } 
}

// Abrir, enviar. 
solicitud . open ( 'GET' ,  'https://davidwalsh.name/ajax-endpoint' ,  verdadero ) ; 
solicitud . enviar ( nulo ) ;

Por supuesto, nuestros frameworks de JavaScript hacen que XHR sea más agradable para trabajar, pero lo que ves arriba es un  simple ejemplo del desastre de XHR.

fetchUso Básico

fetchAhora se proporciona una función en el windowalcance global , siendo el primer argumento la URL:

// url (obligatorio), opciones (opcional) 
fetch ( 'https://davidwalsh.name/some/url' ,  { 
	method :  'get' 
} ) . entonces ( función ( respuesta )  {
	
} ) . catch ( función ( err )  { 
	// Error :( 
} ) ;

Al igual que la API de la batería actualizada , la API de recuperación usa promesas de JavaScript para manejar los resultados / devoluciones de llamada:

// Simple respuesta de manejo 
fetch ( 'https://davidwalsh.name/some/url' ) . entonces ( función ( respuesta )  {
	
} ) . catch ( función ( err )  { 
	// Error :( 
} ) ;

// encadenamiento para un manejo más "avanzada" 
traiga ( 'https://davidwalsh.name/some/url' ) . luego ( función ( respuesta )  { 
	retorno  // ... 
} ) . then ( function ( returnedValue )  { 
	// ... 
} ) . catch ( función ( err )  { 
	// Error :( 
} ) ;

Si aún no está acostumbrado then, acostúmbrese, pronto estará en todas partes.

Encabezados de solicitud

La capacidad de establecer encabezados de solicitud es importante en la flexibilidad de la solicitud. Puede trabajar con encabezados de solicitud ejecutando new Headers():

// Crear una instancia de Headers vacía 
var headers =  new  Headers ( ) ;

// Agregue algunos encabezados de 
encabezados . append ( 'Content-Type' ,  'text / plain' ) ; 
cabeceras . append ( 'X-My-Custom-Header' ,  'CustomValue' ) ;

// Comprobar, obtener y establecer encabezados de valores de 
encabezado . tiene ( 'Content-Type' ) ;  // verdaderos 
encabezados . get ( 'Content-Type' ) ;  // 
encabezados "text / plain" . set ( 'Content-Type' ,  'application / json' ) ;

// Eliminar encabezados de 
encabezado . delete ( 'X-My-Custom-Header' ) ;

// Agregar valores iniciales 
var headers =  new  Headers ( { 
	'Content-Type' :  'text / plain' , 
	'X-My-Custom-Header' :  'CustomValue' 
} ) ;

Se pueden utilizar los append, has, get, set, y deletemétodos para modificar las cabeceras de solicitud. Para usar encabezados de solicitud, crea una Requestinstancia:

var request =  new  Request ( 'https://davidwalsh.name/some-url' ,  { 
	headers :  new  Headers ( { 
		'Content-Type' :  'text / plain' 
	} ) 
} ) ;

buscar ( solicitar ) . then ( function ( )  {  / * handle response * /  } ) ;

Vamos a echar un vistazo a lo que Responsey Requestlo hacen!

Solicitud

Una Requestinstancia representa la parte de solicitud de una fetchllamada. Al pasar fetcha Requestpuedes realizar solicitudes avanzadas y personalizadas:

• method– GET, POST, PUT, DELETE,HEAD
• url – URL de la solicitud
• headers– Headersobjeto asociado
• referrer – referente de la solicitud
• mode– cors, no-cors,same-origin
• credentials– ¿Deberían ir las cookies con la solicitud? omit,same-origin
• redirect– follow, error,manual
• integrity – valor de integridad del subcontrato
• cache– el modo de caché ( default, reload, no-cache)

Un Requestuso de muestra puede verse así:

var request =  new  Request ( 'https://davidwalsh.name/users.json' ,  { 
	method :  'POST' ,  
	modo :  'cors' ,  
	redirigir :  'follow' , 
	encabezados :  new  Headers ( { 
		'Content-Type') :  'text / plain' 
	} ) 
} ) ;

// ¡Ahora úsalo! 
buscar ( solicitar ) . then ( function ( )  {  / * handle response * /  } ) ;

Solo se requiere el primer parámetro, la URL. Cada propiedad se lee solo una vez que Requestse ha creado la instancia. También es importante tener en cuenta que Requesttiene un clonemétodo que es importante cuando se utiliza fetchdentro de la API de Service Worker: una solicitud es una transmisión y, por lo tanto, debe clonarse cuando se pasa a otra fetchllamada.

La fetchfirma, sin embargo, actúa como Requestsi también pudiera hacer:

fetch ( 'https://davidwalsh.name/users.json' ,  { 
	method :  'POST' ,  
	modo :  'cors' ,  
	redirección :  'follow' , 
	encabezados :  new  Headers ( { 
		'Content-Type' :  'text / plain ' 
	} ) 
} ) . then ( function ( )  {  / * handle response * /  } ) ;

Es probable que solo use Requestinstancias dentro de los trabajadores del servicio ya que las firmas Requesty fetchpueden ser las mismas. ¡Publicación de ServiceWorker próximamente!

Respuesta

El método de fetch‘s thenproporciona una Responseinstancia, pero también puede crear Responseobjetos manualmente usted mismo, otra situación que puede encontrar al usar trabajadores de servicio. Con a Responsepuedes configurar:

• type– basic,cors
• url
• useFinalURL– Boolean para if urles la URL final
• status– código de estado (por ejemplo: 200, 404, etc.)
• ok – Booleano para una respuesta exitosa (estado en el rango 200-299)
• statusText– código de estado (por ej . OK🙂
• headers – Objeto de encabezados asociado con la respuesta.

// Crea tu propia respuesta para la prueba del trabajador de servicio 
// nueva Respuesta (BODY, OPCIONES) 
var response =  new  Respuesta ( '.....' ,  { 
	ok :  falso , 
	estado :  404 , 
	url :  '/' 
} ) ;

// la zona de alcance del `then` consigue un ejemplo de respuesta de vuelta 
traiga ( 'https://davidwalsh.name/' ) 
	. then ( function ( responseObj )  { 
		console . log ( 'status:' , responseObj . status ) ; 
	} ) ;

El Responsetambién proporciona los siguientes métodos:

• clone() – Crea un clon de un objeto Response.
• error() – Devuelve un nuevo objeto de respuesta asociado con un error de red.
• redirect() – Crea una nueva respuesta con una URL diferente.
• arrayBuffer() – Devuelve una promesa que se resuelve con un ArrayBuffer.
• blob() – Devuelve una promesa que se resuelve con un Blob.
• formData() – Devuelve una promesa que se resuelve con un objeto FormData.
• json() – Devuelve una promesa que se resuelve con un objeto JSON.
• text() – Devuelve una promesa que se resuelve con un USVString (texto).

Manejo de JSON

Supongamos que realiza una solicitud de JSON: los datos de devolución de llamada resultantes tienen un jsonmétodo para convertir los datos sin formato a un objeto JavaScript:

fetch ( 'https://davidwalsh.name/demo/arsenal.json' ) . then ( function ( response )  {  
	// Convertir a JSON 
	return response . json ( ) ; 
} ) . then ( function ( j )  { 
	// Yay, `j` es una 
	consola de objetos JavaScript . log ( j ) ;  
} ) ;

Por supuesto que es simple JSON.parse(jsonString), pero el jsonmétodo es un atajo práctico.

Manejo de respuestas básicas de texto / HTML

JSON no siempre es el formato de respuesta de solicitud deseado así que aquí se explica cómo puede trabajar con una respuesta HTML o de texto:

fetch ( '/ next / page' ) 
  . luego ( función ( respuesta )  {
     respuesta de retorno . texto ( ) ; 
  } ) . luego ( función ( texto )  {  
  	// <! DOCTYPE .... 
  	consola . log ( texto ) ;  
  } ) ;

Puede obtener el texto de respuesta encadenando el thenmétodo Promesa junto con el text()método.

Manejo de respuestas de Blob

Si quiere cargar una imagen a través de fetch, por ejemplo, eso será un poco diferente:

fetch ( 'https://davidwalsh.name/flowers.jpg' ) 
	. luego ( función ( respuesta )  {
	   respuesta de retorno . blob ( ) ; 
	} ) 
	. then ( function ( imageBlob )  { 
	  document . querySelector ( 'img' ) . src = URL . createObjectURL ( imageBlob ) ; 
	} ) ;

El blob()método de Body Mixin toma una secuencia de respuesta y la lee hasta su finalización.

Publicar los datos del formulario

Otro caso de uso común para AJAX es el envío de datos del formulario: así es como se usaría fetchpara publicar los datos del formulario:

fetch ( 'https://davidwalsh.name/submit' ,  { 
	method :  'post' , 
	body :  new  FormData ( document . getElementById ( 'comment-form' ) ) 
} ) ;

Y si desea enviar JSON al servidor:

fetch ( 'https://davidwalsh.name/submit-json' ,  { 
	method :  'post' , 
	cuerpo : JSON . stringify ( { 
		email : document . getElementById ( 'email' ) . valor , 
		respuesta : documento . getElementById ( ' respuesta ' ) . valor
	 } ) 
} ) ;

¡Muy fácil, muy agradable a los ojos también!

Historia no escrita

Si bien fetches una API más agradable de usar, la API actual no permite cancelar una solicitud, lo que la convierte en un no arranque para muchos desarrolladores.

La nueva fetchAPI parece mucho más sana y simple de usar que XHR. Después de todo, fue creado para que pudiéramos hacer AJAX de la manera correcta; fetchtiene la ventaja de retrospectiva. No puedo esperar hasta que fetchsea ​​más ampliamente compatible.

Te esperamos en los siguientes artículos en donde hablaremos mas acerca de estos temas, los cuales hoy en día son de vital importancia en el mundo de la tecnología.