Interpretación del método de búsqueda en h5 (resumen)

Como nuevo objeto en H5, fetch nació para reemplazar la existencia de ajax. Su objetivo principal es simplemente combinarlo con ServiceWorkers para lograr las siguientes optimizaciones:

1. Optimizar la experiencia fuera de línea
2. Mantente escalable

Por supuesto, si ServiceWorkers coopera con la base de datos del lado del navegador IndexedDB, felicitaciones, cada navegador puede convertirse en un servidor proxy. (Sin embargo, no creo que esto sea algo bueno. Hará que el front-end sea cada vez más pesado, siguiendo el antiguo camino de la arquitectura c/s anterior)

Dado que es un método nuevo de h5, debe haber algunos navegadores más antiguos que no lo admitan.

El navegador necesita agregar un polyfill adicional:

[Enlace]: https://github.com/fis-components/whatwg-fetch

buscar(buscar):

HTML:

 fetch('/users.html') // Lo que se devuelve aquí es un objeto Promise. Los navegadores que no lo admiten deben usar el ployfill correspondiente o transcodificar a través de babel y otros transcodificadores antes de ejecutar then(function(response) { return. respuesta .text()}) .then(function(body) { document.body.innerHTML = body})

JSON:

 fetch('/users.json') .then(function(response) { return respuesta.json()}) .then(function(json) { console.log('json analizado', json)}) .catch(function (ej) { console.log('error de análisis', ex)})

Metadatos de respuesta:

 fetch('/users.json').then(function(response) { console.log(response.headers.get('Content-Type')) console.log(response.headers.get('Fecha')) consola .log(respuesta.status) console.log(respuesta.statusText)})

Formulario de publicación:

 var formulario = document.querySelector('formulario')fetch('/usuarios', {método: 'POST', cuerpo: nuevo FormData(formulario)})

Publicar JSON:

 fetch('/usuarios', { método: 'POST', encabezados: { 'Aceptar': 'aplicación/json', 'Tipo de contenido': 'aplicación/json' }, cuerpo: JSON.stringify({ //aquí ¿Es el nombre del cuerpo de la solicitud de la solicitud de publicación: 'Hubot', inicio de sesión: 'hubot', })})

Carga de archivos:

 var input = document.querySelector('input[type=file]')var data = new FormData()data.append('file', input.files[0]) //Obtiene el contenido del archivo seleccionado data.append( ' usuario', 'hubot')fetch('/avatars', {método: 'POST', cuerpo: datos})

(1) Diferencias con ajax:

1. El método de parche no arrojará un error al capturar datos, ni siquiera un error 404 o 500, a menos que sea un error de red o el proceso de solicitud se interrumpa. Pero por supuesto que hay una solución, aquí está la demostración:

 function checkStatus(response) { if (response.status >= 200 && Response.status < 300) { //Determina si el código de estado de respuesta es normal return respuesta //Devuelve el objeto de respuesta original normalmente} else { var error = new Error (respuesta .statusText) // Si es anormal, se generará un mensaje de estado de error de respuesta error.response = error de respuesta }}function parseJSON(respuesta) { return respuesta.json()}fetch('/usuarios') .then(checkStatus) .then(parseJSON) .then(function(data) { console.log('solicitud exitosa con respuesta JSON', datos) }).catch( function(error) { console.log('solicitud fallida', error) })

2. Un problema muy crítico es que el método de recuperación no envía cookies, lo cual es muy fatal cuando es necesario mantener una conexión constante entre el cliente y el servidor, porque el servidor necesita identificar una sesión a través de cookies para mantener la sesión. Estado Si desea enviar cookies es necesario modificar la información:

 fetch('/users', {credenciales: 'same-origin' //Enviar cookies en el mismo dominio})fetch('https://segmentfault.com', {credenciales: 'include' //Enviar cookies entre dominios} )

La siguiente figura es el resultado del acceso entre dominios al segmento.

Al menos, la URL solicitada y la URL de respuesta son las mismas, pero si se realiza una operación como la redirección, la URL de respuesta puede ser diferente. En XHR, es posible que la URL de respuesta después de la redirección no sea precisa. : respuesta.headers['X-Request-URL'] = request.url es adecuado para (Firefox <32, Chrome <37, Safari o IE).

Lo anterior es el contenido completo de este artículo. Espero que sea útil para el estudio de todos. También espero que todos apoyen VeVb Wulin Network.