How to pull data from an HTTP source without relying on promises

Question

How to pull data from an HTTP source without relying on promises

Here is a simplified version of the service code I am using:

    Load(Channel: any) {
        // 
        let URL = Globals.AppSiteRoot + Channel.URL
        return this.LoadData(URL)
    }

    Load_Default() {
        let URL = Globals.AppSiteRoot + "dir1/somedata.XML"
        console.log("XYZService.Load_Default------.------>>URL", URL)
        //
        return this.LoadData(URL)
            .then(data => {
                {
                    // do some processing here
                    console.log("XYZService.Load_Default<<P------.------data", data)
                    console.log("XYZService.Load_Default<<P------.------This.Data", this.Data)
                }
            });
    }

    // More information on async/await and Angular can be found at:
    // https://medium.com/@balramchavan/using-async-await-feature-in-angular-587dd56fdc77
    // https://v5.angular.io/api
    // https://v5.angular.io/guide/comparing-observables
    LoadData(URL: string) {

        return new Promise(resolve => {
            this.HttpClient.get(URL)
                .map(res => res)
                .subscribe(
                    data => {
                        console.log("XYZService.LoadData<<P------.------http.get=>data", data)
                        this.Data = data
                        resolve(this.Data)
                    },
                    err => {
                        console.log("XYZService.LoadData<<P------.------http:ERR", err)
                    }
                );
        });
    }

Within an XYZcomponent, I use the following method:

Show(Channel: any) {
        console.log("XYZComponent.Show------.------>>Channel>>" + Channel.URL)
        //
        this.XYZService.Load(Channel)
            .then(data => {
                console.log("XYZComponent.Show------.------>>data", data)  
                this.NavController.parent.select(1);
            });            
    }

You can streamline the component code by utilizing async/await as shown below:

    async ShowV2(Channel: any) {
        console.log("XYZComponent.Show------.------>>Channel>>" + Channel.URL)
        //
        const data = await this.XYZService.Load(Channel)
        console.log("XYZComponent------.------>>data", data)
        // 
        this.NavController.parent.select(1)
    }

If you are confused about whether to use Promises, Observables, or ReplaySubject(1), rest assured that it's a common issue faced by many developers.

Regarding error handling, some recommend avoiding HttpClient.get.subscribe in favor of .toPromise(), but proper error handling is crucial and must not be overlooked.

Async/await syntax may seem cleaner, but keep in mind that Observables still have their own advantages, especially in Angular development.

For your code in .Load() .Load_Default() and the component .Show() methods, consider expecting Observables and implementing them as needed.

Lastly, it's essential to establish clear coding patterns for event emitters like ReplaySubject(1) to avoid confusion when revisiting the code later.

If you're feeling lost in the sea of asynchronous operations, don't worry - simplicity is key, and with time and practice, you'll achieve your goal efficiently.

Please feel free to share any insights or template code with error-handling strategies you find effective in production environments.

npm show ionic version
5.4.16
npm show cordova version
9.0.0
npm show angular version
1.7.9
show @angular/core version
9.0.6
ng --version

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 9.0.4
Node: 10.16.0
OS: win32 x64

Angular: 5.0.3
... common, compiler, compiler-cli, core, forms, http
... platform-browser, platform-browser-dynamic
Ivy Workspace: Yes

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.900.4 (cli-only)
@angular-devkit/build-optimizer   0.0.35
@angular-devkit/core              9.0.4 (cli-only)
@angular-devkit/schematics        9.0.4 (cli-only)
@schematics/angular               9.0.4 (cli-only)
@schematics/update                0.900.4 (cli-only)
rxjs                              5.5.2
typescript                        2.8.3
webpack                           3.12.0

angular typescript promise observable ionic4

Answer 1

Answer №1

To enhance your Angular code, I recommend utilizing Observables instead of Promises as Angular heavily relies on them and promotes a reactive programming style.

Take a look at this sample code snippet:

@Injectable({
  providedIn: 'root'
})
export class SomeService {
  private readonly URL: string = 'someurl';

  constructor(private http: HttpClient) {}

  public loadData(): Observable<any> {
    return this.http.get(this.URL).pipe(
      // To handle errors, you can use the catchError operator
      // Alternatively, consider implementing an HTTP Interceptor for better error handling
      catchError(error => throwError(error)),
      map(res => // perform transformations if necessary),
      tap(res => // add side effects as needed)

     // Avoid subscribing in the service to adhere to best practices
  }
}

You can invoke the method in your component and manually subscribe or utilize the async pipe in the template for automatic subscription management.

Remember to unsubscribe from Observables to prevent memory leaks, although Angular takes care of this automatically for HttpClient instances.

For other Observables, consider using operators like take, first, last, takeUntil, or store subscriptions in properties of type Subscription and unsubscribe in the OnDestroy lifecycle hook (similar practice applies when using takeUntil with a Subject).

If you opt for Promises instead, handle errors with a trycatch block.

I have prepared a stackblitz demo here, which includes an error interceptor implementation.

Ensure to include the interceptor in the providers array of the app module like so:

providers: [{ provide: HTTP_INTERCEPTORS, useClass: ErrorInterceptor, multi: true }],

Answer 2

To enhance your Angular code, I recommend utilizing Observables instead of Promises as Angular heavily relies on them and promotes a reactive programming style.

Take a look at this sample code snippet:

@Injectable({
  providedIn: 'root'
})
export class SomeService {
  private readonly URL: string = 'someurl';

  constructor(private http: HttpClient) {}

  public loadData(): Observable<any> {
    return this.http.get(this.URL).pipe(
      // To handle errors, you can use the catchError operator
      // Alternatively, consider implementing an HTTP Interceptor for better error handling
      catchError(error => throwError(error)),
      map(res => // perform transformations if necessary),
      tap(res => // add side effects as needed)

     // Avoid subscribing in the service to adhere to best practices
  }
}

You can invoke the method in your component and manually subscribe or utilize the async pipe in the template for automatic subscription management.

Remember to unsubscribe from Observables to prevent memory leaks, although Angular takes care of this automatically for HttpClient instances.

For other Observables, consider using operators like take, first, last, takeUntil, or store subscriptions in properties of type Subscription and unsubscribe in the OnDestroy lifecycle hook (similar practice applies when using takeUntil with a Subject).

If you opt for Promises instead, handle errors with a trycatch block.

I have prepared a stackblitz demo here, which includes an error interceptor implementation.

Ensure to include the interceptor in the providers array of the app module like so:

providers: [{ provide: HTTP_INTERCEPTORS, useClass: ErrorInterceptor, multi: true }],

How to pull data from an HTTP source without relying on promises

Answer №1

Similar questions

Struggling to make fetch function properly within a NextJs middleware function

Apollo Client's useQuery function is causing unnecessary refetches when using Next.js' router.push method

The specific type of selection return type in Prisma is restricted

Leveraging the power of Chart.js and Ng2-Chart within the Cumulocity platform

Is it possible to multitask within a structural directive by performing two actions simultaneously?

Ways to set a default selection for an md-radio-button in md-radio-groups

Arranging Angular Array-like Objects

Asynchronous requests from clients paired with server-side rendering

Issue with the drag functionality of Framer Motion carousel causing malfunction

Using custom hooks in JSX triggers a TypeScript error when the returned component is accessed

Encountering error in Xcode Archive command when using Ionic Capacitor with React - Command PhaseScriptExecution terminated with a non-zero exit code

Using Pipe directive in Angular 2 with ES5: Error - Directive annotation missing from constructor

Issue with caching when using lazy loading with Angular 2 components

Is there a way to implement this toolbar in Ionic Angular?

elimination of nonexistent object

Highlighting DOM elements that have recently been modified in Angular

Exploring the world of publishing Angular 2 applications

From the service to the component, navigating the array in Angular

Is it feasible to send a variable to angular.json in order to prevent repetitive code?

The Vuex MutationAction decorator cannot be assigned to a TypedPropertyDescriptor