Ways to address observables in Angular in a manner similar to deferred objects

Question

Ways to address observables in Angular in a manner similar to deferred objects

Transitioning from AngularJS to Angular has posed a challenge for me, especially when it comes to moving from promises to observables. Below is an example of my code in AngularJS:

var deferred = $q.defer(),
    frame = document.createElement('newFrame');

/// some code here...

frame.onload = function () {
    /// code..
    deferred.resolve();
}

frame.onerror = function () {
    /// code..
    deferred.reject();
}

document.body.appendChild(frame);

return deferred.promise;

I have been struggling to rewrite this code using observables in Angular. After browsing through various questions on StackOverflow, I came across this question. However, since I am not using HTTP API in this scenario, the conversion process seems more complex.

Is there any alternative solution available?

javascript angular typescript rxjs

Answer 1

Answer №1

Utilize subjects, special observables, to handle asynchronous operations.

// Example of usage
this.myObservableFunc().subscribe({
  next: () => {
    // Code to execute on success
  },
  error: () => {
    // Code to execute on error
  }
);

// Function that returns an Observable
public myObservableFunc(): Observable<void> {
  var subject$: Subject<void> = new Subject(),
      frame = document.createElement('newFrame');

  /// Some code here...

  frame.onload = function () {
    /// Execute this code on load...
    subject$.next(); // Trigger success
    subject$.complete(); // This subject will not emit values anymore
  }

  frame.onerror = function () {
    /// Execute this code on error...
    subject$.error(); // Trigger error (also completes the subject)
  }

  document.body.appendChild(frame);

  return subject$.asObservable();
}

Answer 2

Utilize subjects, special observables, to handle asynchronous operations.

// Example of usage
this.myObservableFunc().subscribe({
  next: () => {
    // Code to execute on success
  },
  error: () => {
    // Code to execute on error
  }
);

// Function that returns an Observable
public myObservableFunc(): Observable<void> {
  var subject$: Subject<void> = new Subject(),
      frame = document.createElement('newFrame');

  /// Some code here...

  frame.onload = function () {
    /// Execute this code on load...
    subject$.next(); // Trigger success
    subject$.complete(); // This subject will not emit values anymore
  }

  frame.onerror = function () {
    /// Execute this code on error...
    subject$.error(); // Trigger error (also completes the subject)
  }

  document.body.appendChild(frame);

  return subject$.asObservable();
}

Ways to address observables in Angular in a manner similar to deferred objects

Answer №1

Similar questions

Troubleshooting Angular 2 with TypeScript: Issue with view not refreshing after variable is updated in response handler

ng-class not functioning properly when invoked

Encountering an Issue Executing Selenium Test on jQuery v2.0.2 and Play Framework

What is the process of adding information to a JSON file?

Mastering Array Dispatch in VueJS

Strategies for Creating a Test Suite for RepositoryFactory in Vue.js/Nuxt.js

The GIF Loader fails to animate while an AJAX request is in progress

The issue of req.file being consistently undefined in Node.js multer

Steps for importing a CommonJS module with module.exports in Typescript

Ways to trigger an onClick event of one div based on the presence of another div

Modifying button appearance upon clicking using JavaScript

Is it universally compatible to incorporate custom attributes through jquery metadata plugin in all web browsers?

Issue with the intersection of mouse and camera rays in three.js

Implementing Bootstrap 4 validation within a modal using JSON data

I'm having some unexpected reflections with the threejs cube camera

Using Gulp Filter in Conjunction with Source Maps

Tips for minimizing the transfer time of large arrays using ajax

How to prevent horizontal scrolling on the right side of a div element

Incomplete JSON response being received

Can a custom type guard be created to check if an array is empty?