使用Kotlin构建MVVM应用程序—第二部分：Retrofit及RxJava

时间  2019-11-21
标签 使用 kotlin 构建 mvvm 应用 程序 第二 部分 retrofit rxjava 栏目 Java 繁體版
原文   原文链接

简书地址：www.jianshu.com/p/8993b2479…php

目录

写在前面

这是使用Kotlin开发MVVM应用程序的第二部分—Retrofit及RxJavajava

在前一部分中咱们简单了解了MVVM的基本概念和写法。若是你没有看过上一篇，请先快速浏览一遍，由于本系列是按部就班的。能够在这里查看使用Kotlin构建MVVM应用程序—第一部分：入门篇react

若是第一篇是入了门，那这一篇就有点实战的意思了，更加贴近咱们具体的需求，本文将阐述如何在MVVM中处理网络数据。android

Retrofit及RxJava

咱们先加入依赖git

//rx android
    compile 'io.reactivex.rxjava2:rxandroid:2.0.1'
    compile 'io.reactivex.rxjava2:rxjava:2.1.3'
    //retrofit
    compile 'com.squareup.retrofit2:retrofit:2.3.0'
    compile 'com.squareup.retrofit2:converter-gson:2.3.0'
    compile 'com.squareup.retrofit2:adapter-rxjava2:2.3.0'
    compile 'com.google.code.gson:gson:2.8.0'
复制代码

此次相比上一篇稍微加了点难度，此次加入了网络请求库Retrofit和Rxjava。github

Retrofit是如今主流的网络请求库，不了解的看官网web

RxJava是一个在 Java VM 上使用可观测的序列来组成异步的、基于事件的程序的库。不了解的固然是推荐经久不衰的给 Android 开发者的 RxJava 详解数据库

准备工做作好后，先看看如今的MVVM结构api

MVVM

此次咱们的Model层的数据源来自网络，而且在ViewModel中使用RxJava进行数据的转换。bash

开始正文

在MVVM中是怎么处理网络数据的？

带着问题看文章是个好习惯。—ditclear

此次咱们先来看看xml布局文件

<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools">

    <data>
        <!--须要的viewModel,经过mBinding.vm=mViewMode注入-->
        <variable
                name="vm"
                type="io.ditclear.app.viewmodel.PaoViewModel"/>
    </data>
        <!--省略-->
        <Button
                 <!--省略-->
                android:onClick="@{()->vm.loadArticle()}"
                android:text="load article"/>
        <TextView
                 <!--省略-->
                android:text="@{vm.articleDetail}"
                tools:text="点击按钮，调用ViewModel中的loadArticle方法，经过DataBinding更新UI"/>
</layout>
复制代码

要作的和上一篇差很少，只是如今多了网络请求。

看看如今的项目结构：

结构

相比上一篇，多了一个PaoService.kt

interface PaoService{
    //文章详情
    @GET("article_detail.php")
    fun getArticleDetail(@Query("id") id: Int): Single<Article>
}
复制代码

为了简单起见，就只有一个加载文章详情的接口getArticleDetail

简单示例

咱们如今使用PaoService做为咱们的数据源(Model层)，提供数据给咱们的PaoViewModel(ViewModel层)

class PaoViewModel(val remote: PaoService) {
    //////////////////data//////////////
    val articleDetail = ObservableField<String>()
    //////////////////binding//////////////
    fun loadArticle() {
        //为了简单起见这里先写个默认的id
        remote.getArticleDetail(8773)
                .subscribeOn(Schedulers.io())
                .observeOn(AndroidSchedulers.mainThread())
                .subscribe({ t: Article? ->
                    articleDetail.set(t?.toString())
                }, { t: Throwable? ->
                    articleDetail.set(t?.message ?: "error")
                })
    }
}
复制代码

和上一篇对比来看相差也不大，只是如今咱们的数据来自网络。 再来看看PaoActivity.kt(View层)

class PaoActivity : AppCompatActivity() {

    lateinit var mBinding : PaoActivityBinding
    lateinit var mViewMode : PaoViewModel

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        mBinding=DataBindingUtil.setContentView(this,R.layout.pao_activity)

        //////model
        val remote=Retrofit.Builder()
                .baseUrl("http://api.jcodecraeer.com/")
                .addCallAdapterFactory(RxJava2CallAdapterFactory.create())
                .addConverterFactory(GsonConverterFactory.create())
                .build().create(PaoService::class.java)

        /////ViewModel
        mViewMode= PaoViewModel(remote)
        ////binding
        mBinding.vm=mViewMode
    }
}
复制代码

基本如出一辙，只是改变了数据源而已。

看一下效果：

好的，目的达到了。你能够在这里查看变动

github.com/ditclear/MV…

优化

为了更有说服力，我优化了一下UI，并加入loading的效果。

还算有点模样，那么如今就到了本篇的重点了，怎么像这样处理返回的网络数据？。

再来看看xml布局文件，因为篇幅缘由，因此这里只截取主要部分，详细请查看pao_activity.xml

<!--省略-->
                <us.feras.mdv.MarkdownView android:id="@+id/web_view" android:layout_width="match_parent" android:layout_height="wrap_content" app:markdown="@{vm.content}" android:visibility="@{vm.loading?View.GONE:View.VISIBLE}"/>
<!--省略-->
复制代码

这里使用到了一个第三方库MarkdownView，使用方法是这样的

markdownView.loadMarkdown("## Hello Markdown");

并无提供setMarkDown(markdown:String)方法，相信这种状况很常见，常常须要咱们改动第三方库达到项目的需求。因此这里须要自定义一下BindingAdapter，具体见NormalBinds.kt

@BindingAdapter(value = "markdown")
fun bindMarkDown(v: MarkdownView, markdown: String?) {
    markdown?.let {
        v.setMarkdown(it)
    }
}
复制代码

眼尖的同窗就发现了，这不是有setMarkdown方法吗？

别急，其实这只是使用kotlin给MarkdownView添加的扩展函数，具体见NormalExtens.kt

fun MarkdownView.setMarkdown(markdown : String?){
    loadMarkdown(markdown)
}
复制代码

再来瞧瞧咱们的PaoActivity.kt，依然捡重点

override fun onCreateOptionsMenu(menu: Menu?): Boolean {
    menu?.let {
        menuInflater.inflate(R.menu.detail_menu,it)
    }
    return super.onCreateOptionsMenu(menu)
}

override fun onOptionsItemSelected(item: MenuItem?): Boolean {
    item?.let {
        when(it.itemId){
            R.id.action_refresh -> mViewMode.loadArticle()
        }
    }
    return super.onOptionsItemSelected(item)
}
复制代码

啊？这叫重点吗？不就是操做一下menu菜单吗？

嗯，不错，很日常的操做，关键在于R.id.action_refresh -> mViewMode.loadArticle()这里。

因为许多没法预料的缘由，不可避免的咱们没法在xml文件中去绑定数据和事件，须要在Activity/Fragment调用viewmodel里的方法。为何要提这一点呢？固然是后面须要用到。

再来瞧瞧咱们的PaoViewModel.kt

class PaoViewModel(val remote: PaoService) {
    //////////////////data//////////////
    val loading=ObservableBoolean(false)//加载
    val content = ObservableField<String>()//内容
    val title = ObservableField<String>()//标题
    //////////////////binding//////////////
    fun loadArticle() {
        //为了简单起见这里先写个默认的id
        remote.getArticleDetail(8773)
                .subscribeOn(Schedulers.io())
                .delay(1000,TimeUnit.MILLISECONDS)//为了加载效果更明显，这里延迟1秒
                .observeOn(AndroidSchedulers.mainThread())
                .doOnSubscribe { loading.set(true) }//开始请求数据，设置加载为true
                .doAfterTerminate { loading.set(false) }//请求完成，设置加载为false
                .subscribe({ t: Article? ->
                    t?.let {
                        title.set(it.title)
                        it.content?.let {
                            val articleContent=Utils.processImgSrc(it)
                            content.set(articleContent)
                        }
                    }
                }, { t: Throwable? ->  })
    }
}
复制代码

这里一个重点：doOnSubscribe和doAfterTerminate

doOnSubscribe是在订阅开始时会触发的方法，能够代替onStart()

而doAfterTerminate是在Single成功或者失败以后会触发的方法，能够代替onComplete()

咱们再来优化一下loadArticle方法

  1. 使用kotlin的扩展将异步操做组合起来

这里咱们定义一个Rxjava的扩展函数

fun <T> Single<T>.async(withDelay: Long = 0): Single<T> =
        this.subscribeOn(Schedulers.io())
                .delay(withDelay, TimeUnit.MILLISECONDS)
                .observeOn(AndroidSchedulers.mainThread())
复制代码

因此能够将其转换成这样

remote.getArticleDetail(8773)
                .async(1000)
                .doOnSubscribe { loading.set(true) }
                .doAfterTerminate { loading.set(false) }
                .subscribe(...)
复制代码

2 . 不依赖于具体实现

loading.set(true) 和 loading.set(false) 如今就能达到咱们想要的效果

可是若是万一咱们须要使用另外一种加载方式，那么就须要去改这里，一个方法还好，若是多个方法都这么写，就比较麻烦了。因此最好定义两个方法startLoad()和stopLoad()，表明开始加载和结束加载。

fun loadArticle() {
        //为了简单起见这里先写个默认的id
        remote.getArticleDetail(8773)
                .async(1000)
                .doOnSubscribe { startLoad()}
                .doAfterTerminate { stopLoad() }
                .subscribe({ t: Article? ->
                    t?.let {
                        title.set(it.title)
                        it.content?.let {
                            val articleContent=Utils.processImgSrc(it)
                            content.set(articleContent)
                        }

                    }

                }, { t: Throwable? ->
                })
    }
//...
fun startLoad()=loading.set(true)
fun stopLoad()=loading.set(false)
复制代码

嗯好的，如今看着顺眼些了，那么还有一个问题，若是出现error了怎么处理，好像还没处理到，假设这里有一个需求是：当加载失败的时候，使用Snackbar或者Toast、Diglog提示错误信息。

假设是Toast，那咱们须要调用

Toast.makeText(context,"error msg",Toast.LENGTH_SHORT).show()

这里须要上下文Context，错误的作法是

  1. 将activity或者fragment的Context做为参数传进了，而后直接在ViewModel里使用。❌

    由于ViewModel里不该该有任何上下文Context的引用（除了App的ApplicationContext），而应该尽可能是纯Java/kotlin代码。一是为了单元测试的便捷性，二是为了防止内存泄漏。

  2. 使用一个回调到Activity或者Fragment中去处理 ❌

    这也就是我在第一部分中提过的跑偏了，这不就又变为MVP了吗（ps:本身也在这条路上跑了好几步）

  3. 聪明点的作法是再自定义一个@BindAdapter，经过绑定使用View的context ✔️·

    @BindingAdapter(value = "toast")
fun bindToast(v: View,msg:Throwable ?){
    msg?.let {
        Toast.makeText(v.context,it.message,Toast.LENGTH_SHORT).show()
    }
}
复制代码

    这种作法可行，但我我的来讲不太喜欢，由于我比较喜欢下一种。

  4. 充分利用RxJava ✔️·

    其实Rxjava和MVVM的思想上有一致的地方。

    • Observable.create/just/from...等操做符用于提供数据源，能够认为是MVVM的M层
    • Observable.map/flatMap/reduce...等操做符用于数据的转换，将其变为订阅者须要的数据，这不正是ViewModel的功能
    • Subscriber...就至关于View层去使用这些数据

    其实更像是MVP，由于在Subscriber中成功和失败。。。等等的回调，既然Subscriber中就有这些回调，那为何不加以利用？

    怎么充分利用RxJava

    只须要将loadArticle方法改形成为一个Single

    fun loadArticle():Single<Article> =
        remote.getArticleDetail(8773)
                .async(1000)
                .doOnSuccess { t: Article? ->
                    t?.let {
                        title.set(it.title)
                        it.content?.let {
                            val articleContent=Utils.processImgSrc(it)
                            content.set(articleContent)
                        }

                    }
                }
                .doOnSubscribe { startLoad()}
                .doAfterTerminate { stopLoad() }
复制代码

    在doOnSuccess操做符中咱们对数据进行了处理，而后在acticity中须要更改一下调用时的写法。

    override fun onOptionsItemSelected(item: MenuItem?): Boolean {
    item?.let {
        when(it.itemId){
            R.id.action_refresh -> mViewMode.loadArticle()
                    .subscribe { _, error -> dispatchError(error) }
            else -> { }
        }
    }
    return super.onOptionsItemSelected(item)
}

//依旧不依赖于具体实现，能够是Toast/Dialog/Snackbar等等
private fun dispatchError(error:Throwable?){
    error?.let { 
        Toast.makeText(this,it.message,Toast.LENGTH_SHORT).show()
    }
}
复制代码

    到此，在MVVM中怎么处理网络数据就基本告一段落。

    接下来

    处理内存泄漏问题RxLifecycle

    很少说，可使用CompositeDisposable将全部的订阅都统一解除，我习惯于使用RxLifecycle，更加方便

    override fun onOptionsItemSelected(item: MenuItem?): Boolean {
        item?.let {
            when(it.itemId){
                R.id.action_refresh -> mViewMode.loadArticle().compose(bindToLifecycle())
                        .subscribe { _, error -> dispatchError(error) }
                else -> { }
            }
        }
        return super.onOptionsItemSelected(item)
    }
复制代码

    使用compose操做符绑定一下就行了，这也是我更倾向于这样的写法的缘由之一。

更新: 18.7.5：建议使用AutoDispose代替RxLifecycle

RxLifecycle 的做者推荐使用AutoDispose，他认为AutoDispose的设计更为优秀，为此写了一篇Why Not RxLifecycle?

不过对于咱们开发者而言，其实变化不大。

添加AutoDispose依赖

//autodispose
    implementation 'com.uber.autodispose:autodispose:0.8.0'
    implementation 'com.uber.autodispose:autodispose-android-archcomponents:0.8.0'
复制代码

而后

override fun onOptionsItemSelected(item: MenuItem?): Boolean {
        item?.let {
            when(it.itemId){
                R.id.action_refresh -> mViewModel.loadArticle()
                        .`as`(AutoDispose.autoDisposable(AndroidLifecycleScopeProvider.from(this)))
                        .subscribe({},{dispatchError(it)})
                else -> { }
            }
        }
        return super.onOptionsItemSelected(item)
    }

复制代码

对于习惯使用RxLifeCycle的开发者建议扩展成RxLifeCycle的形式

override fun onOptionsItemSelected(item: MenuItem?): Boolean {
        item?.let {
            when(it.itemId){
                R.id.action_refresh -> mViewModel.loadArticle()
                        .bindLifeCycle(this)
                        .subscribe({},{dispatchError(it)})
                else -> { }
            }
        }
        return super.onOptionsItemSelected(item)
    }

fun <T> Single<T>.bindLifeCycle(owner: LifecycleOwner): SingleSubscribeProxy<T> {
    return this.`as`(AutoDispose.autoDisposable(AndroidLifecycleScopeProvider.from(owner)))
}
复制代码

结尾

本项目的github地址：github.com/ditclear/MV…

更多的例子能够查看：github.com/ditclear/Pa…

这是使用Kotlin构建MVVM项目的第二部分，主要讲了怎么在MVVM中较好的处理从网络返回的数据和解决内存泄漏问题。

其实回过头来看会发现，这样的方式基本告别了回调，写着都感受好舒服，因而问本身为何之前没想到呢?原本就该这样处理啊！至于缘由的话，多是如今Android项目中使用MVVM的例子太少，这样的方式在github上不多出现，致使本身没转过弯。因此写本文的目的之一是分享，二是但愿android开发者不要盲目追从MVP，而遗忘了MVVM。

第三篇我会在本项目的基础上进行数据持久化，即加入android架构组件的Room数据库，敬请期待。

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程