@angular-resource/progress

Progress-checking-adapter of angular-resource

Combine checking progress requests to make one endpoint

Example

// Resource
@HttpConfig({
  host: 'https://generator-example.net/api',
})
@ProgressConfig({
  interval: 10 * 1000, // 10s by default. How often check progress
  timeout: 10 * 60 * 1000, // 10m by default. How long to wait for the process to complete
})
export class ApiResource extends ReactiveResource {
    startGeneration = Post({ url: '/ai/generation' }); // Returns initData
    getGenerationStatus = Get({ url: '/ai/generation/:processId' });

    generate = Progress({ 
        init: this.startGeneration, // Initial request
        check: (checking: any) => { // Do checking requests every interval period
            this.getGenerationStatus({ processId: checking.initData.id }).then((data: any) => {
                switch (data.status) {
                case 'success':
                    checking.complete(data);
                    break;
                case 'error':
                    checking.error(data);
                    break;
                default: // pending 
                    // You can use e.g.
                    // data.progress = checking.getProgress()
                    // to get fake progress
                    checking.next(data);
                }
            })
        }
    });
}

// Component etc.
export class GenerationComponent {
   constructor (private apiResource: ApiResource) {}

    startGeneration() {
        this.isLoading = true;
        this.progress = 0;

        this.apiResource.action('generate:progress').subscribe((data: any) => {
            this.progress = data.progress
        })
        this.apiResource.generate().then((data: any) => {
            this.result = data.result;
            this.progress = 100;
            this.isLoading = false;

        }).catch((error: any) => {
            this.isLoading = false;
        })
  }
}

ProgressConfig

• init (data?: any) => Promise - HTTP-request function
• check (checking: Checking) => any - Function to run checking HTTP-request
• fakeProgressFn (x: number) => number (default: easyOut) - Function to generate fake progress
• interval number (default: 10000) - How often to check status in ms
• timeout number (default: 600000) - How long to check status
• observable boolean (default: false) - Return Observable or Promise

Checking

• initData any - Responce of initial request
• next (data: any) => void - Execute if process is in progress
• complete (data: any) => void - Execute if process is completed
• error (error: any) => void - Execute if an error during the process
• getProgress (format: string) => number (default: format='xx.xx' (e.g. 15.03%)) - Get fake progress of process

Progress

• Progress(config: ProgressConfig) returns (payload: any) => Promise | Observable - Create progress method

See also: angular-resource documentation