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:
