Exemples de comment obtenir des données json à partir d'une URL en utilisant uniquement vanilla javascript:
Vidéo : conseils pour utiliser Async/Wait en JavaScript
Je cherchais à supprimer JQuery et à le remplacer uniquement par du javascript pour augmenter la vitesse d'un site Web (notamment en remplaçant tous les appels ajax qui récupèrent les données json depuis une url). J'ai trouvé beaucoup de documentations en ligne (voir les références ci-dessous) mais la vidéo (en anglais) youtube suivante de James Q. Quick résume très bien le tout :
Obtenir des données json à partir d'une URL à l'aide de l'API Fetch
Une première solution consiste à utiliser Fetch API. Un exemple ici avec données json stockées sur github:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script>
const url = 'https://raw.githubusercontent.com/benjamin-hg-marchant/datasets/main/modis_cloud_phase_time_series_analysis.json'
fetch(url)
.then( res => { return res.json(); } )
.then( data => { console.log(data); } )
.catch( err => { console.errror(error) } )
</script>
</body>
</html>
Obtenir des données json à partir d'une URL à l'aide d'une fonction asynchrone
Une autre approche consiste à utiliser await (Notez que await doit toujours être utilisé dans une fonction asynchrone)
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script>
const LoadData = async () => {
try {
const url = 'https://raw.githubusercontent.com/benjamin-hg-marchant/datasets/main/modis_cloud_phase_time_series_analysis.json'
const res = await fetch(url);
const data = await res.json();
console.log(data);
}catch(err) {
console.error(err)
}
};
LoadData();
</script>
</body>
</html>
Notez que la fonction LoadData renvoie une promesse ("promise") et peut ensuite être utilisée dans une autre fonction asynchrone :
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script>
const LoadData = async () => {
try {
const url = 'https://raw.githubusercontent.com/benjamin-hg-marchant/datasets/main/modis_cloud_phase_time_series_analysis.json'
const res = await fetch(url);
const data = await res.json();
console.log(data);
}catch(err) {
console.error(err)
}
};
( async () => {
const data = await LoadData();
console.log(data);
} )();
</script>
</body>
</html>
Une autre approche utilisant "then":
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script>
const LoadData = async () => {
try {
const url = 'https://raw.githubusercontent.com/benjamin-hg-marchant/datasets/main/modis_cloud_phase_time_series_analysis.json'
const res = await fetch(url);
const data = await res.json();
console.log(data);
}catch(err) {
console.error(err)
}
};
LoadData().then( (data) => console.log(data) );
</script>
</body>
</html>
Créer une requête non mise en cache
Notez que l'en-tête peut être spécifié dans l'API de récupération pour créer une requête non mise en cache côté client par exemple (voir fetch(), comment faire une requête non mise en cache ?, [Fetch PUT request obtient l'en-tête Cache-Control modifié sur Firefox et non Chrome] (https://stackoverflow.com/questions/62041565/fetch-put-request-gets-cache-control-header-modified-on-firefox-and-not-chrome) et Récupérer la réponse de mise en cache - les en-têtes sans cache ne fonctionnent pas comme prévu :
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script>
const LoadData = async () => {
try {
const url = 'https://raw.githubusercontent.com/benjamin-hg-marchant/datasets/main/modis_cloud_phase_time_series_analysis.json'
const res = await fetch(url,{
method: 'GET', // *GET, POST, PUT, DELETE, etc.
mode: 'cors', // no-cors, *cors, same-origin
cache: 'no-cache'});
const data = await res.json();
//console.log(data);
return data;
}catch(err) {
console.error(err)
}
};
LoadData().then( (data) => console.log(data) );
</script>
</body>
</html>
Références
- How to Get JSON Data from a URL in JavaScript?
- JavaScript read JSON from URL
- Tips For Using Async/Await in JavaScript
- That's so fetch!
- Fetch API
- Get json data from url and put it into variable by JavaScript
- Using the Fetch API
- Get JSON From URL in JavaScript
- The Fetch API performance vs. XHR in vanilla JS
- How to use Async Await in JavaScript
- Solve - await is only valid in Async Functions Error in JS