Discussion :

[clickandgo]

Bonjour à tous,

J'utilise dans mon projet 3 fetch consécutifs :

Premier fetch : déclenché au choix d'un onglet et qui ramène une portion de formulaire spécifique (boutons et input de dates)
Deuxième fetch : ramène le data et l'affiche dans la portion du formulaire prévue à cet effet

Je me trouve confronté au fait que le deuxième fetch n'attend pas que le premier ait fini de s’exécuter ce qui fait bien évidement que les éléments de la page ne sont pas tous disponibles à ce moment précis ... (cas classique ...)
J'ai pour l'instant détourné le problème en créant un timeout (voir le commentaire : "filtrer au click sur un onglet" dans la fonction "onglets.js") ce qui n'est pas propre et encore moins fiable !

J'aimerai savoir comment attendre l’exécution du premier fetch et vérifier l'existence des éléments dans la page avant que le deuxième "agenda-semaine.js" ne soit exécuté ...

J'ai essayé en rajoutant un .then dans le premier fetch puis en le transformant en fonction asynchrone mais je dois louper quelque chose car je n'arrive pas à lier une fonction à l'autre et créer un contrôle d’exécution.

Je suppose qu'il faut rajouter une fonction callback ?

Merci d'avance pour votre précieuse aide

Premier fetch ("onglets.js") :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
const tabContent = document.querySelector(".tabs__content");
const radButtons = document.querySelectorAll(".tabs__radio");
export { tabContent, radButtons };
import { agendaSemaine } from "./agenda-semaine.js";
 
window.onload = () => {
  const fetchFirstTabUrl = radButtons[0].dataset.url;
 
  //fonction filtre selon l'onglet actif choisi
  const filtrerOnglet = async (url) => {
    let reponse = await fetch(url, {
      method: "POST",
      cache: "no-cache",
      headers: {
        "X-Requested-With": "XMLHttpRequest",
        // "Content-Type": "Application/json",
      },
    })
      .then((response) => response.json())
      .then((data) => {
        tabContent.innerHTML = data.content;
      })
      .catch((error) => alert("Erreur : " + error));
    return reponse;
  };
 
  //Chargement du premier onglet au démarrage
  const url = fetchFirstTabUrl;
  filtrerOnglet(url);
 
  //Filtrer au click sur les onglets
  radButtons.forEach((rb) =>
    rb.addEventListener("change", (e) => {
      const url = e.target.dataset.url;
      filtrerOnglet(url);
      setTimeout(() => {
        if (rb.id === "agenda-semaine") {
          agendaSemaine();
        }
      }, 500);
    })
  );
};

Deuxième fetch : (agenda-semaine.js) :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
import { tabContent } from "./onglets.js";
 
export const agendaSemaine = () => {
 
  const inputDebutSemaine = document.querySelector("#inputDebutSemaine");
  const inputFinSemaine = document.querySelector("#inputFinSemaine");
 
  //Recherche des jours pour filtre agenda semaine
  const ajd = new Date();
  const dateDebutSemaineDefaut = new Date(
    ajd.setDate(ajd.getDate() - ajd.getDay() + 1)
  );
 
  //Initialisation des champs date début et fin avec les dates de semaine active
  const dateFinSemaineDefaut = new Date(ajd.setDate(ajd.getDate() + 6));
 
  // inputDebutSemaine.value = "2023-10-01"
  // inputFinSemaine.value = dateFinSemaineDefaut.toISOString().split("T")[0];
 
  // const dateDebutSemaine = new Date(inputDebutSemaine.value)
  //   .toISOString()
  //   .split("T")[0];
 
  // const dateFinSemaine = new Date(inputFinSemaine.value)
  //   .toISOString()
  //   .split("T")[0];
 
  tabContent.addEventListener("change", (e) => {
    let btn = e.target;
 
    if (btn.id === "inputDebutSemaine" || btn.id === "inputFinSemaine") {
      const dateDebutSemaine = inputDebutSemaine.value;
      const dateFinSemaine = inputFinSemaine.value;
      if (dateDebutSemaine.value != null && dateFinSemaine.value != null) {
        rechercherParSemaine(dateDebutSemaine, dateFinSemaine);
      }
    }
  });
  //Initialisation du filtre par semaine (Fetch)
  const rechercherParSemaine = (dateDebutSemaine, dateFinSemaine) => {
 
    const formData = new FormData();
    formData.append("inputDebutSemaine", dateDebutSemaine);
    formData.append("inputFinSemaine", dateFinSemaine);
 
    for (let item of formData) {
      console.log(item[0], item[1]);
    }
 
    const reponse = fetch("/admin/rendez-vous/agenda-semaine-contenu", {
      method: "POST",
      body: formData,
      cache: "no-cache",
      headers: { "X-Requested-With": "XMLHttpRequest" },
    })
      .then((response) => response.json())
      .then((data) => {
        contenuSemaine.innerHTML = data.content;
      })
      .catch((error) => alert("Erreur " + error));
 
    return reponse;
  };
};
// rechercherParSemaine(dateDebutSemaine,dateFinSemaine);
 
// ajd.toLocaleDateString("fr-FR", { month: "long", day: "numeric" });
// rechercheJour.value = ajd;
// console.log("Ajd :", ajd);
 
// const dateActive = rechercheJour.value;
// console.log(dateActive);

[Toufik83]

Bonjour,

J'aimerai savoir comment attendre l’exécution du premier fetch et vérifier l'existence des éléments dans la page avant que le deuxième "agenda-semaine.js" ne soit exécuté ...

La solution la plus simple c'est de mettre le 2éme fetch dans le then du premier, ou bien utiliser les promesses.

[Doksuri]

La solution la plus simple c'est de mettre le 2éme fetch dans le then du premier, ou bien utiliser les promesses.

fetch() EST une promesse

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
fetch(1ere_url)
.then(res => res.json())
.then(data => {
  //divers verifications
  fetch(2eme_url)
  .then(res => res.json())
  .then(data2 => {
    // suite du traitement
  });
});

[mathieu]

fetch() EST une promesse

pour aller un peu plus loin, fetch retourne une promesse mais res.fetch() aussi, ce qui permet d'enchainer les 2 "then". donc avec un 2e fetch on peut faire l'enchainement suivant :

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
fetch(1er_passage)
.then(res1 => res1.json()) // code résumé de "res1 => {return res1.json();}"
.then(data1 => {
	// analyse des données du 1er fetch
	// ...
	return fetch(2e_passage);
})
.then(res2 => res2.json()) // res2 est le résultat de la résolution du 2e fetch
.then(data2 => { // data2 est le résultat de la résolution de "res2.json()"
	// analyse des données du 2er fetch
	// ...
})

donc votre code peut s'organiser comme cela :

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
const agendaSemaine = () => {
 
	const inputDebutSemaine = document.querySelector("#inputDebutSemaine");
	const inputFinSemaine = document.querySelector("#inputFinSemaine");
 
	//Recherche des jours pour filtre agenda semaine
	const ajd = new Date();
	const dateDebutSemaineDefaut = new Date(
		ajd.setDate(ajd.getDate() - ajd.getDay() + 1)
	);
 
	const formData = new FormData();
	formData.append("inputDebutSemaine", dateDebutSemaine);
	formData.append("inputFinSemaine", dateFinSemaine);
 
	for (let item of formData) {
		console.log(item[0], item[1]);
	}
 
	return reponse = fetch("/admin/rendez-vous/agenda-semaine-contenu", {
		method: "POST",
		body: formData,
		cache: "no-cache",
		headers: { "X-Requested-With": "XMLHttpRequest" },
	});
 
 
};// agendaSemaine()
 
 
//fonction filtre selon l'onglet actif choisi
const filtrerOnglet = (url) => {
 
	fetch(url, {
		method: "POST",
		cache: "no-cache",
		headers: {
			"X-Requested-With": "XMLHttpRequest",
			// "Content-Type": "Application/json",
		},
	})
	.then(response => response.json())
	.then(data => {
		tabContent.innerHTML = data.content;
		return agendaSemaine();
	})
	.then(res2 => res2.json()) // résultat de l'url "agenda-semaine-contenu"
	.then(data2 => {
		contenuSemaine.innerHTML = data.content;
	})
	.catch((error) => alert("Erreur : " + error));
 
};// filtrerOnglet(url)
 
 
window.onload = () => {
  const fetchFirstTabUrl = radButtons[0].dataset.url;
 
  //Chargement du premier onglet au démarrage
  const url = fetchFirstTabUrl;
  filtrerOnglet(url);
 
  //Filtrer au click sur les onglets
  radButtons.forEach((rb) =>
    rb.addEventListener("change", (e) => {
      const url = e.target.dataset.url;
      filtrerOnglet(url);
    })
  );
};

[clickandgo]

Merci à tous pour vos réponses

Malheureusement j'ai dû mal m'exprimer, je n'ai pas de problème avec l'imbrication/ chaînage de réponses et de différents fetch, ce que voudrais savoir c'est comment :

Pouvoir obtenir le retour du fetch numéro 1 depuis n'importe quelle fonction ou autre fetch, en effet, je voudrais laisser le fetch de la fonction "onglets.js" qui ramène le contenu des différents onglets tel quel et sans imbrications d'autres fetch dans les .then successifs pour rendre la fonction générique et réutilisable partout dans le projet...

Le but serait de faire en sorte d'être sûr que le fetch concernant les onglets s'est bien déroulé et que les éléments qu'il retourne soient bien présents dans la page pour ensuite pouvoir lancer d'autres fonctions ou pas suivant le résultat dudit fetch principal...

J'avais pensé à faire un peu comme dans des fonctions dépendantes c.à.d checker dans la deuxième si la fonction principale renvoie true ou false avant d’exécuter la deuxième fonction,de cette façon je pouvais rendre générique mon fetch concernant les onglets plutôt que de surcharger les promesses...

En langage humain :

J'ai une multitude d'onglets dans mon projet qui sont dépendants de la fonction "onglets.js" qui sert à rapatrier les éléments du dom spécifiques à l'onglet actif, je lance ensuite un deuxième fetch ramenant le data de la page suivant l'élément sélectionné ou rempli par l'utilisateur (input, bouton, etc...).
Idéalement je voudrais avoir un retour sur le bon déroulement du premier fetch en le questionnant depuis n'importe quelle fonction externe pour être sûr qu'il a bien renvoyé du data et des éléments dans la page avant d’exécuter d'autres fonctions ou fetch ramenant le reste du data.

Excusez la longueur du message ...

[mathieu]

si vous voulez savoir si une action est finie vous pouvez utiliser un variable globale (ou quelque chose qui s'en approche suivant votre organisation des fichiers) et stocker un booléen.

mais je ne comprends pas trop ce que vous allez faire de cette information. si vous avez un code qui se lance, vous testez si les données sont bien reçues. mais ensuite que se passe-t-il si ce n'est pas le cas ? vous arrêtez le code à cet endroit ? vous attendez 2 secondes et revérifiez si les données sont bien reçues ?
dans ce 2e cas, il vaut mieux que vous exécutez ce code dans le dernier "then" plutot que de faire une boucle de temporisation.