So verketten Sie verschiedene asynchrone Vorgänge, die in Versprechen verpackt werden

Question

Im Moment ist mein Verständnis von Versprechen einfach das eines Wrappers für asynchrone Funktionen in der äußeren Umgebung (der Browser, node.js usw.). Ich bin verwirrt, wie man wirklich Software schreibt, die Async-Operationen richtig miteinander verbindet, indem man Versprechungen macht. Hier ist mein Problem:

In dem Code unten ist eine setTimeout Funktion in ein Versprechen verpackt. Ich habe auch einen XMLHttpRequest Aufruf in ein Versprechen verpackt. Ich nahm (fälschlicherweise) an, dass, wenn ich sie in der folgenden Weise zusammenkette, dass der Timer laufen würde und dann der AJAX-Anruf gemacht würde. Das passiert nicht. Der AJAX-Aufruf erfolgt zuerst.

Wenn ich meine Versprechen Kette wie folgt aussehen, funktioniert es wie erwartet!

timer(1000).then(function(){ 
    AJAXGetRequest('https://itunes.apple.com/hk/rss/topalbums/limit=10/json') 
}) 

Das Problem mit dem vorhergehenden Code ist, dass ich wieder auf die Verwendung von Callbacks für asynchrone Vorgänge zurückgreifen. Ich nehme an, es ist ein Weg, meinen Code zu schreiben, so dass ich zu Rückrufen nicht zurückkehren muß zurück, und dass ich etwas tun kann:

timer(1000) 
    .then(AJAXGetRequest('some/api')) 
    .then(timer) // wait 
    .then(AJAXGetRequest('someOther/api')) 
    .then(timer) // wait 
    .then(AJAXGetRequest('another/api')) 
        // wait 

Oder noch flexibler:

timer(1000) 
    .then(AJAXGetRequest('some/api')) 
    .then(timer(200)) // wait 
    .then(AJAXGetRequest('someOther/api')) 
    .then(timer(600)) // wait 
    .then(AJAXGetRequest('another/api')) 
        // wait 

unten ist der Rest des Codes für die vorherigen Beispiele:

let timer = function(value) { 
    return new Promise((resolve, reject) => { 

     setTimeout(() => { 

      console.log(value); 
      resolve(value); 

     }, value); 

    }); 
}; 


let AJAXGetRequest = function(URL) { 
    return new Promise((resolve, reject) => { 

     var getRequest = new XMLHttpRequest(); 
     getRequest.open('get', URL, true); 
     getRequest.send(); 

     getRequest.onload = function() { 

      var JSONObject = JSON.parse(getRequest.responseText); 
      console.log(JSONObject); 
      resolve(JSONObject); // object 
     } 


    }); 
}; 

Answer 1

<Promise>.then nimmt eine Funktion, wenn Sie es ein Versprechen geben sie nicht wissen, was damit zu tun.

Sie können das lösen, indem, was Sie in zu .then passieren, dass die Unterschrift zum Spiel:

timer(1000) 
 
.then(() => AjaxRequest(url1)) 
 
.then(() => timer(1000)) 
 
.then(() => AjaxRequest(url2)) 
 
.then(() => timer(1000));