javascript - 使用es6promise顺序进行远程调用

Question

我正在尝试使用 es6 Promise 来依次进行两个远程调用，这是我的代码

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);
        });
    }

调用两个函数的代码

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

首先调用记录计数，这会返回 axios Promise ，然后加载数据，这会返回 axios Promise 然后将更改应用到 UI。

我遗漏了一些东西，调用不按顺序，请帮助我理解promise，为什么这段代码不按顺序？

Answer 1

下面将按顺序调用代码，这是因为我们使用 Promise Chaining 来实现“阻塞”。由于所有返回的 Promise 最初都是以 pending 状态开始的，因此每个 Promise 都将被正确等待，并且下一个 Promise 将不会被调用，直到它之前的 Promise 具有 fulfilled 状态。

它将按以下顺序执行

1. 调用recordsCount()并更新stateIns.totalRecords
2. 调用loadGpDocs()并更新stateIns.data.gpDocs

3. 更新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);
     });