El método fetch() en JavaScript se usa para solicitar al servidor y cargar la información en las páginas web. La solicitud puede ser de cualquier API que devuelva los datos del formato JSON o XML. Este método devuelve una promesa.
Sintaxis:
fetch('url') //api for the get request .then(response => response.json()) .then(data => console.log(data));
Parámetros: este método acepta dos parámetros, como se mencionó anteriormente y se describe a continuación:
- URL: Es la URL a la que se va a realizar la solicitud.
- Opciones: Es una array de propiedades. Es un parámetro opcional .
Valor de retorno: Devuelve una promesa ya sea que se resuelva o no. Los datos de retorno pueden tener el formato JSON o XML. Puede ser una array de objetos o simplemente un solo objeto.
Ejemplo 1:
NOTA: Sin opciones, Fetch siempre actuará como una solicitud de obtención.
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>JavaScript | fetch() Method</title> </head> <body> <script> // 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) }) </script> </body> </html>
Producción:
Hacer una solicitud de publicación usando Fetch: Las requests de publicación se pueden hacer usando fetch dando opciones como se indica a continuación:
let options = { method: 'POST', headers: { 'Content-Type': 'application/json;charset=utf-8' }, body: JSON.stringify(data) }
Ejemplo 2:
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>JavaScript | fetch() Method</title> </head> <body> <script> user = { "name": "Geeks for Geeks", "age": "23" } // Options to be given as parameter // in fetch for making requests // other then GET let options = { method: 'POST', headers: { 'Content-Type': 'application/json;charset=utf-8' }, body: JSON.stringify(user) } // Fake api for making post requests let fetchRes = fetch( "http://dummy.restapiexample.com/api/v1/create", options); fetchRes.then(res => res.json()).then(d => { console.log(d) }) </script> </body> </html>
Producción: