El JavaScriptfetch()>mètode utilitzat per recuperar recursos d'un servidor. Retorna una Promesa, resolent a l'objecte Resposta, que encapsula la resposta del servidor a la sol·licitud.fetch()>facilita tant la realització de sol·licituds GET, que normalment s'utilitzen per obtenir dades, i PUBLICACIÓ sol·licituds, utilitzades per enviar dades als servidors.
A més, fetch()> integra perfectament avançat HTTP funcionalitats com ara Compartició de recursos entre orígens (CORS) i altres extensions, enriquint l'experiència de desenvolupament web amb seguretat i interoperabilitat millorades.
Nota: l'API Fetch inclou el mètode fetch(), que s'utilitza per obtenir dades de diferents fonts.
Sintaxi:
gimp guarda com a jpeg
fetch('url') // api for the get request .then(response =>response.json()) .then(dades => console.log(dades));>Paràmetres:
- URL: L'URL a la qual s'ha de fer la sol·licitud.
- Opcions: És un conjunt de propietats. És un opcional paràmetre. Les opcions disponibles són:
- Mètode: Especifica el mètode HTTP per a la sol·licitud. (pot ser GET, POST, PUT o DELETE)
- Capçaleres
- Cos: Dades a enviar amb la sol·licitud.
- Mode: Especifica el mode de sol·licitud (p. ex. cors, nocors, del mateix origen, etc.)
- Credencials : especifica si s'han d'enviar les credencials d'usuari (galetes, capçaleres d'autenticació, etc.) amb la sol·licitud.
Exemples de mètodes JavaScript fetch().
Vegem alguns dels exemples del mètode fetch. Aquests exemples us proporcionen una comprensió completa del mètode fetch a JavaScript.
1 . Obteniu la sol·licitud mitjançant Fetch
Aquest exemple mostra com fer una sol·licitud Get en el mètode fetch.
Nota: Sense opcions, Fetch sempre actuarà com a sol·licitud d'obtenció.
Javascript
// API for get requests let fetchRes = fetch( 'https://jsonplaceholder.typicode.com/todos/1'); // FetchRes is the promise to resolve // it by using.then() method fetchRes.then(res =>res.json()).then(d => { console.log(d) })> Sortida:
Explicació:
- La funció JS fetch() s'utilitza per enviar una sol·licitud GET a l'URL https://jsonplaceholder.typicode.com/todos/1. Aquesta funció retorna una Promesa que es resol en un objecte Response que representa la resposta a la sol·licitud.
- El mètode then() està encadenat a la crida fetch() per gestionar la resposta de manera asíncrona. Dins de la funció de devolució de trucada passat a then(), es crida al mètode res.json() per analitzar el cos de la resposta com a JSON. Aquest mètode també retorna una promesa que es resol a les dades JSON analitzades.
- Un altre mètode then() està encadenat per gestionar les dades JSON analitzades. Dins de la seva funció de devolució de trucada, les dades JSON analitzades d es registren a la consola mitjançant console.log()
2 . S'està utilitzant Fetch per publicar dades JSON
En aquest exemple, hem penjat dades JSON mitjançant l'API fetch() a JavaScript, podeu establir el cos de la sol·licitud en una versió JSON de les vostres dades i establir les capçaleres adequades per indicar que esteu enviant JSON.
Les sol·licituds de publicació es poden fer utilitzant fetch donant les opcions que s'indiquen a continuació:
let options = { method: 'POST', headers: { 'Content-Type': 'application/json;charset=utf-8' }, body: JSON.stringify(data) }>Després de comprovar la sintaxi de la sol·licitud de publicació, mireu l'exemple següent que demostra l'ús de la sol·licitud de publicació al mètode fetch.
Javascript // Your JSON data const jsonData = { key1: 'value1', key2: 'value2' }; // Set up options for the fetch request const options = { method: 'POST', headers: { 'Content-Type': 'application/json' // Set content type to JSON }, body: JSON.stringify(jsonData) // Convert JSON data to a string and set it as the request body }; // Make the fetch request with the provided options fetch('https://api.example.com/upload', options) .then(response =>{ // Comproveu si la sol·licitud va tenir èxit si (!response.ok) { throw new Error('La resposta de la xarxa no va ser correcta'); } // Analitzeu la resposta com a JSON return response.json(); }) .then(data => { // Gestionar les dades JSON console.log(data); }) .catch(error => { // Gestionar qualsevol error que s'hagi produït durant la recuperació console.error('Error d'obtenció: ', error });>>> Explicació:
- Definim les teves dades JSON.
- Configurem opcions per a la sol·licitud d'obtenció, inclòs el mètode establert a 'POST', la capçalera Content-Type establerta a 'aplicació/json' i el cos establert a la versió JSON de les vostres dades.
- Fem la sol·licitud fetch amb les opcions proporcionades mitjançant la funció fetch().
- La resta del codi segueix sent el mateix que abans, gestionant la resposta i qualsevol error que es produeixi durant la recuperació.
3. Avortant una sol·licitud de recuperació
Podeu utilitzar el AbortController i Interfície AbortSignal per avortar una sol·licitud de recuperació en JavaScript.
Javascript{ controller.abort(); // Avorta la sol·licitud d'obtenció console.log('La sol·licitud d'obtenció s'ha esgotat'); }, 5000); // Gestiona la sol·licitud de recuperació fetchPromise .then(response => { // Comprova si la sol·licitud ha tingut èxit si (!response.ok) { throw new Error('La resposta de la xarxa no ha estat correcta'); } // Analitza el resposta com a JSON retorna response.json(); .then(data => { // Gestionar les dades JSON console.log(data); }) .catch(error => { // Gestionar els errors fetch console.error('Fetch error:', error }) .finally(() => { clearTimeout(timeoutId); // Esborra el temps d'espera });>>> Explicació:
- Creem una nova instància AbortController i obtenim el seu senyal.
- Fem la sol·licitud de recuperació mitjançant fetch() amb les opcions proporcionades.
- Hem establert un temps d'espera de 5 segons utilitzant setTimeout() per avortar la sol·licitud de recuperació si triga massa.
- Dins de la devolució del temps d'espera, cridem a controller.abort() per avortar la sol·licitud de recuperació.
- Gestionem la sol·licitud d'obtenció com de costum, inclosa l'anàlisi de la resposta i la gestió dels errors.
- Finalment, al bloc finally(), esborram el temps d'espera mitjançant clearTimeout() per evitar que s'activi si la sol·licitud de recuperació es completa abans que expiri el temps d'espera.
Enviament d'una sol·licitud incloses les credencials
Per enviar una sol·licitud incloses les credencials, com ara galetes , en una sol·licitud d'obtenció, podeu establir la propietat de credencials perquè s'inclogui.
fetch('https://example.com', { credentials: 'include', });> Si només voleu enviar credencials si l'URL de la sol·licitud es troba al mateix origen que l'script de trucada, afegiu credencials: 'mateix origen'.
Casos d'ús del mètode JavaScript fetch().
Aquests són alguns dels casos d'ús del mètode fetch. Aquests són problemes habituals als quals s'enfronten els desenvolupadors principiants quan treballen amb Fetch.
1. Com utilitzar JavaScript Fetch API per obtenir dades
La sol·licitud d'obtenció de JavaScript s'utilitza per recuperar dades d'un servidor. Per utilitzar l'API Fetch a JavaScript per obtenir dades d'un servidor, podeu fer una sol·licitud GET a l'URL desitjat i gestionar la resposta.
2. Mètode Get and Post mitjançant Fetch API
Es pot utilitzar un mètode fetch() amb qualsevol tipus de sol·licitud, com ara PUBLICACIÓ , ACONSEGUIR , POSA, i ELIMINAR , El mètode GET utilitza l'API fetch
3. Diferència entre Fetch i Axios per fer sol·licituds http
Axios és un paquet autònom de tercers que es pot instal·lar fàcilment i Fetch està integrat a la majoria dels navegadors moderns; no es requereix cap instal·lació com a tal.
Navegadors compatibles:
saira banu actor
JavaScript Fetch és un ECMAScript6 (ES6) característica i és compatible amb gairebé tots els navegadors moderns com:
- Google Chrome
- Edge
- Firefox
- Òpera
- Safari