Appliquez la notion

On souhaite récupérer les informations de plusieurs utilisateurs au moyen de l'API Fetch. On dispose des URL suivantes, que l'on souhaite parcourir et pour lesquelles on souhaite afficher les ressources associées dans la console.

1
let urls = [
2
  'https://reqres.in/api/users/2',
3
  'https://reqress.in/api/users/3',
4
  'https://reqres.in/api/users/23'
5
]
6
7
function fetchUrl(url) {
8
9
}
10
11
urls.forEach(url => fetchUrl(url))
Question
Complétez la méthode fetchUrl afin :
  • Qu'en cas de succès, on puisse récupérer et afficher le contenu de la réponse en JSON dans la console
  • Qu'en cas d'erreur lors de la récupération de la ressource (code différent de 200), on affiche un message en console "Une erreur est survenue, code erreur X" et qu'on retourne un objet vide
  • Qu'en cas d'erreur lors du traitement de l'appel (mauvaise URL, par exemple) on affiche l'erreur en console
Solution
1
let urls = [
2
  'https://reqres.in/api/users/2',
3
  'https://reqress.in/api/users/3',
4
  'https://reqres.in/api/users/23'
5
]
6
7
function fetchUrl(url) {
8
  fetch(url)
9
    .then((response) => {
10
        if(response.ok){
11
            return response.json();
12
        } else {
13
          console.log('Une erreur est survenue, code erreur ' + response.status)
14
          return {}
15
        }
16
    })
17
    .then((data) => {
18
        console.log(data);
19
    })
20
    .catch((error) => console.error(error)); //Traitement de l'erreur dans l'appel
21
}
22
23
urls.forEach(url => fetchUrl(url))