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承诺，然后加载数据，这将返回axios承诺，然后将更改应用于UI。

我丢失了一些东西，来电不按顺序，请帮我理解承诺，为什么这段代码没有遵循序列？

Answer 1

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

它将按以下顺序执行

致电recordsCount()并更新stateIns.totalRecords
致电loadGpDocs()并更新stateIns.data.gpDocs

更新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

问题在于loadGpDocs(0, 20)被称为承诺链的

你可以通过以下方式解决它：

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

请注意classInstance.loadGpDocs.bind(classInstace, 0, 20)正在返回一个函数，其参数应用而不调用，因此只要recordsCount()在promise链中执行它承诺已经完成

使用es6promise按顺序进行远程调用

2 个答案: