Converting a Promise to an Observable in Angular using Typescript

Question

Converting a Promise to an Observable in Angular using Typescript

I have a working method that functions as intended:

getdata(): Promise<any> {
    let query = `SELECT * FROM table`;
    return new Promise((resolve, reject) => {
      this.db.query(query, (error, rows) => {
        if(error) reject(error);
        resolve(rows);
      });
    });
}

ngOnInit() {
    this.myservice.getdata().then(result => {
      this.data = result;
    })
}

I'm currently using Angular 9 along with Electron.

Is there a way I can modify this to operate as an Observable instead?

angular typescript rxjs observable es6-promise

Answer 1

Answer №1

By simply wrapping any promise with from, you can easily convert it into an observable:

fetchData(): Observable<any> {
    let query = `SELECT * FROM table`;
    return from(new Promise((resolve, reject) => {
      this.db.query(query, (error, rows) => {
        if(error) reject(error);
        resolve(rows);
      });
    }));
}

Alternatively, you have the option to bypass the promise and directly create an observable:

fetchData(): Observable<any> {
    let query = `SELECT * FROM table`;
    return new Observable((obs) => {
      this.db.query(query, (error, rows) => {
        if (error) {
          obs.error(error);
        } else {
          obs.next(rows);
          obs.complete();
        }
      });
    });
}

Answer 2

By simply wrapping any promise with from, you can easily convert it into an observable:

fetchData(): Observable<any> {
    let query = `SELECT * FROM table`;
    return from(new Promise((resolve, reject) => {
      this.db.query(query, (error, rows) => {
        if(error) reject(error);
        resolve(rows);
      });
    }));
}

Alternatively, you have the option to bypass the promise and directly create an observable:

fetchData(): Observable<any> {
    let query = `SELECT * FROM table`;
    return new Observable((obs) => {
      this.db.query(query, (error, rows) => {
        if (error) {
          obs.error(error);
        } else {
          obs.next(rows);
          obs.complete();
        }
      });
    });
}

Answer 3

Answer №2

One potential solution is to utilize a RxJS Subject observable.

completed$ = new Subject<any>();

retrieveData(): Observable<any> {
  const result = new BehaviorSubject<any>(null);
  const query = `SELECT * FROM table`;
  this.db.query(query, (error, rows) => {
    error ? result.error(error) : result.next(rows);
  });
  return result.asObservable();
}

ngOnInit() {
  this.myservice.retrieveData().pipe(
    takeUntil(this.completed$)
  ).subscribe(
    rows => {
      if (rows) {          // <-- validate response
        this.data = rows;
      } 
    },
    error => { }
  );
}

ngOnDestroy() {
  this.completed$.next();
  this.completed$.complete();
}

Answer 4

One potential solution is to utilize a RxJS Subject observable.

completed$ = new Subject<any>();

retrieveData(): Observable<any> {
  const result = new BehaviorSubject<any>(null);
  const query = `SELECT * FROM table`;
  this.db.query(query, (error, rows) => {
    error ? result.error(error) : result.next(rows);
  });
  return result.asObservable();
}

ngOnInit() {
  this.myservice.retrieveData().pipe(
    takeUntil(this.completed$)
  ).subscribe(
    rows => {
      if (rows) {          // <-- validate response
        this.data = rows;
      } 
    },
    error => { }
  );
}

ngOnDestroy() {
  this.completed$.next();
  this.completed$.complete();
}

Answer 5

Answer №3

To transform a function containing a callback where the first parameter is error (referred to as "Node.js-style callback") into an Observable, it is recommended to use bindNodeCallback:

retrieveData(): Observable<any> {
  const query = `SELECT * FROM table`;
  return bindNodeCallback(this.db.query)(query)
}

// handling subscription:
ngOnInit() {
  this.dataService.retrieveData().subscribe(response => {
    this.data = response;
  });
}

Source

Answer 6

To transform a function containing a callback where the first parameter is error (referred to as "Node.js-style callback") into an Observable, it is recommended to use bindNodeCallback:

retrieveData(): Observable<any> {
  const query = `SELECT * FROM table`;
  return bindNodeCallback(this.db.query)(query)
}

// handling subscription:
ngOnInit() {
  this.dataService.retrieveData().subscribe(response => {
    this.data = response;
  });
}

Source

Answer 7

Answer №4

A recommended approach is to utilize the bindNodeCallback method.

fetchData(): Promise<any> {
  return bindNodeCallback(this.database.query)(`SELECT * FROM table`);
}

initialize() {
  this.myService.fetchData().subscribe(response => {
    this.data = response;
  });
}

Answer 8

A recommended approach is to utilize the bindNodeCallback method.

fetchData(): Promise<any> {
  return bindNodeCallback(this.database.query)(`SELECT * FROM table`);
}

initialize() {
  this.myService.fetchData().subscribe(response => {
    this.data = response;
  });
}

Converting a Promise to an Observable in Angular using Typescript

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

The Challenge of Iterating Through an Array of Objects in Angular Components using TypeScript

After the upgrade from Angular 5.2 to Angular 6, Bootstrap 4 dropdown and Bootstrap-select dropdown seem to have lost their dropdown functionality. This issue arose after updating to Bootstrap 4 and jquery

Tips for arranging mat-option in alphabetical order using typescript in Angular 7 Material Design

Modifying Data with MomentJS when Saving to Different Variable

Warning: NG2 RC5 has deprecated the use of HTTP_PROVIDERS

What is the syntax for invoking a function within a nested function in TypeScript?

The application within the Main Module is not being acknowledged by the other components within the module

In Angular 2, transferring data from a parent route to a child route

Building secure authentication with Angular, node.js, and an identity provider through SAML integration

Unable to process JSON request in Node.js

Guide on implementing a .catch method in Firebase's onSnapshot function

The attribute 'limitTags' is not present in the type 'IntrinsicAttributes & AutocompleteProps'

Ways to display a component using *ngIf else

"Can anyone provide guidance on how to customize form fields in Angular Material 16, such as removing borders, changing colors, and other

Tips for arranging backend data horizontally within Bootstrap horizontal cards

Steps for developing a Global service in Angular

Guide to altering the characteristics of a button

Encountering a Spring Boot 404 error when deploying static content as a jar file

What steps should be taken to rectify the issue in the Angular HttpClient concerning the delete method?

Iterating over an object and inserting values into a JavaScript object using the ascending count as the identifier