11528 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Fetch API et donnée en retour

Bonjour, j'ai un problème avec mon code ReactJS. 

function fetchMoviesToDiscover() {
       fetch(fetchUrl)
        .then(response => {
          response.json();
        })
        .then(data => {
          console.log(data);
        });
    }

    fetchMoviesToDiscover();


Je vais récupérer des données sur une API avec fetch sur React.
Le status est ok, le premier then me renvoie la promesse et je peut lire l'état de la promesse sans problème ainsi que le contenu.
Le second then ne m'affiche pas l'objet et du coup je ne peut l'intégrer au State.

quand je met les async await le résultat est identique.

Que faire ? merci de votre aide
Modérateur
Bonjour,

Pourquoi des {} autour de response.json(); ?

Essaie :
function fetchMoviesToDiscover() {
  fetch(fetchUrl)
    .then(response => response.json())
    .then(data => console.log(data));
}
fetchMoviesToDiscover();


Amicalement,
c'est une fonction qui fetch autant pour mon componentDidMount que plus tard si je clique sur un bouton
parsimonhi a écrit :
Bonjour,

Ces {} empêchent ton code de marcher comme tu l'attends !

Amicalement,


Salut, donc j'ai essayer sans les parenthèses et c'est le même résultat, merci d'avoir essayé.

  componentDidMount() {

   fetch(jsonUrl)
      .then(response => {
        response.json();
      })
      .then( data => {
        console.log("CDM", data);
      });
  }


PS: une explication du pourquoi cela ne marche pas au sein d'une fonction m'intéresse énormément.
Modérateur
Bonjour,
tankarasu a écrit :


Salut, donc j'ai essayer sans les parenthèses et c'est le même résultat, merci d'avoir essayé.

  componentDidMount() {

   fetch(jsonUrl)
      .then(response => {
        response.json();
      })
      .then( data => {
        console.log("CDM", data);
      });
  }


PS: une explication du pourquoi cela ne marche pas au sein d'une fonction m'intéresse énormément.


Décidément, tu ne lis pas avec attention. Relie mon tout premier post, et le code que j'ai proposé. Regarde-le avec attention. Ce sont les {} autour de response.json(); qui ne vont pas.

La raison, c'est que si tu mets des {} autour de response.json();, c'est interprété comme étant une fonction du genre :
function(response){
  response.json();
  return undefined;
}


Tandis que si tu ne mets pas les {}, c'est équivalent à la fonction :
function(response){
  return response.json();
}


Amicalement,
Je dois avouer que tu a raison et que je t'ai mal compris.
J'espère ne pas t'avoir froissé.
Effectivement il fonctionne, mais je ne comprends tjrs pas, je vais réfléchir dessus.


dans mon esprit on peut mettre une arrow function dans les parenthèses du then.

Merci pour ta patience
Modérateur
Bonjour,
tankarasu a écrit :
Je dois avouer que tu a raison et que je t'ai mal compris.
J'espère ne pas t'avoir froissé.

Ne t'inquiète pas. Depuis tout petit, je suis incompris Smiley smile

tankarasu a écrit :
Dans mon esprit on peut mettre une arrow function dans les parenthèses du then.


Tout à fait, tu peux utiliser une arrow function, mais avec la syntaxe appropriée. Si tu as un .then() ensuite à "alimenter", il faut que ton arrow function retourne quelque chose.

Soit tu écris ...

...
.then(response => response.json())
...

... ce qui renvoie le résultat de response.json() pour le .then() suivant

Soit éventuellement tu écris ...

...
.then(response => {return response.json();})
...

... ce qui renvoie aussi le résultat de response.json() pour le .then() suivant

Mais tu ne peux pas écrire dans ton cas ...

...
.then(response => {response.json();})
...

... car ça ne ne renvoie "rien" pour le .then() suivant

Amicalement,
Meilleure solution
Sujet clos
Aller à