RxJS 笔记 05

参考 简书原文 作者：readilen

1 RxJS 一个核心三个重点

核心： Observable 再加上相关的 Operators(map, filter…)
三个重点：

• Observer
• Subject
• Schedulers

2 Observable 可观察的

2-1 创建Observable 并 订阅

var observable = Rx.Observable
    .create(function(observer) {
        observer.next('Jerry'); // RxJS 4.x 以前的版本用 onNext
        observer.next('Anna');
    })

// 订阅这个 observable
observable.subscribe(function(value) {
    console.log(value);
})

2-2 Observable 可以同时处理同步跟非同步行为

同步

var observable = Rx.Observable
    .create(function(observer) {
        observer.next('Jerry'); // RxJS 4.x 以前的版本用 onNext
        observer.next('Anna');
    })

console.log('start');
observable.subscribe(function(value) {
    console.log(value);
});
console.log('end');

/*

结果：
start
Jerry
Anna
end

*/

异步

var observable = Rx.Observable
    .create(function(observer) {
        observer.next('Jerry'); // RxJS 4.x 以前的版本用 onNext
        observer.next('Anna');

        setTimeout(() => {
            observer.next('RxJS 30 days!');
        }, 30)
    })

console.log('start');
observable.subscribe(function(value) {
    console.log(value);
});
console.log('end');

/*

结果：
start
Jerry
Anna
end
RxJS 30 days!

*/

3 Observer 观察者

Observable 可以被订阅(subscribe)，或说可以被观察。
而订阅 Observable 的物件又称为 观察者(Observer)

3-1 观察者的三个方法

• next：每当 Observable 发送出新的值，next 方法就会被呼叫。
• complete：在 Observable 没有其他的资料可以取得时，complete 方法就会被呼叫，在 complete 被呼叫之后，next 方法就不会再起作用。
• error：每当 Observable 内发生错误时，error 方法就会被呼叫。

观察者可以是不完整的，他可以只具有一个 next 方法

var observable = Rx.Observable
    .create(function(observer) {
            observer.next('Jerry');
            observer.next('Anna');
            observer.complete();
            observer.next('not work');
    })

// 宣告一个观察者，具备 next, error, complete 三个方法
var observer = {
    next: function(value) {
        console.log(value);
    },
    error: function(error) {
        console.log(error)
    },
    complete: function() {
        console.log('complete')
    }
}

// 用我们定义好的观察者，来订阅这个 observable  
observable.subscribe(observer)

var observable = Rx.Observable
  .create(function(observer) {
    try {
      observer.next('Jerry');
      observer.next('Anna');
      throw 'some exception';
    } catch(e) {
      observer.error(e)
    }
  });

// 宣告一个观察者，具备 next, error, complete 三个方法
var observer = {
    next: function(value) {
        console.log(value);
    },
    error: function(error) {
        console.log('Error: ', error)
    },
    complete: function() {
        console.log('complete')
    }
}

// 用我们定义好的观察者，来订阅这个 observable
observable.subscribe(observer)

4 Observable的订阅 & addEventListener 区别

• addEventListener 本质上就是 Observer Pattern (观察者模式)，在内部会有一份订阅清单
• Observable 内部并没有一份订阅者的清单。 订阅 Observable 的行为比较像是执行一个物件的方法，并把资料传进这个方法中。

Observer Pattern 观察者模式

class Producer {
    constructor() {
        this.listeners = [];
    }
    addListener(listener) {
        if(typeof listener === 'function') {
            this.listeners.push(listener)
        } else {
            throw new Error('listener 必须是 function')
        }
    }
    removeListener(listener) {
        this.listeners.splice(this.listeners.indexOf(listener), 1)
    }
    notify(message) {
        this.listeners.forEach(listener => {
            listener(message);
        })
    }
}

订阅一个 Observable 就像是执行一个 function

var observable = Rx.Observable
    .create(function (observer) {
            observer.next('Jerry');
            observer.next('Anna');
    })

observable.subscribe({
    next: function(value) {
        console.log(value);
    },
    error: function(error) {
        console.log(error)
    },
    complete: function() {
        console.log('complete')
    }
})

// 等同如下
// (个人感觉，函数调用-函数回调)

function subscribe(observer) {
        observer.next('Jerry');
        observer.next('Anna');
}

subscribe({
    next: function(value) {
        console.log(value);
    },
    error: function(error) {
        console.log(error)
    },
    complete: function() {
        console.log('complete')
    }
});