将 API 函数包装在 RxJs Observable 中

2023-11-22

我是 RxJs 的新手,我有一个用于地理编码的 API,它提供了如下所示的功能:

simpleGeocode(options)
* where options = { address: {addr: ... }, success: Function, failure: Function}. The success function returns the geocoded LatLon object.

我在 Angular 应用程序中使用它和 NGRX Effects,所以我希望它作为 Observable,这样我就可以使用标准 Effect 设置,例如:

@Effect()
public calculateLocation: Observable<void> = this.actions
    .ofType(actions.CALCULATE_LOCATION)
    .switchMap((action) => {
        let location = action.payload;

        let options = {
            address: location.address
        };
         // ...

        this.geocodeService.simpleGeocode(options)
            .map(latLon => new actions.CalculateLocationSuccessAction(latLon);
            .catch(error => new actions.CalculateLocationFailureAction(error);
        },

但我完全不知道如何包装该库调用以使其成为可观察的。我已经阅读了一些关于bindCallback()的信息http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#static-method-bindCallback但我不完全理解。我确实了解它需要一个回调方法作为函数的最后一个参数,因此它看起来不适用于我的情况,因为成功和失败函数都作为对象的一部分传递到函数中。

我如何从这个 API 方法中创建一个 Observable,将成功回调映射到 Observable 的下一个,并将失败回调映射到 Observable 的错误?


您可以使用 Observable.create 来包装带有回调接口的外部库。

类似的东西应该有效:

Observable.create(observer => {
  geocoder.geocode({'address': address}, function(results, status) {
   if (status === 'OK') {
     observer.next(results);
     observer.complete();
   }
   else {
     observer.error(status);
   }
  });
});
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

将 API 函数包装在 RxJs Observable 中 的相关文章

  • 获取对组件树上某种类型的所有指令的引用

    我有一个复杂的场景 需要帮助 我有一个指令 称为TagDirective 它被放置在我的应用程序中的多个元素上 我有另一个指令 QueryDirective 需要引用的所有实例TagDirective存在于其宿主元素以及层次结构中其上方的所
  • Angular 2 bootstrap 函数给出错误“参数类型 AppComponent 无法分配给参数类型 Type”

    这是我的第一个简单的Hello World角度 2 应用程序来自Angular 2 快速入门指南 https angular io docs ts latest quickstart html import Component from a
  • 从 API 响应动态创建 md-card

    我正在进行 API 调用并存储一堆用户配置文件 并且我希望能够为每个配置文件动态创建卡片 Angular Material Design md card 返回的配置文件数量可能会有所不同 因此这需要是动态的 这是我的组件文件 它发出 JSO
  • 从 SERVICE 执行 COMPONENT 方法

    我正在尝试执行一个组件method from a 服务方式 我看到了另外 2 个线程 Link1 如何从服务调用组件方法 https stackoverflow com questions 40788458 how to call comp
  • 如何在 Angular CLI 中重命名组件?

    除了手动编辑所有组件文件 例如文件夹名称 css ts spec ts 和 app module ts 之外 是否有任何快捷方式可以使用 Angular CLI 重命名组件 No 没有任何命令可以更改使用组件创建命令生成的所有文件的名称 于
  • 将嵌入的内容传递给嵌套列表的孙组件

    我知道有几个问题与此类似 但它们并不完全相同 我正在构建一个嵌套列表 我想在每个孙子中与常见 html 一起显示自定义 html 内容 当我在循环外部添加到 ListComponent 时 可以正常工作 但是如果我将其在循环内部传递给内部子
  • NG2:angular2-webpack-starter - HMR 的目的是什么?

    我正在清理我的 angular2 项目 出于多种原因 我决定从种子开始 This one https github com AngularClass angular2 webpack starter 该种子使用HMR https webpa
  • Angular/RxJS 我什么时候应该取消订阅“订阅”

    我什么时候应该储存Subscription实例并调用unsubscribe 在此期间ngOnDestroy生命周期以及什么时候我可以忽略它们 保存所有订阅会给组件代码带来很多混乱 HTTP 客户端指南 https angular io do
  • 错误:没有编译器提供程序! DI 异常 Angular 2 测试

    使用 npm test 命令执行时 给定的单元测试会抛出错误 它表示存在 DI 异常 并显示错误消息 错误 没有编译器提供程序 import TestComponentBuilder from angular compiler testin
  • 加载 ng2-table 数据表单 API

    我正在学习 Angular 2 我想使用 PHP 中的 API 数据填充 ng2 table 我有一个返回数据的服务 但我不知道如何使用服务的订阅数据填充数据变量 我正在调用服务方法 getLanguages 我的服务代码是 import
  • 如何使用签名网址将文件上传到谷歌云存储桶

    我正在开发一个 Angular 应用程序 用于显示谷歌云存储桶的内容 对于后面 我在nodeJS中使用谷歌云功能 正如他们在上传文件的文档中提到的 我创建了一个函数来生成签名 url 但是当我使用签名 url 发送文件时 我在浏览器中收到了
  • 使用反应式表单时将模板引用变量绑定到 ngModel

    我正在使用反应式表单 当输入状态无效时 我会显示错误 这是我的观点 div class form group div
  • 使用 rxjs 来限制回调

    我正在使用一个 API 在其中注册一个经常发生的回调 function myCallback event do things with event something computationally intensive const some
  • 我无法在项目中使用节点波本威士忌

    我尝试对 scss 文件使用 npm 模块 波本威士忌 我收到以下错误 with function var paths Array prototype slice call arguments return concat apply bou
  • 如何将超级组件类变量访问到子组件类中?

    我如何在 Angular2 中将超级组件类变量访问到子组件中 超级组件文章 ts Component selector article View templateUrl components article article html v s
  • Angular 2 CLI - 部署

    我使用 Angular 2 CLI 构建了 Angular 2 应用程序 我现在的问题是我想将应用程序部署到本地服务器作为暂存环境以供其他人查看 大多数使用 Angular 2 CLI 的教程都展示了dist该文件夹似乎是在首次使用 CLI
  • 如何将参数传递给 JHipster 中的自定义错误消息?

    我仍在学习 JHipster 所以今天我想自己进行一些验证练习 并尝试向我的前端发送有意义的错误消息 这是我尝试过的 在我的控制器中 我有以下内容 POST lessons Create a new lesson of 45 min if
  • 如何让 Angular2 在渲染组件之前等待承诺

    第一 是的 我事先用谷歌搜索过这个 并且solution https stackoverflow com questions 34731869 wait for angular 2 to load resolve model before
  • 使用 Angular 2 中的 TypeScript 关闭引导程序模式

    我有一个按钮 单击该按钮我将打开一个引导模式弹出窗口 模式弹出窗口包含一些带有提交按钮的字段 我只想在保存数据后关闭弹出窗口 我无法使用数据关闭 因为它会在用户点击按钮后立即关闭弹出窗口 有没有办法通过typescript关闭弹出窗口 费用
  • 将 formControlName 与 之类的内容一起使用

    我有一个动态表单 显示我通过 REST 获得的多个数据集 用户将编辑此数据集 然后只需提交它即可将其发送回服务器 该表单是动态构建的FormBuilder array 并循环通过formArrayName ngFor在我的模板中 每个数据集

随机推荐

  • 将 Visual C 与 MinGW 静态库链接

    如何将 Visual C 2010 控制台应用程序与由以下人员创建的 STATIC 库链接MinGW a格式 它与 Visual C 2010 兼容吗 谢谢 它不兼容 但是 如果您从库中提取所有目标文件 使用ar VC 链接器能够处理这些
  • 从 FileChannel 读取 GZIP 文件 (Java NIO)

    我需要读取 解压给定 FileChannel 的 gz 文件 我尝试过使用 GZIPInputStream 提取 GZIP 档案 但这不需要 FileChannel 我无权访问从中获取 FileChannel 的原始 FileInputSt
  • Scikit-learn:在 GridSearchCV 中评分

    看起来GridSearchCVscikit learn 收集其 内部 交叉验证折叠的分数 然后对所有折叠的分数进行平均 我想知道这背后的理由 乍一看 收集其交叉验证折叠的预测 然后将所选的评分指标应用于所有折叠的预测似乎更灵活 我偶然发现这
  • 雪花中的断言

    有没有办法在 Snowflake 中执行断言 基本上 我正在尝试做一些测试 TDD 并且我想要一种类似于其他语言中的断言的机制 如果断言成功 则返回 true 和 或打印成功消息 如果断言失败 则会引发异常 我找不到任何在 Snowflak
  • PowerShell 无法识别 Java

    我在 Windows 2012 服务器上使用 PowerShell 并从 System32 中删除了所有 java 命令 重新安装了 jdk 将 JAVA HOME 和 Path 设置为指向新安装 我仍然收到以下错误 java The te
  • 如何知道设备的密度?

    我们可以在android中获取分辨率 但是我们如何知道设备 屏幕 的密度呢 thanks 执行以下代码 float scale getApplicationContext getResources getDisplayMetrics den
  • SQL - SELECT MAX() 和附带字段

    我所遇到的基本上是一个可以用多个表轻松解决的问题 但我只有一个表来完成它 考虑以下数据库表 UserID UserName EmailAddress Source 3K3S9 Ben email protected user SF13F H
  • android 中的椭圆是什么意思?

    我添加了一个EditText到我的布局 并添加了一个提示 并使其水平居中 运行应用程序时 提示是不可见的 我发现我应该做ellipsize的值TextView to be start
  • qemu-system-x86_64 :地址解析失败 ::1:46189:名称或服务未知

    我有以下问题 当我跑步时emulator avdname抛出以下错误 qemu system x86 64 chardev socket port 46189 host 1 nowait nodelay ipv6 id modem addr
  • 应用程序传输安全策略要求使用安全连接 - IOS 9

    我在使用 IP 地址连接 API 时遇到问题 即使我将以下代码添加到 plist 它仍然显示错误 如下所示 http xx3 xx xx8 xx7 xxx xxx 错误 无法加载资源 因为应用程序传输安全策略需要使用安全连接 这是我添加到
  • 获取特定用户的 CVS 历史记录

    如何获取特定用户对存储库所做的提交历史记录 我可以通过命令行或 TortoiseCVS 访问 CVS 因此使用任一方法的解决方案就足够了 作为一名编码员 我最感兴趣的是提交更改 而不是标记 分支等 因此我通常包括 c还有提交选项 cvs h
  • “ng-select”不是已知元素

    这是我的代码 我想在我的表格上添加https github com ng select ng select多选标签输入 组件 模块 ts import NgModule from angular core import CommonModu
  • 运行 shell 脚本时如何在 Jenkins 中标记构建不稳定

    在我正在进行的一个项目中 我们使用 shell 脚本来执行不同的任务 有些是运行 rsync 的 sh bash 脚本 有些是 PHP 脚本 PHP 脚本之一正在运行一些集成测试 这些测试输出到 JUnit XML 代码覆盖率报告等 詹金斯
  • meteorJS 从服务器调用 shell 命令

    我正在使用 MeteorJS 我想从 javascript 服务器端调用 bash 命令 这对于 NodeJS 来说似乎是可能的 http www dzone com snippets execute unix command nodejs
  • 获取多选中最后单击的选项

    在页面上 我有一个包含许多选项的选择 多个 框 现在我想对最后单击的项目做出反应 以使用 ajax 显示一些数据 由于选项元素上的 click 事件在 IE 中不起作用 我目前使用 change 事件 问题是 value 和 selecte
  • 如何使用 jQuery 在单击按钮时显示表格的另外 5 行

    我预加载了一个表及其所有行 但是 我只想显示其中的前 10 行 tbody 标签 现在每个 tr 在表中 这是我到目前为止所做的 var trs internalActivities gt table gt tbody gt tr trs
  • 骆驼、JMS、CLIENT_ACKNOWLEDGE 模式

    我知道Camel的JMS组件用于接收消息 使用Springs DefaultMessageListenerContainer 可以将其配置为使用 CLIENT ACKNOWLEDGE 模式来确认消息 我的问题是 什么时候调用 message
  • 从 PhpStorm 2017.1 检索保存(隐藏)的 SSH 密码

    我忘记了远程服务器的 SSH 密码 但它以隐藏方式保存在 IDE PhpStorm 2017 1 中 有什么办法可以查看隐藏密码吗 我终于可以从 PhpStorm 2017 1 检索密码 Go to 设置 首选项 外观与行为 系统设置 密码
  • PHP MySQLi multi_query 准备好的语句

    我想知道是否可以为 MySQLi multi query 准备多个语句 No mysqli multi query采用查询字符串作为其参数 而不是准备好的语句 mysql prepare只能准备一个语句 查询必须由单个 SQL 语句组成
  • 将 API 函数包装在 RxJs Observable 中

    我是 RxJs 的新手 我有一个用于地理编码的 API 它提供了如下所示的功能 simpleGeocode options where options address addr success Function failure Functi