Attendez avant d'envoyer une autre demande [Javascript]

Question

J'ai 2 fonctions qui devraient être appelées lors du chargement de la page.

window.addEventListener("load", function(e) { 
    func_a(); //send request to server (Node js) 
    func_b(); //send request to server (Node js) 
}); 

func_a va envoyer au serveur une demande qui mettent à jour la liste juste et ne reviendra pas par .end.

func_b() should send a request to the server and notify to all responses in the list. 

Mais, pour une raison quelconque la demande de func_b() envoyée avant l'autre demande .. et notifier rien fait.

Pourquoi cela se produit-il?

Edit:

function func_a() { 

    var xhttp = new XMLHttpRequest(); 

    xhttp.addEventListener('load', function (e) { 
    if(xhttp.status != 200){ 
     //handle error 
     return; 
    } 
    handle_func(this.responseText); 
    func_a(); 
    }); 

    xhttp.open("GET", "ajax_info.txt", true); 
    xhttp.send(); 

} 

Answer 1

Ajax fonctionne de manière asynchrone, il est donc pas garanti pour compléter la première demande avant le second. Donc, vous devez faire la deuxième demande après le premier est terminé en lui fournissant en fonction de rappel pour la première demande

function func_a(callback) { 

    var xhttp = new XMLHttpRequest(); 

    xhttp.onreadystatechange = function() { 

    if (this.readyState == 4 && this.status == 200) { 
     callback(); 
    } 

    }; 

    xhttp.open("GET", "ajax_info.txt", true); 
    xhttp.send(); 

} 

function func_b() { 

    var xhttp = new XMLHttpRequest(); 

    xhttp.onreadystatechange = function() { 

    if (this.readyState == 4 && this.status == 200) { 
     // Do something here 
    } 

    }; 

    xhttp.open("GET", "ajax_info2.txt", true); 
    xhttp.send(); 

} 

func_a(func_b); 

Answer 2

L'utilisation Promise est assez juste si vous voulez quelque chose comme:

func_a().then(() => { 
    console.log('Hi I am callback of func_a'); 
    func_b().then(() => { 
    console.log('Hi i am callback of func_b') 
    }) 
}) 

Si oui & vous aimez ce paradigme, alors, vos fonctions doivent être rectifiées pour retourner les promesses:

function func_a() { 
    return new Promise((resolve, reject) => { 
    var xhttp = new XMLHttpRequest(); 

    xhttp.onreadystatechange = function() { 
     if (this.readyState == 4 && this.status == 200) { 
     resolve(); 
     } else { 
     reject() 
     } 
    }; 

    xhttp.open('GET', 'ajax_info.txt', true); 
    xhttp.send(); 
    }); 
} 

function func_b() { 
    return new Promise((resolve, reject) => { 
    var xhttp = new XMLHttpRequest(); 

    xhttp.onreadystatechange = function() { 
     if (this.readyState == 4 && this.status == 200) { 
     resolve(); 
     } else { 
     reject() 
     } 
    }; 

    xhttp.open('GET', 'ajax_info2.txt', true); 
    xhttp.send(); 
    }); 
} 

Remarque: Préparation de fonctions de revenir promesse est un motif de async-await si vous connaissez ES7:

async function myCalls() { 
    await func_a(); 
    func_b(); 
} 

myCalls();