Fetch API
Contingut
Referències
Modern Asynchronous Javascript with Async and Await
- https://davidwalsh.name/fetch
- https://developers.google.com/web/ilt/pwa/working-with-the-fetch-api
- https://flaviocopes.com/javascript-async-await/#why-were-asyncawait-introduced
- https://medium.com/letsboot/basics-using-ajax-with-fetch-api-b2218b0b9691
- https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch
working with promises:
Guió
1. exemples bàsics amb XMLHttpRequest (text i JSON)
- XMLHttpRequest_text.html
- XMLHttpRequest_json.html
- XMLHttpRequest_php.html
2. els mateixos exemples amb Fetch API
- fetch_api_text.html
- fetch_api_json.html
- fetch_api_json2.html
- fetch_api_php.html
3. exemple GET
- fetch_api_get_method.html
4. exemple POST
- fetch_api_post_method.html
5. Form data
The body data could also be extracted from a form using the FormData interface. For example, the above code could be updated to:
- fetch_api_form_data.html
Exemples vistos a classe
Prova de fer i entendre tots els exercicis vistos a classe:
Fer la requesta d'una imatge (Exercici de classe, març 2022)
<html>
<head>
<meta charset="UTF-8">
<title>Fetch API</title>
<script>
fetch('kobe-bryant.jpg')
.then(function(response) {
return response.blob();
})
.then(function(imageBlob) {
document.getElementById('foto').src = URL.createObjectURL(imageBlob);
});
</script>
</head>
<body>
<h1>Fetch API (BLOB)</h1>
<img id="foto" />
</body>
</html>
En aquest cas, la imatge resideix en la mateixa màquina local. Aquests exercicis que hem fet són més interessants si podem accedir a scripts i fitxers que resideixen en un servidor remot.
Recorda que el codi l'has de provar a través d'un servidor web (Apache):
Exercici de classe (març 2022)
Llistar els dòlmens de Catalunya fent una consulta a OpenStreetMap:
solució: dolments.html:
<html>
<head>
<meta charset="UTF-8">
<title>Fetch API</title>
<script>
fetch('http://overpass-api.de/api/interpreter?data=%5Bout%3Ajson%5D%3Barea%283600349053%29%2D%3E%2Eboundaryarea%3B%28node%5B%22historic%22%3D%22archaeological%5Fsite%22%5D%5B%22site%5Ftype%22%3D%22megalith%22%5D%28area%2Eboundaryarea%29%3B%29%3Bout%20meta%3B%0A')
.then(function(response) {
return response.json(); //json() en comptes de text(). //Returns a promise that resolves with a JSON object
})
.then(function(myJSON) {
console.log(myJSON);
//cad +==myJSON.elements.length;
let cad_dolmens = "<ul>";
for (let i=0;i<myJSON.elements.length;i++) {
cad_dolmens += "<li>" + myJSON.elements[i].tags.name + "</li>";
}
cad_dolmens += "</ul>";
document.getElementById("resposta").innerHTML = cad_dolmens;
})
.catch(function(error) {
console.log(error)
});
</script>
</head>
<body>
<h1>Fetch API (JSON)</h1>
<div id="resposta"><img src="./img/ajax_wait.gif"></div>
</body>
</html>
creat per Joan Quintana Compte, març 2022
