【RxSwift 实践系列 2/3】thinking in Rx- Create和Drive

---> 上节 【RxSwift 实践系列 1/3】为什么使用RxSwift

RxSwift 是一种编程思想,不是一门语言,学习他最难的部分就是thinking in Reactive Programming :把所有事件当作一个 stream来思考。
它的目的是让数据/事件流和异步任务能够更方便的序列化处理

如果把我们程序中每一个操作都看成一个事件:
比如一个TextFiled中的文本改变,一个按钮的点击,或者一个网络请求结束等,每一个事件源就可以看成一个管道,也就是Sequence,比如一个TextFiled,当我们改变里边的文本的时候 这个时候TextFiled就会不断的发出事件, 从他的Sequence中不断的流出 我们只需要监听这个Sequence,每流出一个事件就做相应的处理。同理UIButton也是一个Sequence 每点击一次就流出一个事件


接下来我们一步步的用thinking in Reactive Programming思想来实现一个实时展示股票信息的app.
app需求:

1、准备工作:

2、网络请求准备

3、功能:输入股票账号,显示相关股票

4、添加到关注列表,从网络获取股票信息

5、实时显示关注列表的股票数据情况

1、 准备工作

我们需要创建一个stock的项目,并使用Podfile管理第三方库。
关于RxSwift的基本使用方法可以在github的RxSwift查看。

Podfile的配置如下:

platform :ios, '11.0'
use_frameworks!
target 'stock' do
    pod 'RxSwift','~> 4.0'
    pod 'RxCocoa','~> 4.0' #把UI库和rx结合
    pod 'FMDB', '~>2.6.2'  #sqlite数据库
    pod 'SwiftyJSON'  #json处理
    pod 'Moya/RxSwift'  #网络请求
    pod 'ObjectMapper', '~> 3.1' #Json转模型
    pod 'MJRefresh', :inhibit_warnings => true #下拉刷新
    pod 'RxDataSources', '~> 3.0'  #帮助我们优雅的使用tableView的数据源方法
    pod 'NSObject+Rx'     #为我们提供 rx_disposeBag
    pod 'Then'            #提供快速初始化的语法糖
    pod 'Reusable'        #帮助我们优雅的使用自定义cell和view,不再出现Optional
end
 
 #rx的debug使用
 post_install do |installer|
     installer.pods_project.targets.each do |target|
         if target.name == 'RxSwift'
             target.build_configurations.each do |config|
                 if config.name == 'Debug'
                     config.build_settings['OTHER_SWIFT_FLAGS'] ||= ['-D', 'TRACE_RESOURCES']
                 end
             end
         end
     end
 end


2、 网络请求

通过网络请求,处理返回数据
    
知识点:Observable  create   subscribe   disposed  moya

thinking in Reactive Programming

网络请求是一个经典的异步请求,moya是基于Alamofire实现的一个网络请求,它的网络请求也是一个可订阅的stream,我们在此基础上创建一个可订阅的模型,把网络返回结果发送给这个模型,提供给订阅者展出到uitableview中

    
    /**
        这里我们使用moya来做网络请求,moya的具体使用方法参见[Moya](https://github.com/Moya/Moya)
        我们把moya从网络api返回的结果当做一个stream,使用rxswift的create把返回结果变成一个可订阅的信息流
    */
    //create的方法可以参见手册:
    create(_ subscribe: @escaping (RxSwift.AnyObserver<Self.E>) -> Disposable)
    //主要步骤是:
    Observable.create { observer in
        observer.onNext(10)
        observer.onCompleted()
        return  Disposables.create()
    }
        
    //接下来我们实现这个从api获取股票信息的方法,创建了一个可订阅的数据模型
    let netToolProvider = MoyaProvider<StockApi>()
    func searchFromApi(repositoryName: String) -> Observable<[SearchModel]> {
        return Observable.create { observer in
            netToolProvider.rx.request(.SearchStocks(code:repositoryName))
                .mapJSON() //Moya RxSwift的扩展方法,可以把返回的数据解析成 JSON 格式
                .subscribe( //订阅返回的结果
                    onSuccess:{json in
                        let info = self.parseSearchResponse(response: json as AnyObject) // 把返回解析成一个listmodel对象
                        observer.on(.next(info)) //发送next 内容是listmodel
                        observer.on(.completed)  //发送成功
                },
                    onError:{error in
                        observer.on(.error(error)) //发送错误
                }).disposed(by: self.bag)//自动内存处理机制
            
            return  Disposables.create()
        }
    }
    
    private func parseSearchResponse(response: AnyObject) -> [SearchModel] {
        var info: [SearchModel] = []
        let items = response["stocks"] as! [[String:AnyObject]]
        let _ = items.filter{
                return $0["stock_id"] as! Int != 0 //把退市的去掉
            }.map{
                info.append(SearchModel(JSON: $0)!)
            }
        return info;
    }
    

我们先把这个方法留着,等会我们会订阅这个模型,展示到uitableview中去

3、响应输入框将结果展示到列表

用户输入股票编号,调用接口去显示搜索结果
    
知识点:RxCocoa ,bind, drive

thinking in Reactive Programming:

把输入框事件当做一个流,用户的输入就会不断的发出事件流,我们只需要监听事件流就可以响应用户的每次输入。

searchFiled.rx.text
    .filter{
        ($0?.lengthOfBytes(using: .utf8))! > 0 //输入长度大于1才处理数据
    }
    .throttle(0.5, scheduler: MainScheduler.instance) //延迟0.5秒再执行
    .subscribe{ //订阅这个事件
        print($0) //打印用户的输入
}.disposed(by: rx.disposeBag)

获取用户的输入后,还需要即时的根据用户输入去api获取搜索结果,对于搜索结果我们已经在刚才处理了。现在要做的是用户输入和api搜索的事件绑定在一起。这里rxswift提供了bind方法。

bind,这个方法意图就是将一个被观察者与一个指定的观察者进行绑定,被观察者事件流中发出的所有事件元素都会让观察者接收。
例如:
textField.rx_text
    .bindTo(label.rx_text)
    .addDisposableTo(disposeBag)

接下来我们来处理事件流发出者(searchFiled)和观察者(resultTableView)绑定在一起,当用户输入查询字符串,即时去接口获取查询结果,展示在uitableview中:

searchFiled.rx.text
    .filter{
        ($0?.lengthOfBytes(using: .utf8))! > 0 //长度大于1
    }
    .throttle(0.5, scheduler: MainScheduler.instance) //延迟0.5秒再执行
    .flatMap{
        ListViewModel().searchFromApi(repositoryName:String(describing: $0!)) //查询结果,返回可订阅的SearchModel
    }
    //事件流发出者(searchFiled)和观察者(resultTableView)绑定在一起
    .bind(to: self.resultTableView.rx.items(cellIdentifier: "SearchTableViewCell", cellType: SearchTableViewCell.self)) {(_, model:SearchModel, cell:SearchTableViewCell) in
        cell.nameLabel.text = model.name
        cell.codeLabel.text = model.code
    }
.disposed(by: rx.disposeBag)

但是如果用bind,会有几个问题:

1.如果searchFromApi错误(连接失败,参数错误等),错误将会丢失(得不到任何处理),UI也不会再处理和响应任何的结果

2.如果searchFromApi返回的结果不是在主线程,那么不在子线程中对UI进行绑定,就会出现未知的错误

3.如果返回的结果绑定到了两个UI上,那么意味着每一个UI都要进行一次网络请求,即进行两次网络请求,那么,我们可以稍稍修改一下

我们可以这样修改一下:

    searchFiled.rx.text
        .filter{
            ($0?.lengthOfBytes(using: .utf8))! > 0 //长度大于1
        }
        .throttle(0.5, scheduler: MainScheduler.instance) //延迟0.5秒再执行
        .flatMap{
            ListViewModel().searchFromApi(repositoryName:String(describing: $0!))//查询结果,返回可订阅的SearchModel
                .observeOn(MainScheduler.instance) // 将返回结果切换到到主线程上
                .catchErrorJustReturn([])  // 如果有问题,错误结果将会得到处理
        }
        .share(replay: 1)
        //事件流发出者(searchFiled)和观察者(resultTableView)绑定在一起
        .bind(to: self.resultTableView.rx.items(cellIdentifier: "SearchTableViewCell", cellType: SearchTableViewCell.self)) {(_, model:SearchModel, cell:SearchTableViewCell) in
            cell.nameLabel.text = model.name
            cell.codeLabel.text = model.code
        }
    .disposed(by: rx.disposeBag)

这里插一句:subscribeOn和observeOn的区别: subscribeOn()设置起点在哪个线程,observeOn()是设置的后续工作在哪个线程。

这里我们设计的还是不够完美,rxswift中提供了drive方法,可是说是专为UI绑定量身打造

drive方法只能在Driver序列中使用,Driver有以下特点:

1. Driver序列不允许发出error,

2. Driver序列的监听只会在主线程中。

让我们来看看drive的实现方法:

searchFiled.rx.text
    .filter{
        ($0?.lengthOfBytes(using: .utf8))! > 0 //长度大于1
    }
    .throttle(0.5, scheduler: MainScheduler.instance) //延迟0.5秒再执行
    .flatMap{
        ListViewModel().searchFromApi(repositoryName:String(describing: $0!))
    }
    .asDriver(onErrorJustReturn: [])
    .drive(resultTableView.rx.items(cellIdentifier: "SearchTableViewCell", cellType: SearchTableViewCell.self)) {
        (tableView, element, cell) in
        cell.nameLabel.text = element.name
        cell.codeLabel.text = element.code
    }
    .disposed(by: rx.disposeBag)

所以以下情况你可以使用Driver替换BindTo: 

1、不能发出error;

2、在主线程中监听;

3、共享事件流;

本节先到这里,详细代码可以到这里:rxStock实例 下载参考

app截图

下一节将介绍rxcocoa的使用场景,以及实现这个股票app所用到的更多rxswift方法。

上一节回顾 【RxSwift 实践系列 1/3】为什么使用RxSwift

三期链接:

【RxSwift 实践系列 1/3】为什么使用RxSwift

【RxSwift 实践系列 2/3】thinking in Rx- Create和Drive

【RxSwift 实践系列 3/3】thinking in Rx- UITableView

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,324评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,303评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,192评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,555评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,569评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,566评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,927评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,583评论 0 257
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,827评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,590评论 2 320
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,669评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,365评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,941评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,928评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,159评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,880评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,399评论 2 342

推荐阅读更多精彩内容