优化 RxJS 改造示例

最新推荐文章于 2022-08-22 23:44:39 发布
最新推荐文章于 2022-08-22 23:44:39 发布
阅读量264 收藏
点赞数
分类专栏： Typescript全栈开发从入门到精通 文章标签： javascript 开发语言 ecmascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jslygwx/article/details/125728542
版权

原则

统一风格

  • 统一的代码风格，不能一次代码提交中各种复制粘贴的痕迹。
  • 如果你不理解遍历器及状态机的时候，用 Promise （查看例1 getDefer）
  • 不需要复杂状态机或者遍历器的时候，不要用 Generator （详情见例2）
  • 不需要异步处理多个 Promise 对象的时候，不要用 Async/Await （详情见例2）

例1 getDefer

在 jQuery、 Q.js 等中都有 defer 对象的封装。

实现

这里写了一个精简的 defer 实现：

/**
 * getDefer
 * @return {Promise.defer} defer对象
 */
exports.getDefer = () => {
  const deferred = {};
  deferred.promise = new Promise((resolve, reject) => {
    deferred.resolve = resolve;
    deferred.reject = reject;
  });
  return deferred;
};

使用

// 正常情况下，无须 */async 包裹
function fn() {
  const deferred = getDefer();
  // 传统方法改造
  originFn(...args, (err, result) => {
    // 错误结果 reject
    if (err) {
      deferred.reject(err);
    }
    // 正确结果 resolve
    deferred.resolve(result);
  });
  // 不关注 callback 方法是否执行完成，返回 deferred 对象
  return deferred.promise;
}

示例

改造传统 callback 方法的示例：

function xhrRequest(url) {
  const deferred = getDefer();
  request.get(url, { timeout: 1e4 }, (err, res) => {
    if (err) {
      deferred.reject(err);
    }
    try {
      deferred.resolve(JSON.parse(res.body));
    } catch (e) {
      deferred.reject(err);
    }
  });
  return deferred.promise;
}

替换方案

同时，node.js 原生 Utilities 中已经有了 Promisify 方法来方便 Promise 改造。 参考官方文档： https://nodejs.org/dist/latest-v16.x/docs/api/util.html#util_util_promisify_original

例2 Generator

理解绕弯，调试不便。一般用于底层复杂业务处理及性能优化。

注意：如果不理解迭代器方法及状态机，不要使用 Generator。切记！切记！

原理

解释一下 Generator 函数工作的流程：

function* foo(x) {
  var y = 2 * (yield (x + 1));
  console.log(x,y)
  var z = yield (y / 3);
  console.log(x,y,z)
  return (x + y + z);
}

// 此时创建， x = 2
var a = foo(2);

// 第一次调用，传值无效
// 执行 yield (x + 1) -> 3
// 停在 L2
console.log(a.next());
// { value: 3, done: false }

// 第二次调用，传入 3
// 替换 var y = 2 * 3
// 执行 yield(y / 3) -> 2
// 停在 L4
console.log(a.next(3));
// 2 6
// { value: 2, done: false }

// 第三次调用，传入 1
// 替换 var z = 1
// return x + y + z 结束
console.log(a.next(1));
// 2 6 1
// { value: 9, done: true }

迭代器示例

将嵌套的数组（Nested Array）打平（成 Plain Array）。

function* iterArr(arr) {
  // 迭代器返回一个迭代器对象
  if (Array.isArray(arr)) {
    // 内节点
    for (let i = 0; i < arr.length; i += 1) {
      yield* iterArr(arr[i]); // (*)递归
    }
  } else {
    yield arr;
  }
}

// 使用 for-of 遍历:
var arr = ['a', ['b', 'c'], ['d', 'e']];
for (const x of iterArr(arr)) {
  console.log(x); // a  b  c  d  e
}

// 或者直接将迭代器展开:
var arr = ['a', ['b', ['c', ['d', 'e']]]];
const gen = iterArr(arr);
arr = [...gen];
console.log(arr);
// ["a", "b", "c", "d", "e"]

例3 Async/Await

避免无意义的 async 包裹

Async/Await 仅是针对于 Promise 的一种语法糖，有很多时候，被误用了。先举几个常见的例子：

// BAD
async function test() {
  // 一些同步操作
  return "hello";
}

// GOOD
function test() {
  // 一些同步操作
  return "hello";
}

// BAD
async function test () {
  // 一些同步操作
  return await promiseFn();
}

// GOOD
function test () {
  // 一些同步操作
  return promiseFn();
}

// BAD
async function test () {
  // 一些同步操作
  const data = await promiseFn();
  return { result: data };
}

// GOOD
function test () {
  // 一些同步操作
  return promiseFn().then((data)=>({ result: data }));
}

Generator 改造为 Async

原始方法：

*createNode({ payload }, { call }) {
  const res = yield call(API.createNode, payload);
  const { statusCode, result } = res;
  const succMessage = '节点创建请求发起成功';
  const failMessage = '节点创建请求发起失败';
  if (statusCode === 'ok' && result) {
    notification.success({ message: result.message || succMessage, top: 64, duration: 3 });
    return true;
  }
  notification.error({ message: result.message || failMessage, top: 64, duration: 3 });
  return false;
}

async 改造：

async createNode({ payload }, { call }) {
  const res = await call(API.createNode, payload);
  const { statusCode, result } = res;
  const succMessage = '节点创建请求发起成功';
  const failMessage = '节点创建请求发起失败';
  if (statusCode === 'ok' && result) {
    notification.success({ message: result.message || succMessage, top: 64, duration: 3 });
    return true;
  }
  notification.error({ message: result.message || failMessage, top: 64, duration: 3 });
  return false;
}

优化：

// 普通方法
function notify({ statusCode, result } = {}) {
  const succMessage = '节点创建请求发起成功';
  const failMessage = '节点创建请求发起失败';
  if (statusCode === 'ok' && result) {
    notification.success({ message: result.message || succMessage, top: 64, duration: 3 });
    return true;
  }
  notification.error({ message: result.message || failMessage, top: 64, duration: 3 });
  return false;
}

// 去除包裹
createNode({ payload }, { call }) {
  return call(API.createNode, payload).then(notify);
}

RxJS 改造

React 中使用 RxJS

原理

简单的实现：

export const useObservable = (observable) => {
  const [value, setValue] = useState()
  const [error, setError] = useState()

  useEffect(() => {
    const subscription = observable.subscribe(setValue, setError)
    return () => subscription.unsubscribe()
  }, [observable])

  return [error, value]
}

更多 useXxx 参考： https://github.com/streamich/react-use

这里推荐两个封装好的库：

  • https://github.com/LeetCode-OpenSource/rxjs-hooks
  • https://github.com/crimx/observable-hooks

向 RxJS 改造

还是刚才例3 中的代码：

import { from } from 'rxjs';
import { map } from 'rxjs/operators';
// ...

createNode({ payload }, { call }) {
  // 其中 API 调用还可以进一步改造
  // 如果改造完成，为一个 Observable 或者 Observer，则不再需要 From 转化，直接流式调用即可
  return from(call(API.createNode, payload)).pipe(
  	map(notify)
  );
}

调用 Promise 方法

import { from } from 'rxjs';
import { mergeMap } from 'rxjs/operators';

from(promiseFn).pipe(
  mergeMap((result)=>{
    // 处理 promise result
    return result;
  })
);

Promise 改造为 Observable

创建一个 Observable 对象示例：

import { Observable } from 'rxjs';

const observable = new Observable(subscriber => {
  subscriber.next(1);
  subscriber.next(2);
  subscriber.next(3);
  setTimeout(() => {
    subscriber.next(4);
    subscriber.complete();
  }, 1000);
});

使用 AsyncSubject 对象示例：

自行了解，较为复杂，需要先了解多播（MultiCasting）。

将一个事件转为 Observable

示例： 在线运行

import { fromEvent } from 'rxjs';
import { map } from 'rxjs/operators';

// 侦听点击事件
const source = fromEvent(document, 'click');
// 绑定事件处理方法
const example = source.pipe(map(event => `Event time: ${event.timeStamp}`));
// 输出 (示例): 'Event time: 7276.390000000001'
const listener = example.subscribe(val => console.log(val));

// 取消事件绑定
// listener.unsubscribe();

调用 Observable

三个方法均为可选参数：

  • next ： 每执行一步
  • complete： 结束时执行
  • error： 出错执行（注意内部报错需要用 throwError 方法）
import { of } from 'rxjs';

const source$ = of([1, 2, 3]);

source$.subscribe({
  next: (val) => {
    console.log(val);
  },
  complete: () => {
    console.log('done');
  },
  error: (err) => {
  	console.error(err);
  }
})

参考文档： https://rxjs.dev/guide/observer

经典实例

Debounce 防抖

常用方法，使用场景就不用说了，比如 EventListener 中侦听 scroll 事件等。

示例：在线运行

import { interval, timer } from 'rxjs';
import { debounce } from 'rxjs/operators';

// 每秒投射（Emit）一个值，如 0, 1, 2, 3 ....
const interval$ = interval(1000);
// debounce 时间动态增加 200ms 每次执行
const debouncedInterval = interval$.pipe(debounce(val => timer(val * 200)));
/*
  5 秒钟之后， debounce 时间将会超过定时器时间 
  输出: 0...1...2...3...4......(debounce 时间大于 1s，不再投射值出来)
*/
debouncedInterval.subscribe(val =>
  console.log(`Example Two: ${val}`)
);

Throttle 限流

同理，限流（Throttle）也是 RxJS 内置的一个操作符（Operator）。

示例：

import { interval } from 'rxjs';
import { throttleTime } from 'rxjs/operators';

// 每秒投射
const source = interval(1000);
/*
  投射一个值， 然后忽略 5s，反复
*/
const example = source.pipe(throttleTime(5000));
// 输出: 0...6...12
example.subscribe(val => console.log(val));

Retry 出错重试

参考： http://rx.js.cool/advanced/delayRetry

undo 撤销操作

参考： http://rx.js.cool/mixin/undo

深入阅读： http://rx.js.cool

Willin 老王躺平不摆烂
关注
专栏目录
RxJS实战pdf
02-08
异步控制流程Rxjs，最新2017版本，书中给出完整的事例和讲解，为什么要使用RxJS，RxJS能解决什么问题，最后结合一个具体的实例来演示如何使用
ng2_simple_service:ng http服务与rxjs的示例
05-05
在Angular 2（现在是Angular）开发中，`ng2_simple_service`是一个示例项目，展示了如何使用Angular的HTTP服务和RxJS库来处理异步数据流。这个项目旨在帮助开发者理解如何在Angular应用程序中有效地使用HTTP API进行...
RxJS 的应用示例
weixin_43799793的博客
08-23 521
RxJS 的应用示例 示例：如何控制一秒钟内最多点击一次 JS : var count = 0; var rate = 1000; var lastClick = Date.now() - rate; var button = document.querySelector('button'); button.addEventListener('click', () => { if (Date.now() - lastClick >= rate) { console.log(`Clic
rxjs 简单的demo
dicha7140的博客
11-05 112
开发环境是使用 create-react-app 创建的。再使用 $ cnpm install rxjs 来安装即可开始。 $ npx create-react-app my-app $ cd my-app $ cnpm install rxjs $ npm start my-app/src/index.js /////////////////////...
从一道字节面试题学习 RxJS 实用案例
我本可以容忍阳光，如果我不曾见过太阳，然而阳光已使我荒凉，成为更新的荒凉。
07-15 951
点击上方前端瓶子君，关注公众号回复算法，加入前端编程面试算法每日一题群前言：我搜集了网络和自己实践中的一些案例，让大家感受一下rxjs处理异步时的优势。本文主要目的：1、让一些同学对rx...
rxjs 的映射生活中的例子帮助理解
weixin_34413357的博客
04-26 347
1、Observable:可观察对象，就是一个某讯视频NBA赛事的文字直播,会有源源不断的实时信息推送（单播） //craete、of、from创建一个NBA赛事 var observable = Observable.create(subscriber=>{ subscriber.next('勇士队库里三分投进'); subscriber.next(...
rxjs-examples:每个rxjs方法的示例
05-12
这个名为"rxjs-examples"的项目提供了RxJS库中每个方法的详细示例，帮助开发者更好地理解和应用这些功能。"rxjs-typescript-starter"表明这个项目是用TypeScript编写的，TypeScript是JavaScript的一个超集，提供了更...
angular-morse-code-example:以有趣的方式呈现的常见RxJs模式示例-解码和编码摩尔斯电码
05-11
RxJs的古老故事 解释目标 我们从开始的代码库概述 现场编码 使用按钮创建时间戳流 将时间戳转换为点（“。”）和破折号（“ _”） 将一系列的Dost和破折号翻译成可读的文本 处理边缘情况 处理错误 资源 再见！ ...
react-typescript-redux-observable-sample:一个带有Typescript，Redux Observable Middleware和RxJs的示例应用程序React
05-02
具有Typescript，Redux可观察中间件和RxJs的React的示例应用程序 运行此示例的步骤。 git clone npm安装/纱线安装 npm启动/纱线启动 技术栈： ReactCli React16 React Redux 可观察到的Redux（史诗中间件） ...
rx-pagination:展示 RxJS 的分页示例
06-06
这是一个示例应用程序，它利用 RxJS 来响应用户事件并更新结果的分页列表。 RxJS 主要用于对用户事件做出React（通过输入搜索词或单击新页面）。 每个用户事件都会生成一个新的页面模型，然后呈现该模型。 此外，...
RXJS实战 pdf
08-30
RXJS实战 pdf
使用RxJS更优雅地进行定时请求详析
01-19
在用 Angular 做项目的时候，遇到了一个有点麻烦的问题。具体问题如下： 轮循请求某个接口，如何保证接口返回的数据与请求的顺序相同？ 实际的业务场景是这样的：前端需要轮循请求后端接口获取文件处理进度，并在前端用进度条展示。如下方所示： 首先想到的肯定是使用 setTimeout 或者 setInterval 进行定时请求。然而结果有点诡异，进度条的变化不是递增，而是有快有慢，比如 30%，20%，50%，40%这样。仔细一想也知道问题出在哪，异步请求的结果并不是按顺序返回的。 我在之前的工作中还没有遇到过这类需求，所以我并不是很清楚如果用传统方式应该如何解决。然而很庆幸的是 RxJS
RXJS：通过实例DEMO来直观理解RXJS的运作方式
dongnihao的博客
08-22 221
需要注意的是 观察者对象有三个object：next error complet。加一点魔法，ES6结构赋值，公司代码经常会看见有人这么写，只能说对新手不太友好啊。tips：RXJS所有的API都只会来自 rxjs和rxjs.operators。简单理解：看作一个事件发射器，或者一个代理Agent。只是作为多播的一个中转站。回传的订阅对象就是subscription。简单理解：这一整个过程。将Observable的。
RXJS 实例操作符
weixin_30292745的博客
09-03 145
先来了解几个新名词： Observable : 可观察对象，是一组值或事件的集合 Observer : 观察者，回调函数集合 Subscription ：Observable动作执行者 Operators : 操作符（纯函数） Subject ：相当于EventEmitter Scheduers ：调度器, 控制并发行为 这里解释一下什么叫作实例方式和类方法。首先，如果是通过...
rxjs 获取接口示例_示例中的rxjs基础
weixin_26723981的博客
09-01 474
rxjs 获取接口示例Let's take a look at simple examples of using RxJS, and after that, I hope, you will get the basic idea behind it. 让我们看一下使用RxJS的简单示例，然后，我希望您能从中得到基本思路。 本文将介绍的内容： (What will be covered in th...
10个需要了解的RxJS函数和示例
08-16 246
这篇文章是由同行评审弗洛里安Rappl和莫里茨克罗格 。 感谢所有SitePoint的审稿作出SitePoint内容也可以是最好的！ 由于在利益函数反应式编程 （FRP）的不断壮大， RxJS已经成为最流行的JavaScript库的一个在这个范式编程。 在这篇文章中，我们要看看是什么，我认为是十大必知的功能从RxJS。 注：本文的前提熟悉RxJS的基本知识，在文章中提出的介绍与RxJS官能团...
Rxjs filter应用案例
weixin_38296425的博客
12-01 962
本文演示了Rxjs filter man的简单应用。 首先在服务中引入Rsjs的相关包 import { Observable } from 'rxjs'; 参考rxjs7: rxjs7 中文文档https://gitee.com/iceleee/rxjs7 定义第一个异步调用方法： getRxjsFun1(){ return new Observable(subscriber => { subscriber.next(1); subscr.
RxJS在Angular中的实战例子
lwqxmu的专栏
02-23 723
一、输入框的联想输入 要求： 从输入中监听数据。（从keydown事件中获取事件宿主输入框中的值） 移除输入值中的前后空白符，并且长度符合要求 防抖（keyup时发送请求，这也会导致每敲一次键盘都会发出一次请求，如何优化？） 如果输入值没发生变化，则不用发出请求 如果已发出的ajax请求结果会因为后续的修改而变得无效，那就取消它 开发环境主要信息： Angular5.x; RXJS:...
30 天精通 RxJS(19)： 实际示例 - 简单 Auto Complete 实例
weixin_34327761的博客
09-26 238
今天我们要做一个 RxJS 的经典示例 - 自动完成 (Auto Complete)，自动完成在开发上的应用非常广泛，几乎随处可见这样的功能，只要是跟表单、搜寻相关的都会看到。 虽然是个很常见的功能，但多数的工程师都只是直接套插件来完成，很少有人会自己从头到尾把完整的逻辑写一次。如果有自己写过这个功能的工程师，应该就会知道这个功能在实现的过程中很多细节会让代码变的非常复杂，像是要如何取消上一次发送...
使用RxJS进行响应式编程
作者通过清晰的解释和实践示例，帮助读者理解如何使用RxJS来应对实时和异步Web应用开发中的挑战。本书为学习RxJS提供了一个明确的学习路径，让开发者能够以Observable的形式重新思考他们的编程世界。" 在现代软件...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Willin 老王躺平不摆烂

感谢你这么好看还这么慷慨

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值