Angular 14: Promise rejection not handled

Question

Angular 14: Promise rejection not handled

Below is the function I am using:

  createVersion(data: any): Promise<any> {
    return new Promise((resolve, reject) => {
      this._httpClient
        .post(`${environment.apiUrl}/v1.0/versions`, data, {
          observe: "response",
        })
        .subscribe((response: any) => {
          resolve(response);
        }, reject);
    });
  }

When I invoke it like this:

this._versionAddService.createVersion(args).then((result) => {})

I encounter the following error:

core.mjs:7640 ERROR Error: Uncaught (in promise): OK at resolvePromise (zone.js:1213:31) at resolvePromise (zone.js:1167:17) at zone.js:1279:17 at ZoneDelegate.invokeTask (zone.js:406:31) at Object.onInvokeTask (core.mjs:26363:33) at ZoneDelegate.invokeTask (zone.js:405:60) at Zone.runTask (zone.js:178:47) at drainMicroTaskQueue (zone.js:582:35) at ZoneTask.invokeTask [as invoke] (zone.js:491:21) at invokeTask (zone.js:1600:14)

angular typescript

Answer 1

Answer №1

As noted in previous responses, there is no need to wrap it into a promise. RxJs/Observables are commonly used in Angular and you can often just keep it as an observable. The advantages include the various RxJs operators that simplify complex data transformations, making it easy to react to streams of data. Additionally, Angular facilitates subscription and unsubscription directly in the templates with the async pipe.

The error you are encountering might be due to missing the catch method (refer to createVersion2 for an example).

However, if you still prefer using promises, here's how you can implement it:

  createVersion(data: any): Promise<any> {
    return firstValueFrom(
      this._httpClient
        .post(`${'environment.apiUrl'}/v1.0/versions`, data, {
          observe: 'response',
        })
        .pipe(catchError((e) => of(`Formatted exception: ${e.error}`)))
    );
  }

  // Note that toPromise() is actually deprecated!
  createVersion2(data: any): Promise<any> {
    return this._httpClient
      .post(`${'environment.apiUrl'}/v1.0/versions`, data, {
        observe: 'response',
      })
      .toPromise()
      .catch((e) => `Formatted exception: ${e.error}`);
  }

Answer 2

As noted in previous responses, there is no need to wrap it into a promise. RxJs/Observables are commonly used in Angular and you can often just keep it as an observable. The advantages include the various RxJs operators that simplify complex data transformations, making it easy to react to streams of data. Additionally, Angular facilitates subscription and unsubscription directly in the templates with the async pipe.

The error you are encountering might be due to missing the catch method (refer to createVersion2 for an example).

However, if you still prefer using promises, here's how you can implement it:

  createVersion(data: any): Promise<any> {
    return firstValueFrom(
      this._httpClient
        .post(`${'environment.apiUrl'}/v1.0/versions`, data, {
          observe: 'response',
        })
        .pipe(catchError((e) => of(`Formatted exception: ${e.error}`)))
    );
  }

  // Note that toPromise() is actually deprecated!
  createVersion2(data: any): Promise<any> {
    return this._httpClient
      .post(`${'environment.apiUrl'}/v1.0/versions`, data, {
        observe: 'response',
      })
      .toPromise()
      .catch((e) => `Formatted exception: ${e.error}`);
  }

Answer 3

Answer №2

To convert your Observable to a Promise in RxJS 7, you can utilize the lastValueFrom function. However, be cautious as the toPromise() method is deprecated in RxJS 7 and will be removed in RxJS 8.

Answer 4

To convert your Observable to a Promise in RxJS 7, you can utilize the lastValueFrom function. However, be cautious as the toPromise() method is deprecated in RxJS 7 and will be removed in RxJS 8.

Answer 5

Answer №3

Here is an example of how to utilize the HttpClient.post() method.

Utilizing a Service

createVersion(data: any): Observable<any> {
  const url = `${environment.apiUrl}/v1.0/versions`;
  const opts = {
    observe: "response",
  };
  return this._httpClient.post(url, data, opts);
}

This is how you can make the call.

this._versionAddService.createVersion(args).subscribe(resp => {});

Answer 6

Here is an example of how to utilize the HttpClient.post() method.

Utilizing a Service

createVersion(data: any): Observable<any> {
  const url = `${environment.apiUrl}/v1.0/versions`;
  const opts = {
    observe: "response",
  };
  return this._httpClient.post(url, data, opts);
}

This is how you can make the call.

this._versionAddService.createVersion(args).subscribe(resp => {});

Angular 14: Promise rejection not handled

Answer №1

Answer №2

Answer №3

Similar questions

Angular 2 - Oops! The "app-root" selector isn't finding any elements to match

How can you dynamically disable a radio option button using Angular rendering without relying on an ID?

Are there any other options for handling the click event for all elements in Angular besides writing a click function for

Ensure that any modifications made to an Angular service are reflected across all components that rely on that service

What is the reason behind receiving the error message "`Foo` only represents a type, but is being treated as a value here" when using `instanceof` in TypeScript?

How to automatically redirect in Angular 2 by utilizing router.navigate

Angular button router link is not functioning properly

"Obtaining the file name rather than the file path using ngModel and ng2-file-upload: A simple guide

Visual Studio 2015 is struggling to locate a specific module, yet the command line interface for

Maximizing the Capabilities of the IIS URL Rewrite Module

What to do when faced with the Netlify Error "Dependency Installation Failure"?

Dealing with Incoming HTML Content from Backend in Angular 5

Why is it that a static variable cannot be accessed using the `this` keyword in a static method when the static method is called in any route's controller in NODEJS?

An error may occur when Typescript is instantiated with a varying subtype of constraint

`How can I successfully publish an Angular2 Component to npm while keeping the templateUrl html file separate?`

What techniques can I use to adjust the size of an image through zooming in and out?

Structuring your Angular 6 application and server project

Is there a way to ensure that in angular 2+, when clicking on a button with the same route as the current page, the page will reload?

Having trouble with NPM build getting stuck in Azure DevOps

The spinner failed to appear within 2000 milliseconds