ArkTs和RxJS的混合使用

1.RxJS的相关知识：这里参考官方文档，这里不做详细叙述。前言 · 学习 RxJS 操作符 (rxjs-cn.github.io)

2.我们详细说一下为什么要和ArkTS结合

        站在android 开发者的角度上，我们都知道MVC 、MVP、MVVM三种常用的架构模式，以及后来居上的MVI，我个人理解MVI和compose更配，因为上述三种架构模式都是命令式的操作方式即是我们老一套的findById的方式，而MVI则是数据驱动UI的方式，当然有些人也会说MVVM 的dataBinding也有点类似数据驱动UI，毕竟我们一开始在XML文件里绑定好了，当数据发生改变了，我们的UI也会发生对应的变化，但是我们大家都知道XML和dataBinding 深度绑定后，耦合性非常高，复用性非常差，我有时候在写代码的时候都要对MVVM进行阉割。放弃对XML的侵入。言归正传我们说回鸿蒙，鸿蒙也是数据驱动UI的方式，同时官方也是推荐我们使用MVVM的方式，这里我就不是很理解了，都没有XML了，怎么还会使用MVVM的方式，明明MVI的方式会更好。

       理解了MVI我们才能回归到最初的问题，为什么我们要使用RxJS去操作的我们的代码。因为我们不能在使用命令式的方式去操作UI，所以我们必须RxJS 的方式去操作我们的数据。这里非常像RxJava。理解RxJava同样有利于我们去学习RxJS.

3.简单介绍一下在代码中的应用。

先看开始的地方，这里进行一个网络请求的发起操作：

initLogin(): Observable<string> {
    console.info("发起网络请求了！")
    return new Observable((subscribe) => {
      AxiosHelper.getAxiosInstance().get(`article/list/1/json`).then((resp: AxiosResponse<string>) => {
        if (resp.status === 200) {
          console.info("回来了：" + JSON.stringify(resp.data))
          subscribe.next(resp.data)
          // this.cachedWeather.set(code, resp.data)
          subscribe.complete()
        } else {
          subscribe.error(resp.statusText)
        }
      }).catch((e: Error) => {
        subscribe.error(e.message)
      })
    })
  }

这里通过返回一个Observable<T> 对象，把我们获取的网络请求的返回体丢给调用者。

initLoginData() {
    this.initLogin().subscribe({
      next: (value) => {
        this._loginViewState.updateValue(JSON.stringify(value))
        console.info("返回的是："+value)
      }, error: (msg: string) => {
        console.info("返回错误了error ："+msg)
      }
    })
  }

这里可以看到我们刚刚写的initLogin方法通过RxJS的subscribe获取到我们对应的数据。然后把数据赛到         this._loginViewState.updateValue(JSON.stringify(value)) 这里然后通过ArkTs 的状态管理把数据丢出去，然后去触发UI的更改。

  private readonly _loginViewState: LoginData = new LoginData("我是原始数据")
  readonly loginState: ObservedData<string> = this._loginViewState

@ObservedV2
class LoginData extends ObservedData<string> {
  constructor(value: string) {
    super(value)
  }

  public updateValue(value: string): void {
    super.updateValue(value)
  }
}

最后在page界面去模拟数据

@ComponentV2
export struct MinePages {
  @Provider() mineViewModel: MineViewModel = new MineViewModel(getContext())
  @Local cityCodeInfoViewState: ObservedData<string> =
    this.mineViewModel.loginState
  aboutToAppear(): void {
    Logger.info("aaaa","不走啊")
  }

  build() {
    Column() {
      Text(this.cityCodeInfoViewState.value)
      Text("我是Mine 界面").onClick(click => {
        this.mineViewModel.initLoginData()
      })
    }.width("100%").height("100%").alignItems(HorizontalAlign.Center)
    .justifyContent(FlexAlign.Center)
  }
}

以上就是一次完整的通过RxJS 发起的网络请求，同时去更改Text的内容。