$ npx create-react-app my-app
$ cd my-app
$ cnpm install rxjs
$ npm start

//////////////////////////////////////////////
// demo1：入门
//////////////////////////////////////////////
// import { of } from 'rxjs'
// const source$ = of(1, 2, 3)
// source$.subscribe(console.log)


//////////////////////////////////////////////
// demo2: next
//////////////////////////////////////////////
// import {Observable} from 'rxjs'
// const source$ = new Observable(observer => {
//   observer.next(1)
//   observer.next(2)
//   observer.next(3)
// })
// source$.subscribe({
//   next: item => console.log(item)
// })


//////////////////////////////////////////////
// demo3: 延迟next
//////////////////////////////////////////////
// import {Observable} from 'rxjs'
// const source$ = new Observable(observer => {
//   let number = 1
//   const handle = setInterval(() => {
//     observer.next(number++)
//     if (number > 3) {
//       clearInterval(handle)
//     }
//   }, 1000)
// })
// source$.subscribe({
//   next: item => console.log(item)
// })



//////////////////////////////////////////////
// demo4: complete
//////////////////////////////////////////////
// import { Observable } from 'rxjs'
// const source$ = new Observable(observer => {
//   let number = 1
//   const handle = setInterval(() => {
//     observer.next(number++)
//     if (number > 3) {
//       clearInterval(handle)
//       observer.complete()
//     }
//   }, 1000)
// })
// source$.subscribe({
//   next: item => console.log(item),
//   complete: () => console.log('No More Data')
// })




//////////////////////////////////////////////
// demo5: error
//////////////////////////////////////////////
// import { Observable } from 'rxjs'
// const source$ = new Observable(observer => {
//   observer.next(1)
//   observer.error('Someting Wrong')
//   observer.complete()
// })
// source$.subscribe({
//   next: item => console.log(item),
//   error: err => console.log(err),
//   complete: () => console.log('No More Data'),
// })




//////////////////////////////////////////////
// demo6: Observable简单形式（next、error、complete）
//////////////////////////////////////////////
// import { Observable } from 'rxjs'
// const source$ = new Observable(observer => {
//   observer.next(1)
//   observer.error('Someting Wrong')
//   observer.complete()
// })
// source$.subscribe(
//   // next
//   item => console.log(item),          
//   // error，如果不关心错误处理，该参数可以用null占位：source$.subscribe(item => console.log(item), null, complete: () => console.log('No More Data') )
//   err => console.log(err),              
//   // complete
//   () => console.log('No More Data'), 
// )




//////////////////////////////////////////////
// demo7: 退订Observable
//////////////////////////////////////////////
// import { Observable } from 'rxjs'
// const source$ = new Observable(observer => {
//   let number = 1
//   const handle = setInterval(() => {
//       console.log('in onSubscribe ', number)
//       // 当退订之后，Observer不会造成任何响应，哪怕本程序依然在执行。
//     observer.next(number++)
//   }, 1000)
//   return {
//       // 退订的回调函数
//     unsubscribe: () => {
//       // clearInterval(handle)
//     }
//   }
// })
// const subscription = source$.subscribe(item => console.log(item))
// setTimeout(() => {
//   subscription.unsubscribe()
// }, 3000)




//////////////////////////////////////////////
// demo8： (流)管道 与 map操作符
//////////////////////////////////////////////
// import { Observable } from 'rxjs'
// import { map } from 'rxjs/operators'
// const source$ = Observable.create(observer => {
//   observer.next(1)
//   observer.next(2)
//   observer.next(3)
// })
// source$.pipe(map(x => x * x)).subscribe(console.log)




//////////////////////////////////////////////
// demo9： range 指定范围生成数据
//////////////////////////////////////////////
// import { range } from 'rxjs'
// const source$ = range(1, 100)
// source$.subscribe(console.log)




//////////////////////////////////////////////
// demo10： generate 循环创建
//////////////////////////////////////////////
// import { generate } from 'rxjs'
// const source$ = generate(
//   2, // 初始值，相当于for循环中的i=2
//   value => value < 10, //继续的条件，相当于for中的条件判断
//   value => value + 2, //每次值的递增
//   value => value * value // 产⽣的结果： 4 16 36 64
// )
// source$.subscribe(console.log)




//////////////////////////////////////////////
// demo10： interval 与 take
//////////////////////////////////////////////
// import { interval } from 'rxjs'
// import { take, map } from 'rxjs/operators'
// 每一秒吐出从0开始的索引
// const source$ = interval(1000)
// const result$ = source$.pipe(map(x => x + 1), take(4))
// result$.subscribe(console.log)




//////////////////////////////////////////////
// demo10： timer 与 take
//////////////////////////////////////////////
// import { timer } from 'rxjs'
// import { take } from 'rxjs/operators'
// // 3秒之后，每个1秒吐出（从0开始）
// const numbers$ = timer(3000, 1000);
// numbers$.pipe(take(4)).subscribe(x => console.log(x));



//////////////////////////////////////////////
// demo11: from 可把⼀切转化为Observable
//////////////////////////////////////////////
// import { from } from 'rxjs'
// const source$ = from([1, 2, 3]);
// source$.subscribe(console.log)


//////////////////////////////////////////////
// demo12: fromPromise 异步处理的交接
//////////////////////////////////////////////
// import { from } from 'rxjs'
// const promise = Promise.resolve('good');
// // const promise = Promise.reject('oops');
// const source$ = from(promise);
// source$.subscribe(
//   console.log,  // good
//   error => console.log('catch', error),  // 如果解释reject则会输出 oops
//   () => console.log('complete')  // complete
// );


////////////////////////////////////////////////////////////
// demo13: fromEvent 把DOM中的事件转化为Observable对象中的数据
// <button id="button">button</button>
// <div id="text"></div>
////////////////////////////////////////////////////////////
// import { fromEvent } from 'rxjs'
// let clickCount = 0;
// const event$ = fromEvent(document.querySelector('#button'), 'click');
// event$.subscribe(
//   () => {
//     document.querySelector('#text').innerText = ++clickCount
//   }
// );