首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

在Angular 5+ ngrx 5+ rxjs 5.5.6中使用fromPromise In效果,promise rejects - catchError不起作用,promise错误保持不变

在Angular 5+ ngrx 5+ rxjs 5.5.6中使用fromPromise In效果时,如果promise rejects并且catchError不起作用,导致promise错误保持不变的问题,可能是由于rxjs版本的问题导致的。

解决这个问题的方法是升级rxjs版本。首先,确保你的Angular版本支持最新的rxjs版本。然后,使用npm或yarn等包管理工具更新rxjs依赖。

在更新rxjs之后,可以尝试使用from函数来替代fromPromise In。from函数可以将promise转换为Observable对象,并且可以使用catchError操作符来处理错误。

下面是一个示例代码:

代码语言:txt
复制
import { from, Observable } from 'rxjs';
import { catchError } from 'rxjs/operators';

// 假设你有一个返回promise的函数
function myPromiseFunction(): Promise<any> {
  return new Promise((resolve, reject) => {
    // 这里是你的异步操作
    // 如果发生错误,调用reject函数
    reject('Promise rejected');
  });
}

// 使用from函数将promise转换为Observable
const myObservable: Observable<any> = from(myPromiseFunction());

// 使用catchError操作符处理错误
myObservable.pipe(
  catchError(error => {
    console.error('Error:', error);
    // 返回一个新的Observable或抛出一个错误
    return throwError('An error occurred');
  })
).subscribe(
  result => console.log('Result:', result),
  error => console.error('Error:', error)
);

在上面的示例中,我们使用from函数将myPromiseFunction返回的promise转换为Observable对象。然后,使用catchError操作符来处理错误。在catchError中,你可以选择返回一个新的Observable对象或抛出一个错误。

希望这个解决方案能帮助到你。如果你需要更多关于Angular、ngrx、rxjs的帮助,请访问腾讯云的相关文档和资源:

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Angular快速学习笔记(4) -- Observable与RxJS

开始执行后可能执行零次或多次。 error 可选。用来处理错误通知。错误会中断这个可观察对象实例的执行过程。 complete 可选。用来处理执行完毕(complete)通知。...比如: 从promise创建一个Observable: import { fromPromise } from 'rxjs'; // Create an Observable out of a promise...除了可以订阅时提供 error() 处理器外,RxJS 还提供了 catchError 操作符,它允许你管道中处理已知错误。...中的observables Angular 中大量使用了可观察对象,作为处理各种常用异步操作的接口。...可观察对象会区分串联处理和订阅语句,promise只有 .then() 语句 可观察对象的 subscribe() 会负责处理错误,promise会把错误推送给它的子promise ---- 作者:

5.2K20

Angular 快速学习笔记(1) -- 官方示例要点

把它标记为一个 HeroService 的注入点 ngOnInit 中调用service获取数据 a. 虽然构造函数也可以调用,但是我们需要让构造函数保持简单,只做初始化操作 b....使用ngOnInit 生命周期钩子中调用服务 RXJS 处理异步操作 a....异步处理可以使用回调函数,可以返回 Promise(承诺),也可以返回 Observable(可观察对象) b. angular使用Rxjs,因此使用Observable,Observable 是...错误处理 使用 .pipe() 方法来扩展 Observable 的结果,并给它一个 catchError() 操作符 import { catchError, map, tap } from...return of(result as T); }; } 控制台中汇报了这个错误之后,这个处理器会汇报一个用户友好的消息,并给应用返回一个安全值,让它继续工作,可以使用

3.6K00
  • Angular 快速学习笔记(1) -- 官方示例要点

    把它标记为一个 HeroService 的注入点 ngOnInit 中调用service获取数据 a. 虽然构造函数也可以调用,但是我们需要让构造函数保持简单,只做初始化操作 b....使用ngOnInit 生命周期钩子中调用服务 RXJS 处理异步操作 a....异步处理可以使用回调函数,可以返回 Promise(承诺),也可以返回 Observable(可观察对象) b. angular使用Rxjs,因此使用Observable,Observable 是...错误处理 使用 .pipe() 方法来扩展 Observable 的结果,并给它一个 catchError() 操作符 import { catchError, map, tap } from...return of(result as T); }; } 控制台中汇报了这个错误之后,这个处理器会汇报一个用户友好的消息,并给应用返回一个安全值,让它继续工作,可以使用

    3.7K50

    Top JavaScript Frameworks & Topics to Learn in 2017

    Promises: Promise 是处理异步回调的一种方式。 当函数返回一个promise时,你可以promise解析之后使用.then()方法来附加回调函数。...ESLint:早期捕获语法错误和风格问题。代码审查和TDD后,你可以做第三件事,以减少代码中的错误。...使用对数据的任何更改,该过程步骤1中重复。 这与双向数据绑定形成对比,其中对DOM的改变可以直接更新数据(例如,如在Angular 1和 Knockout 的情况下)。...因为: 更多的人对学习 React 比对 Angular 感兴趣 React 在用户满意度方面显着引领 Angular 换句话说,React 赢得了社区活跃和用户体验的战斗,如果过去一年半的趋势继续保持...ECMAScript Observables 提案是一个阶段1草案,RxJS 5+ 是规范的标准实现。

    2.3K00

    【干货】2017年值得关注的JavaScript框架与主题

    Promises: Promise是处理将来值的方法之一,当某个函数返回的是Promise对象时,你可以调用该对象的then函数来获取异步传入的值。...ESLint: ESLint能够帮助开发者更快地发现语法错误与样式问题,Code Review与TDD之后这是个不错的减少Bug的方法。...我个人也认为React是优于Angular 2的,React over Angular 2 because: 它更简单 社区很强大 RxJS RxJS 是JavaScript中一系列响应式编程工具的集合...ECMAScript Observables是stage-1阶段的草稿,RxJS 5+则是当前的标准实现。...虽然我个人非常喜欢RxJS,但是如果你想在工程中使用RxJS的话还是需要考虑下,因为其内置了很多的Operators,其会增加你的包体尺寸。

    1.3K60

    一个Angular 5教程:一步一步指导实现你的第一个Angular 5应用程序

    其实,我们可以欺骗并使用takeWhile运算符。通过使用它,我们确保我们的数据流一旦发生this.alive错误就会停止发布新值,并且我们只需该onDestroy组件的函数中设置该值。...State是一个单一的,不可变的数据结构 - 至少Ngrx为我们实现它的方式。Ngrx是由Redux提供灵感的“RxJS支持Angular应用程序的状态管理库”。 Ngrx的灵感来自Redux。...我们讨论了State它的不变性,这意味着我们创建它之后不能改变它的任何属性。这使得我们的应用程序状态存储我们的系统中几乎不可能State。...但是相同的代码中,我们看到了另一个效果,它ServerFailure使用装饰器参数处理动作dispatch: false。这是什么意思?...有些东西不起作用。从我们的日志中可以看出,我们正在明确调度Action,但没有服务器请求在这里为我们提供。怎么了?我们忘了将我们的效果加载到我们的AppModule中。

    42.6K10

    Angular vs React 最全面深入对比

    OK,开始… … 成熟度 作为一名成熟的开发人员或者是能够决定架构及技术走向的人员,一项必备的技能就是能够工作和项目中平衡成熟技术与最前沿框架之间的关系,既能保持人员及技术的前进,又能保证项目或产品的交付质量...虽然Angular是第一个积极采用TypeScript的主要框架,但它也可以与React一起使用RxJS RxJS是一个响应式编程库,可以灵活地处理异步操作和事件。...当您使用连续数据流(如Web套接字)工作很多的情况下,RxJS非常有用,但是对于其他任何东西来说似乎过于复杂。 无论如何,当你使用Angular时,您至少应该了解RxJS的基本知识。...@ngrx/store @ngrx/store是由Redux启发的Angular的状态管理库,基于由pure reducer进行突变的状态。...RxJS是一个很重的话题,官方网站上有详细描述。虽然基本功能层面上使用起来相对容易,但在转到高级应用时会变得更加复杂。 总而言之,我们注意到Angular的进入壁垒高于React。

    3.8K70

    前后端全部用 js 开发是什么体验(Hybrid + Egg.js经验分享)

    在打包方面是秒杀其他方案的,够简单也够省事,不用对环境进行配置,也不需要各种命令行build,当然这一切也是建立5+稳定的情况下 那么5+是不是就是最佳的方案了呢?...当然不是,5+在打包方面可以说是最佳的,但是开发和调试上简直就是噩梦 比如理想中的场景是PC浏览器中预览并且调试,但是现实情况是只要是需要调用plus的地方,只 能 真 机......翻译官”,通过调用统一的api,实现跨平台的效果 ?...这样开发过程中,涉及到公共部分的业务由common统一接口,每个业务下只需要关注自己本身的业务 同时,egg-moe统一了路由规范,统一错误捕获,另外把项目中常用的module整合到了一起,避免各自调用不同的...,这样写是没有什么太大的问题的,但是如果遇到不同文件中调用,麻烦就大了 此时key需要定义两次,并且如果某一方切换key,另外一方没有切换,那么就会导致业务上的错误 所以我们将需要做prefix的部分做了集中管理

    3K20

    RxJS速成

    准备项目 我使用typescript来介绍rxjs. 因为我主要是angular项目里面用ts....下面这个图讲的就是从Observable订阅消息, 并且Observer里面处理它们: Observable允许: 订阅/取消订阅它的数据流 发送下一个值给Observer 告诉Observer发生了错误以及错误的信息...Observable.fromPromise(), 把Promise转换成Observable. Observable.range(), 指定范围内返回一串数....每个工作站(operator)都是可以被组合使用的, 所以可以再加几个工作站也行. 错误处理 Observable是会发生错误的, 如果错误被发送到了Observer的话, 整个流就结束了....错误处理的Operators: error() 被ObservableObserver上调用 catch() subscriber里并且oserver得到它(错误)之前拦截错误, retry(n)

    4.2K180

    RxJS:给你如丝一般顺滑的编程体验(建议收藏)

    这里如果你是一名使用Angular的开发者,或许你应该知道Angular中深度集成了Rxjs,只要你使用Angular框架,你就不可避免的会接触到RxJs相关的知识。...你也可以选择为你的大型项目引入RxJS进行数据流的统一管理规范,当然也不要给本不适合RxJS理念的场景强加使用,这样实际带来的效果可能并不明显。 上手难易程度如何?...RxJS 它在使用方式上,跟Promise有点像,但在能力上比Promise强大多了,不仅仅能够以流的形式对数据进行控制,还内置许许多多的内置工具方法让我们能十分方便的处理各种数据层面的操作,让我们的代码如丝一般顺滑...fromPromise 定义: public static fromPromise(promise: PromiseLike, scheduler: Scheduler): Observable<...如果 Promise resolves 一个值, 输出 Observable 发出这个值然后完成。如果 Promise 被 rejected, 输出 Observable 会发出相应的 错误

    6.8K86

    RxJs简介

    ; 纯净性 (Purity) 使得RxJS变得如此强大的原因是它使用了纯函数,这意味着你的代码很少会发生错误。正常情况下,你不会选择创建一个纯函数。...Promise(生产者) 将一个解析过的值传递给已注册的回调函数(消费者),但不同于函数的是,由 Promise 来决定何时把值“推送”给回调函数。...某些情况下,即当使用 RxJS 的 Subjects 进行多播时, Observables 的行为可能会比较像 EventEmitters,但通常情况下 Observables 的行为并不像 EventEmitters...这是一个无副作用的操作:前面的 Observable 保持不变。...对于使用定时器的操作符,使用 aysnc 调度器。 因为 RxJS 使用最少的并发调度器,如果出于性能考虑,你想要引入并发,那么可以选择不同的调度器。

    3.6K10

    手撕钉钉前端面试题

    ,而在纯函数中则说明了函数式编程不能依赖外部的环境或状态,因为一旦依赖的状态变化,不能保证函数根据对应关系所计算的返回值因为状态的变化仍然保持不变。...] 三方库 RxJS、Q[16] 、Co、[17]Bluebird[18] 我们重点来看一下常用的几种编程方式(Callback、Promise、Generator、Async)语法糖上带来的优劣对比...API 并且提供了回调能力时,这些 API 可能是非受信的,真正使用的时候会因为执行反转(回调函数的执行权在三方库中)导致以下一些问题: 使用者的回调函数设计没有进行错误捕获,而恰恰三方库进行了错误捕获却没有抛出错误处理信息...) { console.error('执行错误捕获: ', err); } 使用 g.throw 的时候还需要注意以下一些事项: 如果 Generator 函数本身没有捕获错误,那么 Generator...#### 93、使用 Git 的时候如何规范 Git 的提交说明(Commit 信息)? #### 94、简述符合 Angular 规范的提交说明的结构组成?

    3K20

    Github 4 万 Star!最全面的 Node.js 资源汇总推荐

    node_modules 文件夹 函数式编程 lodash - 更好更快的Underscore.js,提供兼容性,灵活性,高性能和其他功能的实用工具库 immutable - 不可变数据集 Ramda - 专注于数据不变性和纯粹的函数式风格的工具集...loud-rejection - 强制对未加处理的 promise rejections 错误给出提示 sparkly - 生成迷你图 ▁▂▃▅▂▇ Bit - 存储库中创建、维护、查找和使用小型模块和组件...Nest -受 Angular 启发的框架,用于构建高效且可扩展的服务器端应用程序 Zeronode - 用于 Node.js 微服务的最小化构建块 TypeGraphQL - 使用类和装饰器的,用...Promise 风格 delay - 延迟执行 Promise promise-memoize - 拥有过期时间和预加载功能的 Promise 返回值缓存工具 valvelet - 限制 Promise...访问频率的工具 p-map - 可以使用 Promise 的 Map 方法 Observables zen-observable - Observables 的实现 RxJS - 响应式编程 observable-to-promise

    3.6K31

    分享 60 个 关于 Vue 的常见问题汇总及解决方案

    , 解决方案: npm install es6-promise // main.js 引入即可 // ES6的polyfill require("es6-promise").polyfill();...你最起码得本地搭个服务器才能访问好么!! Q21:CSSbackground引入图片打包后,访问路径错误 因为打包后图片是根目录下,你用相对路径肯定报错啊.......组件没有正确引入或者正确使用,依次确认 导入对应的组件 components 内声明 dom 区域声明标签 Q26:axios的 post 请求后台接受不到!...Q55:我有个复杂组件需要有新增和编辑的功能同时存在,但是字段要保持不变性怎么破 字段保持不变性怎么理解呢?...或者叫做不变性! Q56:“首屏加载比较慢!!怎么破!打包文件文件比较大” 依次排除和确认: 减少第三方库的使用,比如jquey这些都可以不要了,很少操作 dom,而且原生基本满足开发。

    57530

    Rxjs 响应式编程-第三章: 构建并发程序

    应用程序中的日常并发示例包括在其他活动发生时保持用户界面响应,有效地处理数百个客户的订单。 本章中,我们将通过为浏览器制作一个用于射击的太空飞船游戏来探索RxJS中的并发性和纯函数。...视频游戏是需要保持很多状态的计算机程序,但是我们将使用Observable管道和一些优秀的RxJS运算符的功能编写我们的游戏,没有任何外部状态。...我们一直使用本书中的管道; 使用RxJS进行编程时,它们无处不在。...这迫使我们跟踪我们管道外设置的变量,所有这些bean计数都很容易导致错误。为避免这种情况,管道中的运算符应始终使用纯函数。 相同输入的情况下,纯函数始终返回相同的输出。...每当鼠标移动时,combineLatest会发出新的SpaceShip位置和playerFiring的最后一个发射值,除非我们发射新子弹,否则它将保持不变

    3.6K30

    JavaScript 权威指南第七版(GPT 重译)(五)

    我们离开错误处理的话题之前,我想指出,虽然习惯于每个 Promise 链的末尾使用 .catch() 来清理(或至少记录)链中发生的任何错误,但在 Promise 链的其他地方使用 .catch()...在这种情况下,静态方法Promise.resolve()和Promise.reject()将实现您想要的效果。...如果你正在修改一个现有属性,那么你省略的属性将保持不变。请注意,此方法会更改现有的自有属性或创建新的自有属性,但不会更改继承的属性。...对象的 prototype 属性在对象创建时设置并通常保持不变。...它还演示了 Array 类对此迭代器方法的实现在每次迭代时都会检查数组长度,并且不假设数组长度迭代过程中保持不变

    24210

    Vue 脱坑记 - 查漏补缺(汇总下群里高频询问的xxx及给出不靠谱的解决方案)

    , 解决方案: npm install es6-promise // main.js 引入即可 // ES6的polyfill require("es6-promise").polyfill();...一般你axios或者其他 promise , 或者setInterval 这些默认都是指向最外层的全局钩子. 简单点说:"最外层的上下文就是 window,vue内则是 Vue 对象而不是实例!"...你最起码得本地搭个服务器才能访问好么!! ---- Q:CSSbackground引入图片打包后,访问路径错误 因为打包后图片是根目录下,你用相对路径肯定报错啊.......组件没有正确引入或者正确使用,依次确认 导入对应的组件 components 内声明 dom 区域声明标签 ---- Q: axios的 post 请求后台接受不到!...---- Q: 我有个复杂组件需要有新增和编辑的功能同时存在,但是字段要保持不变性怎么破 字段保持不变性怎么理解呢?

    5.1K30

    ECMAScript 6 新特性总结

    = 123; // 不起作用 1.4 全局对象的属性 全局对象是最顶层的对象,浏览器环境指的是window对象,Node.js指的是global对象。...它可以当作普通字符串使用,也可以用来定义多行字符串,或者字符串中嵌入变量。 使用规则: 模板字符串中嵌入变量,需要将变量名写在${}之中。...Number.parseInt(), Number.parseFloat():ES6将全局方法parseInt()和parseFloat(),移植到Number对象上面,行为完全保持不变。...不可以当作构造函数,也就是说,不可以使用new命令,否则会抛出一个错误。 不可以使用arguments对象,该对象函数体内不存在。...Promise.prototype.catch方法是Promise.prototype.then(null, rejection)的别名,用于指定发生错误时的回调函数。

    83210

    面试了20+前端大厂,整理出的面试题

    Promise的缺点:无法取消Promise,一旦新建它就会立即执行,无法中途取消。如果不设置回调函数,Promise内部抛出的错误,不会反应到外部。...对于浏览器的缓存,主要针对的是前端的静态资源,最好的效果就是,发起请求之后,拉取相应的静态资源,并保存在本地。...3)Promise缺点1、无法取消Promise,一旦新建它就会立即执行,无法中途取消。2、如果不设置回调函数,Promise内部抛出的错误,不会反应到外部。...Secure: 指定是否使用HTTPS安全协议发送Cookie。使用HTTPS安全协议,可以保护Cookie浏览器和Web服务器间的传输过程中不被窃取和篡改。...(4)如果float的值为none,则判断元素是否为根元素,如果是根元素则display属性按照上面的规则转换,如果不是,则保持指定的display属性值不变

    82530

    扫码

    添加站长 进交流群

    领取专属 10元无门槛券

    手把手带您无忧上云

    扫码加入开发者社群

    相关资讯

    热门标签

    活动推荐

      运营活动

      活动名称
      广告关闭
      领券