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

Angular 9 HTTP Interceptor在使用@ngrx/store时不起作用

Angular 9 HTTP Interceptor是Angular框架中的一个功能,用于拦截HTTP请求和响应,以便在发送请求之前或收到响应之后执行一些额外的逻辑。@ngrx/store是一个用于状态管理的Angular库,它可以帮助我们管理应用程序的状态。

当使用@ngrx/store时,Angular 9 HTTP Interceptor可能不起作用的原因可能是由于以下几个方面:

  1. 顺序问题:拦截器的顺序很重要。如果在@ngrx/store之前注册了拦截器,那么它可能不会被执行。确保将@ngrx/store拦截器注册在其他拦截器之前。
  2. 异步问题:如果在拦截器中使用了异步操作,例如发起一个HTTP请求,那么@ngrx/store可能无法正确处理这个异步操作。在拦截器中避免使用异步操作,或者确保在异步操作完成后手动触发@ngrx/store的相关操作。
  3. 配置问题:检查拦截器的配置是否正确。确保拦截器已经正确地添加到Angular的providers中,并且已经在模块或组件中进行了正确的导入。
  4. 版本兼容性问题:确保使用的Angular版本和@ngrx/store版本是兼容的。有时候不同版本之间可能存在一些兼容性问题,导致拦截器无法正常工作。

针对以上问题,可以尝试以下解决方案:

  1. 确保将@ngrx/store拦截器注册在其他拦截器之前,可以通过在拦截器提供商数组中的位置来控制拦截器的顺序。
  2. 避免在拦截器中进行异步操作,或者在异步操作完成后手动触发@ngrx/store的相关操作。
  3. 检查拦截器的配置是否正确,确保已经正确地添加到Angular的providers中,并且已经在模块或组件中进行了正确的导入。
  4. 确保使用的Angular版本和@ngrx/store版本是兼容的,可以查阅官方文档或社区资源来了解版本兼容性问题。

关于Angular 9 HTTP Interceptor和@ngrx/store的更多信息,可以参考以下链接:

  • Angular 9 HTTP Interceptor官方文档:https://angular.io/guide/http#intercepting-requests-and-responses
  • @ngrx/store官方文档:https://ngrx.io/guide/store

请注意,以上答案仅供参考,具体解决方案可能因实际情况而异。

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

相关·内容

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

    每次我们改变我们的代码Angular CLI都会重新编译,如果需要的话重新注入,并要求我们的浏览器页面打开重新加载页面。...Angular做得非常快,所以大多数情况下,当你将你的窗口从IDE切换到浏览器,它已经为你重新加载了。...您可以项目的所有部分使用该文件中的值,并environment.tsAngular CLI负责提供来自相应项目的内容将其包含在内environment.your-environment.ts。...为此,让我们我们的控制台中运行: yarn add @ngrx/core @ngrx/store ngrx-store-logger yarn add v1.3.2 [1/4] ?...我们可以使用诸如ngrx-store-localstorage之类的东西来存储我们的数据到浏览器的localStore,但是如何使用API​​呢?

    42.6K10

    写在 2021: 值得关注学习的前端框架和工具库

    [1], 有很奇妙的感觉,因为我最开始入门前端,也是以Vue入的门,“学完”Vue之后, 我也有了类似的疑问,但当时的我没多想,觉得“技多不压身”,反正都是前端,以后肯定用得上,那就学呗。...(比如我下面进行的归类),提取他们的共同点,这样开始学习一个新东西,你通常已经拥有了可复用的经验(比如在之前我感兴趣的研究了一些装饰器相关,使得后面入门Nest/Angular等都特别快),所以你的学习能力通常会是越来越强的...Nx Cloud[76],Nx(详细介绍见下面)提供的云平台,主要功能是项目达到一定规模,导致构建耗时较长,避免每个开发人员要重新自己本地构建一次项目,而是从云端下载已构建完成的文件,以此来提高效率...一体化框架 一体化框架指的是, 你的前后端项目放在同一个repo里(后端是Node),同时前端直接调用在后端定义的方法,由框架在编译去自动的把前端对后端的方法调用转换成HTTP请求。...秉承了Angular的思想,提供了一整套的集成:和Angular Router的集成:@ngrx/router-store;对于集合类型的适配:@ngrx/entity;副作用管理:@ngrx/effects

    4.2K10

    Angular vs React 最全面深入对比

    ,尽可能的为你选择提供更多的参考意见。...该类库已被Angular采用其HTTP模块以及一些内部使用。当您执行HTTP请求,它返回一个Observable,而不是通常的Promise。 虽然这个类库非常强大,但也很复杂。...当您使用连续数据流(如Web套接字)工作很多的情况下,RxJS非常有用,但是对于其他任何东西来说似乎过于复杂。 无论如何,当你使用Angular,您至少应该了解RxJS的基本知识。...@ngrx/store @ngrx/store是由Redux启发的Angular的状态管理库,基于由pure reducer进行突变的状态。...总结 通过以上的6个方面对比了React和Angular这两个目前最热的前端框架,希望能对你选择提供一些参考。但是否真的是合适自己的,或许真的需要用过才知道 ? Good luck~~~

    3.8K70

    给2019前端开发的你5个进阶建议~

    庆幸的是除了 React 社区,Vue 社区有类似的 Vuex,Angular 社区有 NgRx 也提供了几乎同样的能力,甚至 NgRx 还可以无缝使用 redux-devtools 来调试状态变化。...无论如何优化,始终要遵循 Redux 三原则: 原则 方法 引发的问题 Single source of truth 组件 Stateless,数据来源于 Store 如何组织 Store?...曾经 React 和 Angular 是两个很难调和的框架,开发中浪费了我们大量的人力。...另外 iron-redux 能接收到 Pont 接口响应数据格式,并推导出整个 Redux 状态树的静态类型定义,Store 中的数据完美的类型提示。...与此同时 Sass/Less 社区也飞速发展,尤其是 Stylelint 的成熟,可以通过技术约束的手段来避免 CSS 的 Bad Parts。

    1K10

    SAP 电商云 Spartacus UI Store 相关的设计明细

    Store state.ts 定义了和 Site Context 业务相关的 State 数据模型。...注意 SITE_CONTEXT_FEATURE 的使用场合,除了本文件定义 feature state 之外,还用在下列两个文件内: 场景1:用来创建 feature selector: 场景2:使用...StoreModule.forFeature 注册 store: 当使用 createSelector 和 createFeatureSelector 函数,@ngrx/store 会跟踪调用选择器函数的最新参数...因为选择器是纯函数,所以当参数匹配可以返回最后一个结果,而无需重新调用选择器函数。 这可以提供性能优势,特别是对于执行昂贵计算的选择器。...selectFeatureCount = createSelector( selectFeature, (state: FeatureState) => state.counter ); 我做过测试,

    12210

    写在2021: 值得关注学习的前端框架和工具库

    , 有很奇妙的感觉,因为我最开始入门前端,也是以Vue入的门,“学完”Vue之后, 我也有了类似的疑问,但当时的我没多想,觉得“技多不压身”,反正都是前端,以后肯定用得上,那就学呗—— 结果我一路到现在都是处于这么一种状态...(比如我下面进行的归类),提取他们的共同点,这样开始学习一个新东西,你通常已经拥有了可复用的经验(比如在之前我感兴趣的研究了一些装饰器相关,使得后面入门Nest/Angular等都特别快),所以你的学习能力通常会是越来越强的...AngularAngular 是我最近正在学的框架,开始前我其实是拒绝的,但写了两个例子之后我觉得真香!...一体化框架 一体化框架指的是, 你的前后端项目放在同一个repo里(后端是Node),同时前端直接调用在后端定义的方法,由框架在编译去自动的把前端对后端的方法调用转换成HTTP请求。...秉承了Angular的思想,提供了一整套的集成:和Angular Router的集成:@ngrx/router-store;对于集合类型的适配:@ngrx/entity;副作用管理:@ngrx/effects

    2.9K10

    前端架构101:MVC的不足与Flux的崛起

    包括但不限于:Redux,Mobx,Ngrx,Akita,React 等等。...但在它诞生之初,无论是 Reddit, Youtube,还是 InfoQ 上甚至至今为止都有批评的声音, 但在你的那些使用了 Flux 的项目中,有多少项目可维护性上是成功的?...注意 store 层工作是不会引起任何的副作用的, store 完成上一个 action 的工作之前,不会有其他的 action 再次经过 dispatch 达到 store。...到了 store 中新增字段的这一个环节,无论是你是使用 Redux 还是 Mobx 相信你都能迅速的找到对应的 model / reducer 在哪。...如果你开发的是 Angular 应用,Angular 本身,或是 Rxjs 又或是 TypeScript 哪一个单拎出来都不好对付,指望着人们自我学习或者培训的方式统一大家的水平更是天方夜谭。

    1.4K20

    Angular 面试题汇总2-ComponentService (Angular v8+)

    这是 Angular 的默认设置。 ViewEncapsulation.Native – 使用原生的 Shadow DOM 特性。但需要考虑浏览器是否支持。...单例服务(singleton) 使用Angular CLI创建服务,默认会创建单例服务; 把 @Injectable() 的 providedIn 属性声明为 root, 即为单例服务。...对于复杂的全局变量,推荐使用状态管理组件(state management – Ngrx)。...forRoot() 模式 如果多个调用模块同时定义了 providers (服务),那么多个特性模块中加载此模块,这些服务就会被注册多个地方。...有多种方式来防止这种现象: 用 providedIn 语法代替模块中注册服务的方式。 把服务分离到它们自己的模块中。 模块中分别定义 forRoot() 和 forChild() 方法。

    947140

    【译】我是如何学习任意前端框架的

    如今,大多数现代框架都使用JSX或HTML模版引擎,生命周期钩子--提供生命瞬间可见性,比如创建,渲染,注销以及它们发生的行为能力。 路由 如今,大多数现代框架都提供API来创建和管理客户端路由。...现在,所有框架都提供API来管理你的状态(例如Angular有一个Service,React现在有Context API)以及当你的数据规模变大之后,你可以考虑使用像redux这样的库。...端点API示例: Github API OMDb API Spotify Web API wunderground API reddit API 你将学到: 使用HTTP客户端向端点API发起请求 使用键盘事件监听器...尝试为后端框架添加auth功能 4.聊天应用 在前面的章节中,对后端的所有请求都是单向的,你管理应用程序状态没有问题。...你将学到: 学习如何使用管理状态解决方案,如redux for react, ngrx for angular 2+ 或 vuex for vuejs以及如何将其与客户端应用程序集成 使你的应用更灵活

    3.6K10

    Angular 中的请求拦截

    在上一篇的文章 Angular使用 Api 代理,我们处理了本地联调接口的问题,使用了代理。 我们的接口是单独编写的处理的,实际的开发项目中,有众多的接口,有些需要登陆凭证,有些不需要。...使用 angular-cli 生成项目的时候,它已经自动做好了环境的区分, app/enviroments 目录下: environments...当然,你这里添加的内容要配合你代理上加的内容调整,读者可以自己思考验证 添加拦截器 我们生成服务 http-interceptor.service.ts 拦截器服务,我们希望每个请求,都经过这个服务...// http-interceptor.service.ts import { Injectable } from '@angular/core'; import { HttpEvent, HttpHandler.../services/http-interceptor.service'; providers: [ // 依赖注入 { provide: HTTP_INTERCEPTORS,

    2.4K20

    对开源框架跃跃欲试,却在写的时候犯了难?

    不知同为程序员的你,每每看到高星、高性能、高效、融合了新特性的开源框架,是否也有过想要试试的冲动?...当你怀着激动心颤抖的手,却在敲击第一行代码犯了难:不知道写什么项目、不会搭建项目结构,此时此刻心里又不免打起了退堂鼓。...+ NgRx + Nx 地址:https://github.com/stefanoslig/angular-ngrx-nx-realworld-example-app React + Next + SWR...但它们中有的用到的开源框架版本较低或已经过时,使用时得注意一下,开源不易还望多多包涵。 现在有了 RealWorld,当你再遇到那些让你摩拳擦掌的开源框架,就知道从哪下手,不会再留有遗憾啦!...正所谓 千里之行始于足下——《道德经》 也只有掌握了基础的功能,才能玩转这些开源框架,从而扩充你的武器库,应对不同场景和多变的需求,能够做到举重若轻泰然自若。

    59610
    领券