常見的異步編程的幾種方法

1. 回調函數
2. Promise
3. Rxjs

1、回調函數

 /* 利用回調函數執行異步操作 */
  getCallBackData(callback) {  // 把函數作為參數傳遞進去
    setTimeout(() => {
      let data = 'this is callback data';
      callback(data);  // 將異步數據作為參數傳遞給函數
    }, 1000)
  }


/* 函數的調用----獲取 callback data */
  this.getCallBackData((result) => {
    console.log(result);  // 回調函數只能在傳入函數（參數）中處理
  });  

 

2、Promise

/* Promise */
getPromiseData() {
    return new Promise((resolve, reject) => {  
      setTimeout(() => {
        const data = 'this is Promise data';
        resolve(data); // 將異步數據及相關操作封裝在 Promise對象中，通過resolve返回
      }, 3000)
    })
  }


/*  獲取 promise data */
const promiseData = this.getPromiseData()
promiseData.then(x => {
    console.log(x);
  })

 

3、Rxjs

/* rxjs */
getRxjsData() {
  return new Observable(observer => {
    setTimeout(() => {
      const data = 'this is rxjs data';
      observer.next(data);  // 將異步數據及相關操作封裝在 Observable 中，通過next返回
    }, 3000);
  })
}


 /* 獲取 rxjs data */ 
const rxjsData = this.request.getRxjsData();
const stream = rxjsData.subscribe(x => { // 將 subscribe 返回的subscription賦值給一個變量，取消訂閱要通過返回的subscription來取消
    console.log(x);
  });

注意：不管是通過 Promise 的 resolve返回，還是通過 getRxjsData 的 observer 返回，返回的時間用戶都不能馬上得到，必須分別使用 then 和 subscribe 來訂閱

 

4、Rxjs取消訂閱

/* 取消訂閱 3s后返回rxjs data,但是剛過1s，我想取消，不想訂閱了 */
setTimeout(() => {
   stream.unsubscribe();     // promise創建之后動作無法撤回，而Observable可以撤回發出的動作
 }, 1000)

 

5、rxjs訂閱后多次執行

 getMutipleRxjsData() {
    return new Observable(observer => {
      let count = 0;
      setInterval(() => {
        observer.next(count++);
        // 對於 promise來說，最終結果要么是resolve或者reject,而且都只能觸發一次，如果在同一個promise對象上多次調用resolve方法，則會拋出異常
        // 而Observable不一樣，它可以通過next方法源源不斷的觸發下一個值
      }, 1000);
    })
  }


/* rxjs 多次執行 */ 
this.getMutipleRxjsData().subscribe(x => {
      console.log(x);
    })