Fulfilling a pledge from an external source to postpone the implementation of the program

Question

Fulfilling a pledge from an external source to postpone the implementation of the program

In my Angular service, there is an object called _mapView that gets initialized after the entire application and its dependencies are loaded. However, there is a possibility that users might interact with buttons or other elements triggering get-calls to this mapView object before the app is fully loaded, as the mapView loads asynchronously.

My aim is to ensure that if the object is not initialized yet, the program will wait until the mapView is ready.

@Injectable()
export class MapService {
   private _mapViewPromiseResolveFx;
   private _mapView: Promise<__esri.MapView> = new Promise(function(res, rej){
       this._mapViewPromiseResolveFx = res;
   }.bind(this)); // saving a reference to the resolve function allows the promise to be resolved externally

   public resolveMapView(mapView: __esri.MapView) {
      this._mapViewPromiseResolveFx(mapView);
   }

   public getMapView() {
      return this._mapView;
   }
}

At some point during the initialization of the AppComponent, I initialize this variable:

self.mapService.resolveMapView(new MapView(mapViewProperties));

Therefore, whenever I require the mapView, I use:

this.mapService.getMapView().then(function(mapView) {

Although this method appears to work, it feels like a somewhat clumsy approach and potential misuse of promises. Are there any other, more optimal solutions available?

angular typescript asynchronous promise

Answer 1

Answer №1

The concept of the Deferred pattern is utilized to handle asynchronous operations. While originally introduced in jQuery, it is sometimes considered an antipattern but has its own advantages.

In essence, a deferred object can be returned instead of just a promise, similar to how the current MapService functions. However, there will be a centralized deferred object responsible for managing its associated promise:

class Deferred<T = {}> {
  resolve!: (val: T) => void;
  reject!: (err: any) => void;
  promise = new Promise<T>((resolve, reject) => {
    this.resolve = resolve;
    this.reject = reject;
  });
}

@Injectable()
export class MapService {
   mapView = new Deferred<__esri.MapView>();
}

Given that this is an Angular-related query, it's important to note that RxJS plays a crucial role in Angular applications. It serves as a more versatile alternative to promises and offers additional functionalities. A counterpart to promises and deferreds in RxJS is AsyncSubject, which emits a single value once the subject is completed.

Hence, using RxJS:

@Injectable()
export class MapService {
   mapView = new AsyncSubject<__esri.MapView>();
}

To resolve it:

mapService.mapView.next(...);
mapService.mapView.complete();

If needed as a promise, AsyncSubject can smoothly transition to a promise as it completes with a single value:

const view = await mapService.mapView.toPromise();

Both observables and promises can be managed within views using the async pipe like so: {{ mapService.mapView | async }}.

Although functional, this approach may seem unconventional and bordering on misuse of promises.

Misuse of promises can lead to antipatterns, much like the case with deferreds.

An Angular service should ideally serve as the model component in the MV* architecture. Therefore, MapService should not receive map data externally but rather initialize and store map data internally. It should instantiate MapView during application startup and provide a promise of the MapView instance.

Answer 2

The concept of the Deferred pattern is utilized to handle asynchronous operations. While originally introduced in jQuery, it is sometimes considered an antipattern but has its own advantages.

In essence, a deferred object can be returned instead of just a promise, similar to how the current MapService functions. However, there will be a centralized deferred object responsible for managing its associated promise:

class Deferred<T = {}> {
  resolve!: (val: T) => void;
  reject!: (err: any) => void;
  promise = new Promise<T>((resolve, reject) => {
    this.resolve = resolve;
    this.reject = reject;
  });
}

@Injectable()
export class MapService {
   mapView = new Deferred<__esri.MapView>();
}

Given that this is an Angular-related query, it's important to note that RxJS plays a crucial role in Angular applications. It serves as a more versatile alternative to promises and offers additional functionalities. A counterpart to promises and deferreds in RxJS is AsyncSubject, which emits a single value once the subject is completed.

Hence, using RxJS:

@Injectable()
export class MapService {
   mapView = new AsyncSubject<__esri.MapView>();
}

To resolve it:

mapService.mapView.next(...);
mapService.mapView.complete();

If needed as a promise, AsyncSubject can smoothly transition to a promise as it completes with a single value:

const view = await mapService.mapView.toPromise();

Both observables and promises can be managed within views using the async pipe like so: {{ mapService.mapView | async }}.

Although functional, this approach may seem unconventional and bordering on misuse of promises.

Misuse of promises can lead to antipatterns, much like the case with deferreds.

An Angular service should ideally serve as the model component in the MV* architecture. Therefore, MapService should not receive map data externally but rather initialize and store map data internally. It should instantiate MapView during application startup and provide a promise of the MapView instance.

Answer 3

Answer №2

While it is technically allowed, it is generally not recommended to perform I/O implicitly.

There are a couple of key points that should be addressed:

Ensure you include this._mapView.catch(() => {}) to prevent unhandled rejections from appearing (it is best practice to always handle rejected promises).
Performing I/O operations in the constructor or during initialization can be confusing and may violate the principle of least astonishment.

Consider creating a static async method like init to initialize the promise on first call, allowing consumers to handle any potential errors.

Answer 4

While it is technically allowed, it is generally not recommended to perform I/O implicitly.

There are a couple of key points that should be addressed:

Ensure you include this._mapView.catch(() => {}) to prevent unhandled rejections from appearing (it is best practice to always handle rejected promises).
Performing I/O operations in the constructor or during initialization can be confusing and may violate the principle of least astonishment.

Consider creating a static async method like init to initialize the promise on first call, allowing consumers to handle any potential errors.

Fulfilling a pledge from an external source to postpone the implementation of the program

Answer №1

Answer №2

Similar questions

Child component in Angular fails to recognize changes

Jest encountering errors when compiling a generic function

Unlocking The Mystery of Disappearing Inputs on Ionic 5

Express-openapi routes are giving a 404 error

What are the appropriate token classifications for Dependency Injection (DI)?

Ensure that every member of an object adheres to a particular generic interface in some capacity

The error page is requesting a root-layout, which indicates that having multiple root layouts is not feasible

What is the best way to send a user-provided input to my cloud function?

Utilize node.js to extract parameters from various parts of the chain and maintain a linear workflow

Learn the process of binding data to formGroup that utilizes the @propArray decorator in Rxweb

Show real-time data using Angular6 and GoogleChart

Code remaining stable post-execution of promise

How to dynamically add a route from an HTTP API to the app-routing.module.ts file in Angular 10

Not verifying the argument type in Typescript makes the function generic in nature

Support for ViewEncapsulation.ShadowDom now available in Edge, Internet Explorer, and legacy browsers

What is the best way to limit the types of function parameters in TypeScript based on whether the parameter index is even or odd?

Guide on correctly importing the Monaco IStandaloneCodeEditor interface in Vue3 using the Composition API

Leverage es6 classes along with mongoose in typescript to utilize loadClass functionality

Having trouble executing Angular e2e tests above version 2 with protractor while using a proxy

Progress bar in Windows Forms updating as the system executes a task in the background asynchronously