1、回調(diào)函數(shù)

/* 利用回調(diào)函數(shù)執(zhí)行異步操作 */  getCallBackData(callback) {  // 把函數(shù)作為參數(shù)傳遞進(jìn)去    setTimeout(() => {      let data = 'this is callback data';      callback(data);  // 將異步數(shù)據(jù)作為參數(shù)傳遞給函數(shù)    }, 1000)  }
/* 函數(shù)的調(diào)用獲取 callback data */  this.getCallBackData((result) => {    console.log(result);  // 回調(diào)函數(shù)只能在傳入函數(shù)（參數(shù)）中處理  });

2、Promise

/* Promise */getPromiseData() {    return new Promise((resolve, reject) => {      setTimeout(() => {        const data = 'this is Promise data';        resolve(data); /*將異步數(shù)據(jù)及相關(guān)操作封裝在 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);  /* 將異步數(shù)據(jù)及相關(guān)操作封裝在 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創(chuàng)建之后動作無法撤回，而Observable可以撤回發(fā)出的動作*/}, 1000)

5、rxjs訂閱后多次執(zhí)行

getMutipleRxjsData() {    return new Observable(observer => {      let count = 0;      setInterval(() => {        observer.next(count++);        /*對于 promise來說，最終結(jié)果要么是resolve或者reject,而且都只能觸發(fā)一次，如果在同一個promise對象上多次調(diào)用resolve方法，則會拋出異常*/        /*而Observable不一樣，它可以通過next方法源源不斷的觸發(fā)下一個值*/      }, 1000);    })}
/* rxjs 多次執(zhí)行 */this.getMutipleRxjsData().subscribe(x => {      console.log(x);})

本文完~

學(xué)習(xí)更多技能

請點(diǎn)擊下方公眾號