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

Ag-grid's external filtering feature allows users to easily apply

Using AngularJS with angular-google-maps to easily add markers through a form and locate your position with one click

The nested div within the ui-view element is failing to expand to the entire width of the window

Regular expressions that identify text located at the conclusion of a URL

Display a page containing two distinct JSON arrays using Angular

Angular JS Troubleshooting: Application Not Functioning Properly

The $ionicModal fails to reflect any updates in the content when changes are made in the controller while the modal is open

The spread operator seems to be malfunctioning whenever I incorporate tailwindcss into my code

Leverage the power of TypeScript custom transformer and project reference for enhanced

Malfunction in parsing the post request body

Angular's $watch function does not receive the parameter 'newVal'

Previewing files from external URLs with Ionic 5 Capacitor and Angular

Eliminate the X-Powered-By:express response header from the Angular UI navigation URL

Angular Link Panel

Angular 4: Loading components sequentially

Access a Map URL through a native mapping application on your device

Shopping cart development using AngularJS with Ionic Framework

Simple steps to transform the "inputs" syntax into the "@Input" property decorator

Is Angular Translate susceptible to race conditions when using static files for multi-language support?

Executing the command `subprocess.run("npx prettier --write test.ts", shell=True)` fails to work, however, the same command runs successfully when entered directly into the terminal