Observable 包装

    用 Observable 包装意味着接收一些非 Observable 的东西并将其转换为 Observable，这样就可以很好的与其它 Observable 配合使用。同样还意味着现在我们可以使用操作符了。

    这里我们需要做的三件事：发出数据、错误处理和关闭流

    1. if(request.status === 200) {
    2.   observer.next( request.response )  // 发出数据
    4. }

    处理潜在的错误

    1. else {
    2.    observer.error('error happened');
    3. }
    1. console.clear();
    4. const { Observable } = Rx;
    6. const speechRecognition$ = new Observable(observer => {
    7.    const speech = new webkitSpeechRecognition();
    9.    speech.onresult = (event) => {
    10.      observer.next(event);
    11.      observer.complete();
    12.    };
    14.    speech.start();
    16.    return () => {
    17.      speech.stop();
    18.    }
    19. });
    21. const say = (text) => new Observable(observer => {
    22.   const utterance = new SpeechSynthesisUtterance(text);
    23.     observer.next(e);
    24.     observer.complete();
    25.   };
    26.   speechSynthesis.speak(utterance);
    27. });
    30. const button = document.querySelector("button");
    32. const heyClick$ = Observable.fromEvent(button, 'click');
    34. heyClick$
    35.   .switchMap(e => speechRecognition$)
    36.   .map(e => e.results[0][0].transcript)
    37.   .map(text => {
    38.     switch (text) {
    39.       case 'I want':
    40.         return 'candy';
    41.       case 'hi':
    42.       case 'ice ice':
    43.         return 'baby';
    44.       case 'hello':
    45.         return 'Is it me you are looking for';
    46.       case 'make me a sandwich':
    47.       case 'get me a sandwich':
    48.         return 'do it yo damn self';
    49.       case 'why are you being so sexist':
    50.         return 'you made me that way';
    51.       default:
    52.         return `I don't understand: "${text}"`;
    53.     }
    54.   })
    55.   .concatMap(say)
    56.   .subscribe(e => console.log(e));

    语音识别流

    1. const speechRecognition$ = new Observable(observer => {
    2.    const speech = new webkitSpeechRecognition();
    4.    speech.onresult = (event) => {
    5.      observer.complete();
    6.    };
    8.    speech.start();
    10.    return () => {
    11.      speech.stop();
    13. });

    这段代码建立了语音识别 API，然后等待响应，并在响应一次后完成流，很像第一个使用 AJAX 的示例。

    注意还定义一个函数用来清理

    函数 say 负责发出你想要表达的语音。

    1. const say = (text) => new Observable(observer => {
    2.   const utterance = new SpeechSynthesisUtterance(text);
    3.   utterance.onend = (e) => {
    4.     observer.next(e);
    5.     observer.complete();
    6.   };
    7.   speechSynthesis.speak(utterance);
    8. });

    主体流 hey$

    1. heyClick$
    2.   .switchMap(e => speechRecognition$)
    3.   .map(e => e.results[0][0].transcript)
    4.   .map(text => {
    5.     switch (text) {
    6.       case 'I want':
    7.         return 'candy';
    8.       case 'hi':
    9.       case 'ice ice':
    10.         return 'baby';
    11.       case 'hello':
    12.         return 'Is it me you are looking for';
    13.       case 'make me a sandwich':
    14.       case 'get me a sandwich':
    15.         return 'do it yo damn self';
    16.       case 'why are you being so sexist':
    17.         return 'you made me that way';
    18.       default:
    19.         return `I don't understand: "${text}"`;
    20.     }
    21.   })
    22.   .subscribe(e => console.log(e));

    整体逻辑应该是这样的：点击按钮激活 heyClick$ 。speechRecognition$ 监听我们说了什么并把结果发送给 heyClick$ 的转换逻辑，转换逻辑的结果将由 say Observable 发出声音。

    这两个 Observable 包装示例其中一个是简单些的 Ajax，而另一个是有一点点高级的语音 API 。但原理都是相同的： 1）数据是通过调用 next() 来发送的 2）如果没有更多的数据要发送则调用 complete() 3）如果有需要的话，定义一个清理函数可以通过 来调用 4）在合适的地方通过调用 error() 来进行错误处理。(只在第一个示例中这样做了)