Fetch API
La revisió el 16:07, 23 feb 2020 per Joan (discussió | contribucions) (→Fer la requesta d'una imatge)
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
<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.
Exercici de classe (febrer 2020)
LListar els dòlmens de Catalunya fent una consulta a OpenStreetMap:
creat per Joan Quintana Compte, febrer 2019
