只有在if語句中完成所有異步回調後才起作用

Question

我想在異步函數的所有回調完成時關閉某個頁面，但並非所有的if()語句都可能爲真。現在它看起來是這樣的：

if (this.originalFrom > addFrom) { 
     this.dataService.addTimeSlots(details).then((result) => { 
     console.log(result); 
     }, (err) => { 
     console.log(err); 
     }); 
    } 
if (this.originalTo < addTo) { 
     this.dataService.addTimeSlots(details2).then((result) => { 
     console.log(result); 
     }, (err) => { 
     console.log(err); 
     }); 
    } 
if (this.originalTo > addTo) { 
     this.dataService.addTimeSlots(details3).then((result) => { 
     console.log(result); 
     }, (err) => { 
     console.log(err); 
     }); 
    } 
some_Page_Closing_Function_When_All_Callbacks_Are_Done(); 

Answer 1

您可以使用Promise.all：

var promises = []; 

if (this.originalFrom > addFrom) { 
    promises.push(this.dataService.addTimeSlots(details)); 
} 

if (this.originalTo < addTo) { 
    promises.push(this.dataService.addTimeSlots(details2)); 
} else if (this.originalTo > addTo) { 
    promises.push(this.dataService.addTimeSlots(details3)); 
} 

Promise.all(promises).then((result) => { 
    console.log(result); 
}, (err) => { 
    console.log(err); 
}); 

Answer 2

你想要做的是調用函數的所有回調完成之後。如果一個if語句返回false，那麼你想抓住整個過程。這樣做的

一個低劣的方法是在此格式下築巢的回調：

1 if (this.originalFrom > addFrom) { 
    2  this.dataService.addTimeSlots(details).then((result) => { 
    3   console.log(result); 
    4   if (this.originalTo < addTo) { 
    5    this.dataService.addTimeSlots(details2).then((result) => { 
    6     console.log(result); 
    7     if (this.originalTo > addTo) { 
    8      this.dataService.addTimeSlots(details3).then((result) => { 
    9       console.log(result); 
10       some_Page_Closing_Function_When_All_Callbacks_Are_Done(); 
11      }, (err) => { 
12       console.log(err); 
13      }); 
14     } 
15    }, (err) => { 
16     console.log(err); 
17    }); 
18   } 
19 
20  }, (err) => { 
21   console.log(err); 
22  }); 
23 } 

然而，這種被稱爲回調地獄。詳細，不可讀，不可維護的spagetti代碼。

您可以嘗試將anonymouse函數轉換爲命名函數，以獲得更易讀的解決方案。這仍然是一種好手​​法。

https://github.com/caolan/async

https://caolan.github.io/async/

你可以使用這個庫，以避免上述回調地獄。