8.1 Rxjs介紹

參考手冊(cè)：https://www.npmjs.com/package/rxjs
中文手冊(cè)：https://cn.rx.js.org/
RxJS 是 ReactiveX 編程理念的 JavaScript 版本。ReactiveX 來(lái)自微軟，`它是一種針對(duì)異步數(shù)據(jù) 流的編程。簡(jiǎn)單來(lái)說(shuō)，它將一切數(shù)據(jù)，包括 HTTP 請(qǐng)求，DOM 事件或者普通數(shù)據(jù)等包裝成流 的形式，然后用強(qiáng)大豐富的操作符對(duì)流進(jìn)行處理，使你能以同步編程的方式處理異步數(shù)據(jù)， 并組合不同的操作符來(lái)輕松優(yōu)雅的實(shí)現(xiàn)你所需要的功能。
RxJS 是一種針對(duì)異步數(shù)據(jù)流編程工具，或者叫響應(yīng)式擴(kuò)展編程；可不管如何解釋 RxJS 其目 標(biāo)就是異步編程，Angular 引入 RxJS 為了就是讓異步可控、更簡(jiǎn)單。
RxJS 里面提供了很多模塊。這里我們主要給大家講 RxJS 里面最常用的 Observable 和 fromEvent。
目前常見(jiàn)的異步編程的幾種方法：
1、回調(diào)函數(shù) 2、事件監(jiān)聽(tīng)/發(fā)布訂閱 3、Promise 4、Rxjs

8.2 回調(diào)函數(shù)異

創(chuàng)建一個(gè)服務(wù)定義方法：

getCallbackData(cb){
  setTimeout(()=>{
    var data = '張三';
    cb(data);
  },1000)
}

.ts文件

// 2、callback(回調(diào)函數(shù))獲取異步數(shù)據(jù)
this.request.getCallbackData((data)=>{
     console.log(data)
});

8.3 promise方法獲取數(shù)據(jù)

getPromiseData(){
  return new Promise((resolve,reject)=>{
   setTimeout(()=>{
      var data = '李四---promise';
      resolve(data)
   },3000)
 })
}
// 3、Promise方法獲取異步數(shù)據(jù)
var promiseData = this.request.getPromiseData();
promiseData.then((data)=>{
    console.log(data)
})

8.4 rxjs 方法獲取異步方法里面的數(shù)據(jù)及與promise區(qū)別

定義服務(wù)：

getRxjsData(){
    return new Observable((observe)=>{
      setTimeout(()=>{
        var data = '李四---Rxjs';
        observe.next(data)
      },3000)
    })
  }

  // 多次執(zhí)行
  getPromiseIntervalData(){
    return new Promise((resolve,reject)=>{
      setInterval(()=>{
        var data = '李四---promise setInterval';
        resolve(data)
      },1000)
    })
  }

  getRxjsDataIntervalData(){
    let count = 0
    return new Observable((observe)=>{
      setInterval(()=>{
        count ++
        var data = '李四---Rxjs'+count;
        observe.next(data)
      },3000)
    })
  }

  getRxjsInterNum(){
    let count = 0
    return new Observable((observe)=>{
      setInterval(()=>{
        count ++
        observe.next(count)
      },3000)
    })
  }

.ts文件使用

// 4、rxjs 方法獲取異步方法里面的數(shù)據(jù)
      // var rxjsData = this.request.getRxjsData();
      // 訂閱
      // rxjsData.subscribe((data)=>{
      //   console.log(data)
      // })

      // 5、rxjs取消訂閱 過(guò)一秒以后撤回剛才的操作
      var streem = this.request.getRxjsData();

      var d = streem.subscribe((data)=>{
        console.log(data)
      })
      setTimeout(()=>{
        // 取消訂閱
        d.unsubscribe();
      },1000)

      // 6、promise執(zhí)行多次（沒(méi)有這個(gè)能力）
      var intervalPromiseData = this.request.getPromiseIntervalData()
      intervalPromiseData.then((data)=>{
        console.log(data)
      })

      // 7、rxjs執(zhí)行多次 (可以執(zhí)行)
      // var streemInter = this.request.getRxjsDataIntervalData();
      // streemInter.subscribe((data)=>{
      //   console.log(data)
      // })

      // 8、用工具方法對(duì)返回的數(shù)據(jù)進(jìn)行處理 filter
      // var streemNuum = this.request.getRxjsInterNum();
      // streemNuum.pipe(
      //   filter((value:number)=>{
      //     if(value%2 == 0){
      //       return true;
      //     }
      //   })
      // ).subscribe((data)=>{
      //   console.log(data)
      // })

      // 9、用工具方法對(duì)返回的數(shù)據(jù)進(jìn)行處理 map
      // var streemNuum = this.request.getRxjsInterNum();
      // streemNuum.pipe(
      //   map((value:number)=>{
      //       return value*3;
      //   })
      // ).subscribe((data)=>{
      //   console.log(data)
      // })

      // 10、結(jié)合使用
      // var streemNuum = this.request.getRxjsInterNum();
      // streemNuum.pipe(
      //   filter((value:number)=>{
      //     if(value%2 == 0){
      //       return true;
      //     }
      //   }),
      //   map((value:number)=>{
      //           return value*3;
      //   })
      // ).subscribe((data)=>{
      //   console.log(data)
      // })