Comment faire des requêtes avec xmlhttprequest jusqu'à ce que la réponse soit prête ?

Question

J'essaie de faire une demande à une route qui fait une requête à une API et si l'API a les données, la réponse est de rendre un autre site web avec les données de l'API. Mais si les données ne sont pas encore prêtes, puisqu'elles sont encore en cours de traitement, la route renvoie une chaîne "not finished yet".

Ce que je souhaite faire est : faire une requête get et si la réponse est "not finished yet" attendre 5 secondes et refaire la requête jusqu'à ce que la réponse soit la donnée. Après cela, le script ouvrirait la fenêtre avec la nouvelle page contenant les données chargées.

Voici ce que j'ai déjà fait :

job_id = document.querySelector("#job_id").getAttribute("value")
code = document.querySelector("#code").getAttribute("value")

var myRequest = new XMLHttpRequest();
myRequest.open('GET', `http://127.0.0.1:5000/status/${job_id}/${code}`);
myRequest.onreadystatechange = function () { 
    if (myRequest.readyState === 4 && myRequest.responseText != 'not finished yet') {
        window.location = `http://127.0.0.1:5000/status/${job_id}/${code}`
    }
};

Si quelqu'un sait si cela fonctionne ou s'il connaît un meilleur moyen d'y remédier, j'apprécierais votre aide.

Merci d'avance.

Solution :

Après quelques heures, j'ai enfin trouvé une solution. Je ne sais toujours pas si c'est la meilleure solution.

function search() {
job_id = document.querySelector("#job_id").getAttribute("value")
code = document.querySelector("#code").getAttribute("value")
var myRequest = new XMLHttpRequest();
myRequest.open('GET', `http://127.0.0.1:5000/status/${job_id}/${code}`);
myRequest.send();
myRequest.onreadystatechange = function () {
    if (myRequest.readyState === 4 && myRequest.responseText === 'not finished yet') { setTimeout(function () {search();}, 5000)
   }
    else if(myRequest.readyState === 4 && myRequest.responseText != 'not finished yet')
{ window.location = `http://127.0.0.1:5000/status/${job_id}/${code}`}}
}
search()

Answer 1

J'utilise var option = {}; en tant qu'objet global pour gérer la programmation orientée objet (POO).

Lorsque vous devez définir quelque chose, donnez-lui un préfixe pour la fonction et un identifiant afin d'éviter les conflits.

Vous avez posté certains Le code de la propriété intellectuelle est le suivant : avec 1 réputation et un formatage décent, vous faites beaucoup mieux que la plupart des gens qui commencent à 1, bravo. Disons que vous travaillez avec un ID de travail de 79. Vous voudrez donc définir ce qui suit :

option.job_79 = 1;

Maintenant que j'ai attribué au sous-objet la valeur 1 en tant qu'état, il est initialisé. Puisque le sous-objet option est de portée globale, vous pouvez faire un autre appel à votre objet ajax() et sans qu'il sache qu'un autre ajax() est déjà en cours d'exécution, vous vérifiez simplement si la fonction typeof option.job_79 au lieu de cela !

Quelques recommandations :

Si vous êtes passionné par la programmation, vous voudrez éventuellement fusionner toutes vos fonctions AJAX en une seule fonction bien affinée. Non seulement cela simplifiera grandement votre code, mais le coût initial vous permettra d'économiser, et le plus tôt sera le mieux (même si vous devrez l'affiner au fil du temps).

Évitez également les méfaits des cadres et des bibliothèques. Les gens en font tout un plat, mais quelques années plus tard, lorsque vous voulez faire une mise à jour, vous ne pouvez pas le faire sans passer des jours ou des semaines à remanier le code. Je n'ai jamais eu à remanier du code en utilisant uniquement du JavaScript pur pour une raison autre que mon niveau d'expérience, jamais à cause d'une mise à jour du navigateur. Il y a de nombreux autres avantages qui sont cachés le long de ce chemin et la plupart des gens n'en sont pas conscients.