Passing a service into a promise in Angular 2 using TypeScript

Question

Passing a service into a promise in Angular 2 using TypeScript

Is there a way to pass a service into a promise? I am currently working on a promise that will only resolve once all the http requests are complete. However, I am facing an issue where this.jiraService is undefined. Is there a method to pass it to the constructor of the promise?

export class JiraComponent {
private stories:Map<string,number> = new Map<string,number>();

constructor(private jiraService:JiraService) {
}

ngOnInit() {
    this.jiraService.search()
        .then(x => this.getKeys(x['issues']))
        .then(keys => this.getLogs(keys))
        .then(x => console.log(this.stories));
}

getKeys(issues:Array<Object>) {
    let keys = new Array<string>();
    for (var i of issues) {
        keys.push(i['key']);
    }
    return keys;
}

getLogs(keys:Array<string>) {
    return new Promise(function (resolve, reject) {
        let count = 0;
        for (var k of keys) {
            this.jiraService.worklog(keys[0]).then(x => {
                count++;
                console.log(x);
                if (!this.stories.get(k)) {
                    this.stories.set(k, x['timeSpentSeconds']);
                }
                else {
                    this.stories.set(k, this.stories.get(k) + x['timeSpentSeconds']);
                }
                if (count == keys.length) {
                    resolve();
                }
            });
        }
    });
}

angular typescript promise

Answer 1

Answer №1

If you're struggling to access the this object within your Promise's executor function, check out this explanation for assistance (referenced by danh).

However, this structure may not be ideal for an Angular 2 app and could be causing issues. For guidance, refer to the official Angular 2 Style Guide, specifically the discussion on Components and Services.

Services and Promises

In general, Components should not handle Promises directly. Instead, a Service acts as a gateway to business logic and data services for Components to access.

import { Injectable } from '@angular/core';

@Injectable()
export class MyService {
    private allIsGood: boolean;

    public doSomething(): Promise<any> {
        console.log("I promise to return at some point.");
        return new Promise(function (resolve, reject) {
            this.allIsGood = someLongRunningActivity();
            if (this.allIsGood) {
                console.log("Resolving the promise.");
                resolve();
            } else {
                console.log("Something bad happened, don't forget to check for errors!");
                reject();
            }
        });
    }

    private someLongRunningActivity(): boolean {
        //run a query or perform some calculation
        return true;
    }
}

Components and Promises

Components should interact with a service and consume the returned Promise.

import { Component } from '@angular/core';
import { MyService } from '../services';

@Component({
    selector: 'my-selector',
    templateUrl: 'my template.html'
})
export class MyComponent {

    constructor(private myService: MyService) {
        this.myService.doSomething()
            .then(() => {
                console.log("The promise was honored, you can proceed with your tasks.");
            })
            .catch(() => {
                console.log("Remember to handle any errors!");
            });
    });
}

Keep in mind:

Ensure Providers are set up correctly during bootstrap!
Adjust import paths accordingly.

I'm limited to two links, so explore more about Promises and Observables on the Angular 2 documentation site mentioned above. Hope this information is helpful!

Answer 2

If you're struggling to access the this object within your Promise's executor function, check out this explanation for assistance (referenced by danh).

However, this structure may not be ideal for an Angular 2 app and could be causing issues. For guidance, refer to the official Angular 2 Style Guide, specifically the discussion on Components and Services.

Services and Promises

In general, Components should not handle Promises directly. Instead, a Service acts as a gateway to business logic and data services for Components to access.

import { Injectable } from '@angular/core';

@Injectable()
export class MyService {
    private allIsGood: boolean;

    public doSomething(): Promise<any> {
        console.log("I promise to return at some point.");
        return new Promise(function (resolve, reject) {
            this.allIsGood = someLongRunningActivity();
            if (this.allIsGood) {
                console.log("Resolving the promise.");
                resolve();
            } else {
                console.log("Something bad happened, don't forget to check for errors!");
                reject();
            }
        });
    }

    private someLongRunningActivity(): boolean {
        //run a query or perform some calculation
        return true;
    }
}

Components and Promises

Components should interact with a service and consume the returned Promise.

import { Component } from '@angular/core';
import { MyService } from '../services';

@Component({
    selector: 'my-selector',
    templateUrl: 'my template.html'
})
export class MyComponent {

    constructor(private myService: MyService) {
        this.myService.doSomething()
            .then(() => {
                console.log("The promise was honored, you can proceed with your tasks.");
            })
            .catch(() => {
                console.log("Remember to handle any errors!");
            });
    });
}

Keep in mind:

Ensure Providers are set up correctly during bootstrap!
Adjust import paths accordingly.

I'm limited to two links, so explore more about Promises and Observables on the Angular 2 documentation site mentioned above. Hope this information is helpful!

Answer 3

Answer №2

Have you considered utilizing the Promise.All([p1, p2, p3]) method? You can find more information about it here: https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Promise/all

While this may not directly address your question, I believe it could help you achieve the desired outcome with your getter function.

Answer 4

Have you considered utilizing the Promise.All([p1, p2, p3]) method? You can find more information about it here: https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Promise/all

While this may not directly address your question, I believe it could help you achieve the desired outcome with your getter function.

Passing a service into a promise in Angular 2 using TypeScript

Answer №1

Answer №2

Similar questions

Setting the x-api-key header with HttpInterceptor in Angular 4: A guide

Select dropdown menu with dynamic search feature

Typescript: create a type similar to keyof but with a particular value type

The specified format of `x-access-token` does not match the required type `AxiosRequestHeaders | undefined`

Facing the issue of "Protractor not syncing with the page" while trying to navigate an Angular website

What steps are involved in adding a table footer to ng2-smart-table?

Ways to emit a value from an observable once it is defined?

Steps to trigger a modal using an effect and automatically close it upon receiving a specific dispatched action

A Promise signature allows for the compilation of function bodies that return undefined

Encountering a Typescript error when attempting to access the 'submitter' property on type 'Event' in order to retrieve a value in a |REACT| application

invoking a function at a designated interval

Creating Dynamic Forms in React with Typescript: A Step-by-Step Guide to Adding Form Elements with an onClick Event Handler

When utilizing the Angular 2 Stack, the Typescript Reflect.getMetadata('design:type'...) method may return an Object instead of a Date

Beta 8 of Angular Material 2 is causing MdDialog.afterAllClosed to return an undefined result instead of the expected data

Looking for help with setting up Nodemailer and installing it via NPM

Iterate through each item in an object using Angular

Determining the best method for change detection in Angular 2: Choosing between Observable, EventEmitter, and Dot Rule

There are a total of 152 issues found in the index.tsx file within the react

Learn the process of adjusting the Time Zone in Angular2-HighCharts!

Resolving the non-null assertion error in TypeScript and React: A step-by-step guide