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

Learn how to properly display the state array within a React component. Even though the array is present in the state, you may encounter issues where it

Troubleshooting problem with decrypting data using CryptoJS AES256

Leverage Express JS to prevent unauthorized requests from the Client Side

Switching carousel background image upon navigation click

Purge POST request cache in Node.js

Deciphering TS2345: "The argument supplied, known as 'typeof MyComponent', cannot be assigned to the specified parameter type"

Adjust the width of xAxis[0] and xAxis[1] in Highcharts to their default values

Challenges when working with AJAX/jQuery in terms of fetching JSON data and setting dataType

I need help with creating an AJAX JSON call using Angular. Let me share the JavaScript function that I currently have

Error: The function expressJwt is not recognized as a valid middleware

Mastering the nesting of keys in Typescript.Unlock the secrets of

This asynchronous function will provide a response of "undefined"

Learn how to configure an Angular2 Template Driven form element by implementing two-way binding and integrating template driven form validation techniques

Choose a specific inner div element within another div using jQuery

Yeoman - A guide for integrating an express server task into Gruntfile.js from the generator-angular template

Locate a specific data point within an array of JSON objects

Automatically switch tabs upon pressing/scanning the Return key (using PHP, MySQL, and JavaScript)

At what point is the ngOnInit function invoked?

AngularJS - Ensuring the <script> tag is included only after all directives have been rendered

What could be preventing the webpack dev server from launching my express server?