Bonjour,

J'ai besoin de récupérer des informations pour ensuite exécuter une requete POST plus tard.

Ma question est simple. Pourquoi cela fonctionne :

fetch("A.php",{
	method: 'POST',
	credentials: "same-origin",
	body : params 
}).then(function(){
params.append("clé", 123);
fetch("B.php",{
	method: 'POST',
	credentials: "same-origin",
	body : params 
}).then(function(){
// C'est OK


}

});

Alors que ceci non:

fetch("A.php",{
	method: 'POST',
	credentials: "same-origin",
	body : params 
}).then(function(){
//Récupération de l'id pour le seconde requete
params.append("clé", 123);
}).then(
fetch("B.php",{
	method: 'POST',
	credentials: "same-origin",
	body : params 
}).then(function(){
// Pourquoi je ne retrouve pas le params.clé ?


}

});

 J'ai l'impression que l'ordre d’exécution n'est pas respecté.

Merci d'avance !

-
Edité par floutime 20 juillet 2019 à 19:23:39

Salut,

simplement car tu appelle deux fois then, tes deux fonctions vont être appelée presque simultanément, de manière asynchrone, le deuxième then ne va pas attendre la fin du premier pour s'éxecuter.

Il faut faire ta requête dans le même then.

-
Edité par lk77 22 juillet 2019 à 8:47:13

Ben si le principe de then est justement de contrôler l'ordre d’exécution. C'est juste que le premier devrait retourner la valeur dont le second à besoin.

Regarde bien le code, et la méthode then ligne 8. Cette dernière attend une fonction et tu lui passe une promesse (le retour du fetch). Les 2 codes suivants marchent chez moi même la seconde version, j'y croyait pas sur le coup :

const params = new FormData()
params.append('a', '123')

fetch('A.php', {
  method: 'POST',
  credentials: 'same-origin',
  body: params
}).then(function () {
  params.append('key', '456')

  fetch('B.php', {
    method: 'POST',
    credentials: 'same-origin',
    body: params
  }).then(function () {

  })
})

fetch('A.php', {
  method: 'POST',
  credentials: 'same-origin',
  body: params
}).then(function () {
  params.append('key', '456')
}).then(function () {
  fetch('B.php', {
    method: 'POST',
    credentials: 'same-origin',
    body: params
  }).then(function () {
    
  })
})

Mais personnellement je verrais le code plus comme ceci :

const params = new FormData()
params.append('a', '123')

fetch('A.php', {
  method: 'POST',
  credentials: 'same-origin',
  body: params
}).then(function () {
  params.append('key', '456')

  return fetch('B.php', {
    method: 'POST',
    credentials: 'same-origin',
    body: params
  })
}).then(function () {

})

Ou encore mieux avec async et await :

async function callScripts() {
  const params = new FormData()
  params.append('a', '123')

  const aResult = await fetch('A.php', {
    method: 'POST',
    credentials: 'same-origin',
    body: params
  })

  params.append('key', '456')
  const bResult = await fetch('B.php', {
    method: 'POST',
    credentials: 'same-origin',
    body: params
  })

  return 'un result'
}

callScripts().then((res) => {
  console.log(res)
})

Voilà dans l'idée

J'approuve l'usage de async await. Dès qu'on commence à chainer les requêtes asynchrones dans un ordre fixé, ça rend le code beaucoup plus lisible.

MatTheCat a écrit:

Ben si le principe de then est justement de contrôler l'ordre d’exécution. C'est juste que le premier devrait retourner la valeur dont le second à besoin.

il ne retourne pas de promise dans le premier then, donc il peut y avoir des surprises lors de l'execution du deuxieme:

Debut d'execution du then 1

Debut d'exection du then 2

Fin d'execution du then 1

Fin d'execution du then 2

les then successifs seront éxecutés dans l'ordre mais de façon asynchrone

-
Edité par lk77 22 juillet 2019 à 12:40:44

Ouais mais sa ligne 7 est synchrone.