258资源分享网

之前写过一个开源项目RxWX，将RxJS移植到微信小程序（以下简称”小程序“）中。
RxWX项目地址和介绍：https://github.com/yalishizhude/RxWX

关于RxJS的介绍，读者可以去看官方说明或者关注公众号“Web学习社”的后续文章介绍，这篇文章主要讲解RxWX的几个使用场景。
微信小程序SDK版本：1.7.0
微信开发者工具版本：1.01

演示项目下载地址：
https://github.com/yalishizhude/RxWX/tree/master/example

Get started
按照RxWX说明，把Rx.js和RxWX.js文件放入到utils目录下。
其中Rx.js是可运行在小程序中的Rx.js模块，RxWX.js是利用Rx.js对小程序API进行的封装，封装后API函数将返回Observable对象，属性值不变。
使用时必须引入该文件，比如import rxwx from '../../utils/RxWX.js'同步API与异步API

[JavaScript] 纯文本查看 复制代码 // 原写法 try { let result = wx.removeStorageSync('xx') console.log(result) } catch(e) { console.error('小程序API发现错误') } // 使用RxWX import rxwx from '../../utils/RxWX.js' rxwx.removeStorageSync('xx') .catch((e) => console.error('RxWX发现错误')) .subscribe((resp) => console.log(resp))

看上去好像没太大区别。别着急，接着我们来继续看看异步API的调用~

[JavaScript] 纯文本查看 复制代码 // 原写法 wx.removeStorage({ key: 'xx', success: function(res) { console.log(res) }, error: function(e) { console.error('小程序API发现错误') } }) // 引用RxWX，rxwx具有wx的所有函数和值，但是调用函数返回的是Observable对象 import rxwx from '../../utils/RxWX.js' rxwx.removeStorage({key: 'xx'}) .catch((e) => console.error('RxWX发现错误')) .subscribe((resp) => console.log(resp)

在调用同步时RxWX没有太大优势，但在调用异步API的时候以流的方式来处理结果和异常，显然优于回调。而且代码内容和同步调用方式相比并无变化（只修改了函数名和入参）。
这种统一的操作方式可以让开发者更好的关注业务逻辑，而不需要去分辨API到底是异步还是同步，执行结果到底是在回调中获取还是返回值获取。
这种处理方式是不是让你想起点什么？欢迎留言讨论~

嵌套
登录后获取用户信息。

[JavaScript] 纯文本查看 复制代码 // 调用小程序原生API wx.login({ success(res) { wx.getUserInfo({ success(res) { console.log(res.userInfo) }, fail(e) { console.error(e) } }) }, fail(e) { console.error(e) } }) // 调用RxWX import rxwx from '../../utils/RxWX.js' rxwx.login() .switchMap(() => rxwx.getUserInfo()) .catch(e => console.error(e)) .subscribe(res => console.log(res.userInfo))

原生写法很容易坠入回调地狱，而利用RxWx的代码直观易读。

合并
同时获取用户信息和系统信息后进行操作。

[JavaScript] 纯文本查看 复制代码 // 调用小程序API let getUser = new Promise((success, fail) => { wx.getUserInfo({ success, fail }) }) let getSystem = new Promise((success, fail) => { wx.getSystemInfo({ success, fail }) }) Promise.all([getUser, getSystem]) .then((resp) => console.log(resp), e => console.error(e)) // 调用RxWX import rxwx, {Rx} from '../../utils/RxWX.js' Rx.Observable.zip(rxwx.getUserInfo(), rxwx.getSystemInfo()) .catch(e => console.error(e)) .subscribe(resp => console.log(resp) 在wepy中使用