Verwendung es6promise zu Remote-Aufruf nacheinander

Question

zu machen Ich versuche es6 Versprechen zu verwenden, zwei Ferngespräche in Folge zu machen, hier ist mein Code

recordsCount(){ 
     let classInstance=this; 
     let stateIns=this.state; 
     return axios.post('/api/projectDocs/count',stateIns.gpSearch).then((response)=>{ 
      stateIns.totalRecords=response.data; 
      classInstance.setState(stateIns); 
     }); 

    } 


loadGpDocs(start, end){ 
     let classInstance=this; 
     let stateIns=this.state; 
     stateIns.gpSearch.start=start; 
     stateIns.gpSearch.end=end; 
     return axios.post('/api/projectDocs/search',stateIns.gpSearch).then((response)=>{ 
      stateIns.data.gpDocs=response.data; 
      classInstance.setState(stateIns); 
     }); 
    } 

Code die beiden Funktionen

classInstance.recordsCount().then(classInstance.loadGpDocs(0, 20).then(function() { 
       stateIns.ready = true; 
       classInstance.setState(stateIns); 
      })); 

nennen

zuerst die Anzahl der Datensätze aufrufen, dies gibt eine axios Versprechen, dann Daten laden, diese Rückkehr axios Versprechen dann Änderungen an UI anwenden.

Iam fehlt etwas, Anrufe sind nicht in Reihenfolge, bitte helfen Sie mir zu verstehen Versprechen, warum dieser Code nicht Folge folgt?

Answer 1

Die folgenden werden den Code in Folge aufrufen, dies ist, weil wir Versprechen Verkettung verwenden, um "Blockierung" zu erreichen. Da alle zurückgegebenen Versprechen zunächst in einem pending Zustand beginnen, wird jedes Versprechen ordnungsgemäß erwartet und das nächste Versprechen wird nicht aufgerufen, bis das Versprechen, bevor es einen fulfilled Status hat.

Es wird in der folgenden Reihenfolge ausführen

1. Anruf recordsCount() und aktualisieren stateIns.totalRecords
2. Anruf loadGpDocs() und aktualisieren stateIns.data.gpDocs

3. aktualisieren stateIns.ready

   return classInstance.recordsCount() 
       .then(() => { // Wait for recordsCount() to be fulfilled 
       // Notice that we are returning this promise 
       // the next then() will wait until loadGpDocs is fulfilled 
       return classInstance.loadGpDocs(0, 20); 
       }) 
       .then(() => { 
       stateIns.ready = true; 
       classInstance.setState(stateIns); 
       }); 
   

Answer 2

Das Problem ist, dass loadGpDocs(0, 20)außerhalb der Verheißung Kette genannt wird

Man konnte es lösen, indem Sie:

classInstance.recordsCount() 
    .then(classInstance.loadGpDocs.bind(classInstace, 0, 20)) 
    .then(function() { 
     stateIns.ready = true; 
     classInstance.setState(stateIns); 
    })); 

Beachten Sie, dass classInstance.loadGpDocs.bind(classInstace, 0, 20) kehrt eine Funktion mit seinen Argumenten angewendet, ohne sie zu nennen, so dass es innerhalb der Versprechenskette ausgeführt wird, wenn recordsCount() Versprechen gemacht wird