Angular 2 has its own version of $q.when called RxJs

Question

Angular 2 has its own version of $q.when called RxJs

Back in the AngularJS 1.* days, I used to have this code snippet to refresh the auth-token:

...

if (!refreshTokenInProgress) {
  refreshTokenInProgress = AuthService.refreshToken();
}


$q.when(refreshTokenInProgress, function () {
  refreshTokenInProgress = null;

  // re-send requests with error
  ...
}, function () {
  // logout if refresh token rejected

  refreshTokenInProgress = null;

  ...
});

...

How do I convert this code to use Observables in Angular 2?

I'm stumped because this approach doesn't seem to be working:

if (!refreshTokenInProgress) {
  refreshTokenInProgress = AuthService.refreshToken().subscribe();
}

Observable.forkJoin([this.refreshTokenInProgress]).subscribe(
  success => this.refreshTokenInProgress = null
);

What is the equivalent of $q.when in RxJs?

angularjs angular typescript rxjs

Answer 1

Answer №1

When you use Observable.of(data), it is similar to using $q.when.

If you're interested, you can check out my article on transitioning from $q to RxJS at $Q map to RxJS

Here's an example taken from actual code:

spyOn(myService, 'getData').and.returnValue(Observable.of([{id: 1}, {id: 2}]));

Here's a slightly more intricate example:

   deleteRole(role: Role) {
Observable.fromPromise(this.confirmDialogService.open(DELETE_ROLE_TITLE, DELETE_ROLE_CONFIRM_BODY({name: role.name}))
  .switchMap(result => result ? Observable.of(result) : Observable.empty())
  .switchMap(() => this.rolesService.getUsersForRole(role.id))
  .switchMap(({elements: users}) => {
    return _.isEmpty(users) ?
      Observable.of(users) :
      Observable.fromPromise(
        this.confirmDialogService.open(ROLE_IN_USE_TITLE,
          ROLE_IN_USE_CONFIRM_BODY({users: users.map(({firstName, lastName}) => `${firstName} ${lastName}`)}),
          {hideCancelButton: true})
      ).switchMap(() => Observable.empty());
  })
  .switchMap(() => this.rolesService.deleteRole(role))
  .subscribe(data => {
      this.toastr.success(`Role '${role.name}' is deleted`, 'Success');
      this.findallRoles(); //Refresh role grid;
      this.roleDeleted.emit();
    },
    error => {
      this.toastr.error(error, 'Error (rolesService.delete)!', {dismiss: 'click'});
      console.error(error);
    });

}

Answer 2

When you use Observable.of(data), it is similar to using $q.when.

If you're interested, you can check out my article on transitioning from $q to RxJS at $Q map to RxJS

Here's an example taken from actual code:

spyOn(myService, 'getData').and.returnValue(Observable.of([{id: 1}, {id: 2}]));

Here's a slightly more intricate example:

   deleteRole(role: Role) {
Observable.fromPromise(this.confirmDialogService.open(DELETE_ROLE_TITLE, DELETE_ROLE_CONFIRM_BODY({name: role.name}))
  .switchMap(result => result ? Observable.of(result) : Observable.empty())
  .switchMap(() => this.rolesService.getUsersForRole(role.id))
  .switchMap(({elements: users}) => {
    return _.isEmpty(users) ?
      Observable.of(users) :
      Observable.fromPromise(
        this.confirmDialogService.open(ROLE_IN_USE_TITLE,
          ROLE_IN_USE_CONFIRM_BODY({users: users.map(({firstName, lastName}) => `${firstName} ${lastName}`)}),
          {hideCancelButton: true})
      ).switchMap(() => Observable.empty());
  })
  .switchMap(() => this.rolesService.deleteRole(role))
  .subscribe(data => {
      this.toastr.success(`Role '${role.name}' is deleted`, 'Success');
      this.findallRoles(); //Refresh role grid;
      this.roleDeleted.emit();
    },
    error => {
      this.toastr.error(error, 'Error (rolesService.delete)!', {dismiss: 'click'});
      console.error(error);
    });

}

Angular 2 has its own version of $q.when called RxJs

Answer №1

Similar questions

Modifying the onclick event of a button: A guide

What is the most effective way to access a variable from a service in all HTML files of Angular 2/4 components?

Limit function parameters to only accept values with matching keys

Include the image source in the array

Error in AngularJS service: unable to find method 'save'

Creating a unique directive to customize the height

"Seeking advice on how to nest a service provider within another one in AngularJS 2. Any

What is the best way to extract data from API console output using Angular?

The function signature '() => Element' is incompatible with the type 'string'

Exploring Angular data iteration with Tab and its contentLearn how to loop through Tab elements

AngularJS Currency Converter - Converting Currencies with Ease

"Modifying the form of an item by adjusting its variable, and rendering certain object properties as

Monitoring variables in different AngularJS controllers

When I delete the initial element from the array, the thumbnail image disappears

Solving the issue of loading Ember Initializers during the transition to TypeScript

Steps to create a function in a .js file that uses ng-show conditions

Oops! Looks like there's an issue with the type error: value.forEach is

Continuously encountering CORS errors despite activating them, using .NET Core in conjunction with an Angular client

Deleting an element from an object in TypeScript

ng-change does not fire a second time when the value is updated using event.target.value