Buscar..
Sintaxis
- promise = fetch (url) .then (función (respuesta) {})
- promesa = fetch (url, opciones)
- promesa = buscar
Parámetros
| Opciones | Detalles |
|---|---|
method | El método HTTP a utilizar para la solicitud. Ej: GET , POST , PUT , DELETE , HEAD . El valor predeterminado es GET . |
headers | Un objeto de Headers que contiene encabezados HTTP adicionales para incluir en la solicitud. |
body | La carga útil de solicitud, puede ser una string o un objeto FormData . Por defecto está undefined |
cache | El modo de almacenamiento en caché. default , reload , no-cache |
referrer | El referente de la solicitud. |
mode | cors , no-cors , del same-origin . Por defecto a no-cors . |
credentials | omit , same-origin , include . El valor predeterminado es omit . |
redirect | follow , error , manual . Por defecto follow . |
integrity | Metadatos de integridad asociados. El valor predeterminado es vaciar la cadena. |
Observaciones
El estándar Fetch define solicitudes, respuestas y el proceso que las vincula: obtención de datos.
Entre otras interfaces, el estándar define los objetos de Request y Response , diseñados para ser utilizados para todas las operaciones que involucran solicitudes de red.
Una aplicación útil de estas interfaces es GlobalFetch , que se puede usar para cargar recursos remotos.
Para los navegadores que aún no admiten el estándar Fetch, GitHub tiene un polyfill disponible. Además, también hay una implementación de Node.js que es útil para la consistencia servidor / cliente.
En ausencia de Promesas cancelables, no puede abortar la solicitud de búsqueda ( problema de github ). Pero hay una propuesta del T39 en la etapa 1 para promesas cancelables.
GlobalFetch
La interfaz GlobalFetch expone la función de fetch , que se puede utilizar para solicitar recursos.
fetch('/path/to/resource.json')
.then(response => {
if (!response.ok()) {
throw new Error("Request failed!");
}
return response.json();
})
.then(json => {
console.log(json);
});
El valor resuelto es un objeto de respuesta . Este objeto contiene el cuerpo de la respuesta, así como su estado y encabezados.
Establecer encabezados de solicitud
fetch('/example.json', {
headers: new Headers({
'Accept': 'text/plain',
'X-Your-Custom-Header': 'example value'
})
});
Datos POST
Datos de formulario de publicación
fetch(`/example/submit`, {
method: 'POST',
body: new FormData(document.getElementById('example-form'))
});
Publicar datos JSON
fetch(`/example/submit.json`, {
method: 'POST',
body: JSON.stringify({
email: document.getElementById('example-email').value,
comment: document.getElementById('example-comment').value
})
});
Enviar galletas
La función de búsqueda no envía cookies por defecto. Hay dos formas posibles de enviar cookies:
- Solo envíe cookies si la URL está en el mismo origen que el script de llamada.
fetch('/login', {
credentials: 'same-origin'
})
- Envíe siempre cookies, incluso para llamadas de origen cruzado.
fetch('https://otherdomain.com/login', {
credentials: 'include'
})
Obtención de datos JSON
// get some data from stackoverflow
fetch("https://api.stackexchange.com/2.2/questions/featured?order=desc&sort=activity&site=stackoverflow")
.then(resp => resp.json())
.then(json => console.log(json))
.catch(err => console.log(err));
Uso de Fetch para mostrar preguntas de la API de desbordamiento de pila
const url =
'http://api.stackexchange.com/2.2/questions?site=stackoverflow&tagged=javascript';
const questionList = document.createElement('ul');
document.body.appendChild(questionList);
const responseData = fetch(url).then(response => response.json());
responseData.then(({items, has_more, quota_max, quota_remaining}) => {
for (const {title, score, owner, link, answer_count} of items) {
const listItem = document.createElement('li');
questionList.appendChild(listItem);
const a = document.createElement('a');
listItem.appendChild(a);
a.href = link;
a.textContent = `[${score}] ${title} (by ${owner.display_name || 'somebody'})`
}
});
