rxjs | 易学教程

RxJS 6 - Angular 6 - Properly canceling current http request if a new one is triggered

阅读更多关于 RxJS 6 - Angular 6 - Properly canceling current http request if a new one is triggered

问题 So I know this is totally possible but I have never used RxJs any more than simple http get and subscribes. I have a service that is listening for WebSocket events, when 1 such event triggers, I make a call to an Api to load some data. If that websocket event triggers while 1 api is already in transit I want to cancel it and then restart a new api call. I am not sure if I am correctly using SwitchMap and I am lost of how to use Pipe with RxJs 6. Is this the proper usage of SwitchMap and pipe

Easiest way to unsubscribe subscriptions Angular

阅读更多关于 Easiest way to unsubscribe subscriptions Angular

问题 Hi am very new to Angular. I have around 4 database queries and each of them are Subscriptions(rxjs/Rx) . So I know I need to unsubscribe each of my subscriptions to save memory leakage. How can I optimise the calling? I mean, I don't want to call each subscription and unsubscribe one by one. I wanna do it all the unsubscribe in one call. Sorry if its a stupid question. Any idea guys? Thanks in advance 回答1: subscriptions = Subscription[]; someMethod() { this.subscriptions.push(http.get(...)

Conditionally choose observable in RxJS

阅读更多关于 Conditionally choose observable in RxJS

问题 I would like to know how to create a new observable that will return one of two other observables based on if the first observable is empty (without calling the second observable by default). Eg: // scenario 1 let obs1 = Observable.empty(); let obs2 = Observable.of([1,2,3]); // This line doesn't work, but is essentially what I'm attempting to do let obs3 = (obs1.isEmpty()) ? obs2 : obs1; obs3.subscribe( i => console.log('Next: ', i)); // Next: 1 // Next: 2 // Next: 3 // Complete // scenario 2

How to handle errors inside reducers?

阅读更多关于 How to handle errors inside reducers?

问题 I've my loggerService and I need to catch all errors in reducer and send it via my service to the server. How can I do it? I know that reducer should be a pure function, but still any ideas? I need to add in reduser try catch case actions.GAMES_LOADED{ ...... try{} catch(err){ this.loggerService.error(err); } } Or maybe throw something in reducer and catch it in some place... Thanks a lot 回答1: Short answer: You don't. Why? - The reducer is only responsible for updating the store, it should

Angular 2 - Typescript: TS2322: Type 'Subscription' is not assignable to type 'Observable<MouseEvent>'

阅读更多关于 Angular 2 - Typescript: TS2322: Type 'Subscription' is not assignable to type 'Observable'

问题 I am using the click-outside directive from this plunk --> http://embed.plnkr.co/v7BMUv/ My TS compiler is throwing the following errors: TS2322: Type 'Subscription' is not assignable to type 'Observable'. Property '_isScalar' is missing in type 'Subscription'. TS2339 Property 'unsubscribe' does not exist on type 'Observable'. My tsconfig.json: { "compileOnSave": false, "compilerOptions": { "target": "es6", "module": "system", "moduleResolution": "node", "sourceMap": true,

How to correctly pass props to a component with RxJS in Angular 4?

阅读更多关于 How to correctly pass props to a component with RxJS in Angular 4?

Here is my component: @Component({ selector: 'bc-goods-detail', template: ` <span>good id: {{good?.id}}</span> <input [value]="good?.name" (input)="onInput($event)" /> <button (click)="onClick()">Save</button> `, styles: [] }) export class GoodsDetailComponent { @Input() good: Good; @Output() save = new EventEmitter<Good>(); onClick() { this.save.emit(this.good); } onInput ($event) { this.good.name = $event.target.value; } } When I change the name in input and then I am pressing save button and this.good is NOT CHANGED good. It is old good , like it was passed to the component. I started to

Prevent error rendering to View when waiting for Async / REST data from a Service - RxJS / Angular2

阅读更多关于 Prevent error rendering to View when waiting for Async / REST data from a Service - RxJS / Angular2

问题 This is a follow on question to a previous question I asked here: Exception: ObjectUnsubscribedError when working with Observables with RxJS and Angular2 In my component I wait for data to arrive from a service I have written that makes http requests to a REST Service. In my component view I reference the data that is returned thus... in my component import {Component} from 'angular2/core'; import {ROUTER_DIRECTIVES} from 'angular2/router'; import {UserContact, UserStatus} from '../../types

Continue the subscription after error

阅读更多关于 Continue the subscription after error

问题 I have a code where for each of the ids I am making an ajax request and processing them as results come in. Here is a simple replica of my actual code and jsfiddle: var ids = [1,2,3,4,5,6]; var ids$ = (id) => { return Observable.of(id); }; var loadIds$ = (id) => { if(id == 4) return xhr('/echo/jsoneee/', {id: id}); return xhr('/echo/json/', {id: id}); }; Observable.from(ids) .concatMap(id => Observable.forkJoin(ids$(id), loadIds$(id))) .catch((err, caught) => { //get the id for which loadIds

Return a Promise from Redux Observable

阅读更多关于 Return a Promise from Redux Observable

问题 Maybe I'm thinking about this wrong, but a common pattern I use with redux-thunk is to return a promise so I can perform some additional actions in the container object when something completes or fails. Using Thunk as an example: Action Creator: const action = ({ data }) => (dispatch) => fetch(`some http url`) .then(response => { if(response.ok) { return response.json(); } return Promise.reject(response); }) Somewhere in the connected component: this.props.action("Some Data") .then(console

http request every x seconds in angular

阅读更多关于 http request every x seconds in angular

问题 I'm trying to refresh an http call every x seconds in angular2. ionViewDidLoad() { let loader = this.LoadingController.create({ 'content':'Please Wait' }); loader.present().then(()=>{ this.http.request('http://mywebserver.com/apps/random.php').map(res=> res.json()).subscribe(data=>{ console.log(JSON.stringify(data)); loader.dismiss(); this.fact = data; },err=>{ loader.dismiss(); let alert = this.alertCtrl.create({ title: 'Error!', subTitle: 'Please check your Internet Connectivity', buttons: