5種常見(jiàn)的異步編程的方法

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對(duì)象中,通過(guò)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 中,通過(guò)next返回*/}, 3000);})}/* 獲取 rxjs data */const rxjsData = this.request.getRxjsData();const stream = rxjsData.subscribe(x => { /*將 subscribe 返回的subscription賦值給一個(gè)變量,取消訂閱要通過(guò)返回的subscription來(lái)取消*/console.log(x);});
注意:不管是通過(guò) Promise 的 resolve返回,還是通過(guò) getRxjsData 的 observer 返回,返回的時(shí)間用戶都不能馬上得到,必須分別使用 then 和 subscribe 來(lái)訂閱
4、Rxjs取消訂閱
/* 取消訂閱 3s后返回rxjs data,但是剛過(guò)1s,我想取消,不想訂閱了 */setTimeout(() => {stream.unsubscribe(); /*promise創(chuàng)建之后動(dòng)作無(wú)法撤回,而Observable可以撤回發(fā)出的動(dòng)作*/}, 1000)
5、rxjs訂閱后多次執(zhí)行
getMutipleRxjsData() {return new Observable(observer => {let count = 0;setInterval(() => {observer.next(count++);/*對(duì)于 promise來(lái)說(shuō),最終結(jié)果要么是resolve或者reject,而且都只能觸發(fā)一次,如果在同一個(gè)promise對(duì)象上多次調(diào)用resolve方法,則會(huì)拋出異常*//*而Observable不一樣,它可以通過(guò)next方法源源不斷的觸發(fā)下一個(gè)值*/}, 1000);})}/* rxjs 多次執(zhí)行 */this.getMutipleRxjsData().subscribe(x => {console.log(x);})
本文完~
學(xué)習(xí)更多技能
請(qǐng)點(diǎn)擊下方公眾號(hào)
![]()

評(píng)論
圖片
表情
