首页 web前端 js教程 迁移订阅回调以订阅 RxJS 中的参数

迁移订阅回调以订阅 RxJS 中的参数

Jan 09, 2025 pm 08:29 PM

Migrando subscribe Callbacks para subscribe arguments no RxJS

日常生活中使用 rxjs 的你可能已经注意到,从 6.4 版本开始。 RxJS 在 subscribe:

方法中放置了一个已弃用的注释

@deprecated — 使用观察者参数,而不是传递单独的回调参数。采用单独回调参数的签名将在 v8 中删除。详细信息:https://rxjs.dev/deprecations/subscribe-arguments

理由是使用单独的回调会导致方法的读取效果更差,因此最好使用订阅参数,解构方法返回的属性。

为了更好地理解这在实践中是什么样子,让我们看一个简单的例子:

data.js

import { Observable } from "rxjs";

/**
 * Cria um observable que emite valores numéricos de 1 até 5, e então se finaliza.
 *
 * @returns {Observable<number>} Um observable que emite números de 1 até 5 em sequência.
 */
export const data = () => {
  return new Observable((observer) => {
    for (let i = 1; i <= 5; i++) {
      observer.next(i);
    }

    observer.complete();
  });
};

/**
 * Cria um observable que emite um error imediatamente
 *
 * @returns {Observable<never>} Um observable que emite um erro.
 */
export const dataWithError = () => {
  return new Observable((observer) => {
    observer.error("Aconteceu um erro!");
  });
};

登录后复制

这将是我们的基本文件。第一个方法使用 .next() 方法按顺序输出从 1 到 5 的数字,一旦循环完成,就使用 .complete() 方法完成可观察的操作。

第二种方法创建一个立即抛出错误的可观察对象

PS:当调用 .error() 方法时,observable 停止发出值,并且无法通过 .next() 继续发出值或使用 .complete() 完成。

让我们进入正题吧。

我们将使用当前已弃用的方式作为第一个示例,然后我将展示如何使用 observable 参数。

import { data, dataWithError } from "./data.js";

data().subscribe(
  (value) => console.log(value),
  (error) => {},
  () => {
    console.log("completou");
  }
);

dataWithError().subscribe(
  () => {},
  (error) => {
    console.error({ error });
  }
);

登录后复制

请注意,因为它是一个示例,所以更明显,但同时,我们需要知道每个回调的顺序(next、error 和complete)。

也就是说,让我们来看看如何使用参数 observables:

import { data, dataWithError } from "./data.js";

data().subscribe({
  next: (data) => console.log(data),
  complete: () => console.log("completou"),
});

dataWithError()
    .subscribe({ error: (error) => console.error({ error })
    });
登录后复制

从这一点开始,通过参数 observables,我们可以更清楚地了解我们在 subscribe 方法中使用的内容,不需要声明我们不会使用的回调或参数。

这是一个易于执行的迁移,并且不会留下此 API 的弃用消息。

以上是迁移订阅回调以订阅 RxJS 中的参数的详细内容。更多信息请关注PHP中文网其他相关文章!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热门文章

仓库:如何复兴队友
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
两个点博物馆:所有展览以及在哪里可以找到它们
3 周前 By 尊渡假赌尊渡假赌尊渡假赌

热门文章

仓库:如何复兴队友
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
两个点博物馆:所有展览以及在哪里可以找到它们
3 周前 By 尊渡假赌尊渡假赌尊渡假赌

热门文章标签

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

在JavaScript中替换字符串字符 在JavaScript中替换字符串字符 Mar 11, 2025 am 12:07 AM

在JavaScript中替换字符串字符

jQuery检查日期是否有效 jQuery检查日期是否有效 Mar 01, 2025 am 08:51 AM

jQuery检查日期是否有效

jQuery获取元素填充/保证金 jQuery获取元素填充/保证金 Mar 01, 2025 am 08:53 AM

jQuery获取元素填充/保证金

10个jQuery手风琴选项卡 10个jQuery手风琴选项卡 Mar 01, 2025 am 01:34 AM

10个jQuery手风琴选项卡

10值得检查jQuery插件 10值得检查jQuery插件 Mar 01, 2025 am 01:29 AM

10值得检查jQuery插件

HTTP与节点和HTTP-Console调试 HTTP与节点和HTTP-Console调试 Mar 01, 2025 am 01:37 AM

HTTP与节点和HTTP-Console调试

jQuery添加卷轴到Div jQuery添加卷轴到Div Mar 01, 2025 am 01:30 AM

jQuery添加卷轴到Div

自定义Google搜索API设置教程 自定义Google搜索API设置教程 Mar 04, 2025 am 01:06 AM

自定义Google搜索API设置教程

See all articles