React-Native傻瓜式学习笔记（三）：基于事件发布/订阅的网络请求工具类封装

最近国内外使用React-Native写APP的公司越来越多了，我们公司也不甘落后，将使用React-Native重写APP这个事提上了日程。然而这个任务落到我头上的时候，我本人作为一个Android菜鸡程序猿当即表示“臣妾做不到啊~”，然而并没有什么卵用。没办法，只好硬着头皮现学现卖。这东西刚出时间并不算长，网上完整的系统的参考文章较少，多数都是零碎的知识点，只好在博客里做个笔记，省得忘了以后再去满大街找。。
这一系列笔记内容均仅代表我个人的观点，不保证都是对的

起因

在React-Native中进行网络请求时，我们通常会使用JS中提供的fetch方法，通过一系列Promise语法异步的获取服务器返回的信息。实际上，经过不断的演化，fetch方法已经非常易用且语法逻辑清晰。但在实际开发过程中，我们经常会出现写着写着满屏幕的各种fetch.then.then，简直烦的不行，加上每次请求根据业务需要还要传大量相同的header，几行真正的业务逻辑代码在一大坨重复代码中间瑟瑟发抖。。另外，由于RN基于组件（Component）开发的机制，有的时候会出现我需要在一个组件中进行网络请求，但我需要在另一个或多个组件中处理返回的数据（例如：在搜索框组件中发起搜索请求，在结果组件中展示返回的结果），这个时候使用fetch就非常尴尬。因此，网络请求工具的封装势在必行。作为一个深受OO思想荼毒的Android程序员，我第一时间想起了EventBus。

---

EventBus实现

Android中的EventBus是一个非常经典的基于观察者模式的事件发布/订阅框架，在Android开发中被广泛应用。为了解决我”一处发起请求到处接收响应“的需求，我首先就想到了它。因此立刻开始在RN工程中着手搭建，以下是我的EventBus简单实现：

//EventBus.js


let instance = null; // 单例引用
let eventSubscribers = {}; // 使用一个对象保存订阅者（可以视作一个JAVA中的Map，每个key对应一个事件，每个value对应所有订阅该事件的订阅者组成的数组）

export default class EventBus {
   
    constructor() {
        // 单例模式，实际上也可以不用，OO害我！
        if (!instance) {
            instance = this;
        }
        return instance;
    }

    /**
     * 发送事件的方法，这个方法执行后会通知所有订阅了对应事件的订阅者
     * @param event 事件内容
     * @param type 事件名称，作为区分每个事件的标记
     */
    sendEvent = (event, type) => {
        let subscribers = eventSubscribers[type];
        if (subscribers && subscribers.length > 0) {
            subscribers.forEach((subscriber) => {
                if (subscriber && subscriber !== null && typeof subscriber.handleEvent == 'function') {
                    // 这里调用了订阅者的handleEvent方法，每一个订阅者都要通过实现这个方法来处理接收到的事件
                    subscriber.handleEvent(event, ty