javascript - 通过 Promise.then 混契约(Contract)步和异步不起作用

Question

这是我的代码:

private loadingData() {
   var promise = new Promise<any>((resolve) => 
   {
       resolve();
   });
   promise.then(() => {
       this.asyncServiceCall();
   })
   .then(() => this.syncFunctionThree())
};

异步方法asyncServiceCall实际上返回一个Promise。

private asyncServiceCall(): Promise<any> {
    return new Promise((resolve) = > {
        resolve();
    }).then(() => {
       this.functionOne()
       })
      .then(() => {
       this.functionTwo();
    });
}

好的，让我们看看 functionOne 和 functionTwo。他们都在返回 Promise。

private functionOne() {
   return new Promise((resolve) => {
    this.user['load'] = true;
    this.service['user'].get().subscribe(d => 
  {
     this.user['d'] = d;
  },
  error => console.error(error),
  () => {
     this.role['load']=false;
   });
  resolve();
});
}

private functionTwo() {
   return new Promise((resolve) => {
    this.service['name'].get().subscribe(d => 
  {
     this.name['d'] = d;
  },
  resolve();
});
}

第三个方法syncFunctionThree将使用数据this.user['d']和this.name['d']来有一定的业务逻辑。所以我想先调用 functionOne 和 functionTwo 然后调用 syncFunctionThree。

作者:the accepted answer without creating new Promise ，我运气不好。我发现syncFunctionThree 在异步方法之前调用。

所以请帮助我。

Answer 1

您缺少在 then() 内调用 Promise 的重要部分...您需要返回这些 Promise 或 then() > 将立即解析并转到链中的下一个 then()。这就是为什么 functionThree 在异步 Promise 函数解析之前触发

private loadingData() {
   var promise = new Promise<any>((resolve) => 
   {
       resolve();
   });
   promise.then(() => {
      // return the promise this function returns
      return this.asyncServiceCall();
     // ^^^^
   })
    // this then() won't fire until asyncServiceCall resolves in previous then()
   .then((resultFromPriorThen) => this.syncFunctionThree())
}

<小时/>

现在，您实际上并不需要 loadingData() 中的第一个 promise ，因为您已经有一个由 asyncServiceCall() 返回的 promise ，并且可以将其简化为:

private loadingData(): Promise<any> {      
   return this.asyncServiceCall().then(()=>this.syncFunctionThree());
}

现在以同样的方式修复asyncServiceCall():

private asyncServiceCall(): Promise<any> {   
   return this.functionOne().then(()=>this.functionTwo());   
}

<小时/>

最后一点:需要在 loadingData() 中添加 catch()，以防其中一个异步操作出现问题