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.