rxjs-mp
在小程序中使用RxJs。(RxJs for miniprogram)
1. 安装依赖:
npm install --save rxjs-mp
npm install --save-dev rxjs
安装完成后使用小程序开发者工具构建npm,然后就可以在项目中使用rxjs了。此外,在vscode里还能享受rxjs的语法提示。
2. 如何使用:
为了演示在小程序中如何使用rxjs,现在举一个用rjxs封装http请求的例子。相对于Promise的封装,rxjs可随时取消已经发出的请求,这一点是Promise很难实现的。我们在utils目录下建一个http.js的文件。
2.1 封装utils/http.js
const Rx = require('rxjs-mp');
/**
* Request 方法
* @param {string} url
* @param {any} data
* @param {'GET'|'POST'|'PUT'|'DELETE'} method
* @param {{header?: object}} options
*/
function request(url, data = {}, method = "GET", { header }={}) {
return new Rx.Observable(ob => {
const requestTask = wx.request({
url, data, method,
header: {
...(header || {})
Token: wx.getStorageSync('token')
},
success: res => {
if (res.statusCode == 200) {
ob.next(res);
ob.complete();
} else {
ob.error(res);
}
},
fail: err => {
console.error(err);
ob.error(err);
}
});
return () => requestTask.abort();
});
}
/**
* GET 方法
* @param {string} url
* @param {{header?: object}} options
*/
function get(url, options) {
return request(url, null, 'GET', options);
}
/**
* POST 方法
* @param {string} url
* @param {any} data
* @param {{header?: object}} options
*/
function post(url, data, options) {
return request(url, data, 'POST', options);
}
/**
* PUT 方法
* @param {string} url
* @param {any} data
* @param {{header?: object}} options
*/
function put(url, data, options) {
return request(url, data, 'PUT', options);
}
/**
* GET 方法
* @param {string} url
* @param {{header?: object}} options
*/
function delete_(url, options) {
return request(url, null, 'DELETE', options);
}
module.exports = {
http: { get, post, put, delete: delete_, request }
}
2.2 调用封装,pages/your/page.js
管理rxjs订阅可以使用subsink2订阅管理工具(安装:npm install subsink2
).
const Rx = require('rxjs-mp');
const { SubSink } = require('subsink2');
const http = require('../uitls/http.js');
const subs = new SubSink();
Page({
data: {
todoList: [],
},
onLoad() {
// 发起请求
this.httpRequest01();
this.httpRequest02();
this.httpRequest03();
},
httpRequest01() {
// 请求1,用subsink的id方法标识请求,可以防重得请求,还可以随时取消
subs.id('sub01').sink = http.get('htts://some-api-url').pipe(
Rx.operators.map(res => res && res.data || {})
).subscribe(res => {
console.log(res);
}, err => {
console.error(err);
});
},
httpRequest02() {
// 请求2,直接把请求加入订阅池
subs.sink = http.post('htts://some-api-url', {}).pipe(
Rx.operators.map(res => res && res.data || {})
).subscribe(res => {
console.log(res);
}, err => {
console.error(err);
});
},
httpRequest03() {
// 请求2,把请求加入订阅池的另一种方法
subs.add(http.get('htts://some-api-url').pipe(
Rx.operators.map(res => res && res.data || {})
).subscribe(res => {
console.log(res);
}, err => {
console.error(err);
}));
},
bindUnSubRequest01() {
// 取消request01的请求
subs.id('sub01').unsubscribe();
},
onUnload() {
// 销毁时,取消所有请求
subs.unsubscribe();
},
});
2.3 你还可使用rxjs其它强大的功能
比如消息发布和订阅,rxjs基于流的响应式编程帮你逃出Promise的回调地狱。
// ================================================
// utils/message.js
// ================================================
const Rx = require('rxjs-mp');
module.exports = {
onSomeThingChange$: new Rx.Subject(),
onOtherThingChange$: new Rx.BehaviorSubject(false),
}
// ================================================
// pages/your/page.js
// ================================================
const Rx = require('rxjs-mp');
const {
onSomeThingChange$,
onOtherThingChange$
} = require('../../utils/message.js');
onSomeThingChange$.pipe(
Rx.operators.first()
).subscribe(status=> {
console.log(status)
// doSomeThing
});
onOtherThingChange$.subscribe(status => {
console.log(status)
// doSomeThing
});
onSomeThingChange$.next(true);
onOtherThingChange$.next(true);
能解决302请求自动转发么