Add delay to javascript method that returns promise

Question

I'm currently trying to learn Angular 2, typescript, promises, etc. I've setup a small app for developer tools and a service that just returns hard-coded data. This is to be used for testing purposes only.

I'd like to add short timeout on the service method to simulate server lag for testing some of my controls, but I can't find the correct syntax to do so. How can I add a 5 second delay to my service call?

Developer Tools Service

@Injectable()
export class DeveloperService {
    getExampleData(): Promise<ExampleItem[]> {
        const examples: ExampleItem[] = [];
        examples.push({ id: 1, name: 'Spaceman Spiff', location: 'Outer Space', age: 12 });
        examples.push({ id: 2, name: 'Stupendous Man', location: 'The City', age: 30.5 });
        examples.push({ id: 3, name: 'Tracer Bullet', location: 'The City', age: 24 });
        examples.push({ id: 4, name: 'Napalm Man', location: 'War Zone', age: 43.333 });
        examples.push({ id: 5, name: 'Adult Calvin', location: 'In the future', age: 54 });

        // TODO: Slow down this return!
        return Promise.resolve(examples);
    }
}

Developer Tools App

getExampleData() {
    return (): Promise<Array<any>> => {
        return this.developerService.getExampleData();
    };
}

UPDATE: 1 I have tried adding the setTimeout() to the call for control I'm attempting to implement, but it never populates the data at that point. I'd really like to get the delay into the service call method so I don't have to remember implementing it repeatedly.

getExampleData() {
    setTimeout(() => (): Promise<Array<any>> => {
        return this.developerService.getExampleData();
    }, 3000);
}

Answer 1

Delayed native promise

New promise that resolves with undefined

return new Promise(resolve =>
  setTimeout(resolve, 5000)
);

New promise that resolves with a value

return new Promise(resolve => 
  setTimeout(() => resolve(value), 5000)
);

Existing promise

return promise.then(value => 
  new Promise(resolve => 
    setTimeout(() => resolve(value), 5000)
  )
);

Delayed Bluebird promise

Bluebird promise library has better performance and convenient features that can be used out of the box to delay promise chains.

New promise that resolves with undefined

return Bluebird.delay(5000);

New promise that resolves with a value

return Bluebird.resolve(value).delay(5000);
// or
return Bluebird.delay(5000).return(value);

Existing promise

return bluebirdPromise.delay(5000);

Delayed promise with RxJS

RxJS is already used in Angular 2/4 projects and can be used to create or transform promises with RxJS operators and small overhead.

New promise that resolves with undefined

return Observable.of().delay(5000).toPromise();
// or
return Observable.interval(5000).first().toPromise();

New promise that resolves with a value

return Observable.of(value).delay(5000).toPromise();

Existing promise

return Observable.fromPromise(promise).delay(5000).toPromise();

Answer 2

Delayed result with RxJS 6

You can use the following code to delay values in RxJs 6 by n ms.

With no specific value (will emit 0)

return timer(n);

With a set value

return of(value).pipe(delay(n));

or

return timer(n).pipe(mapTo(value));

from a promise

return from(promise).pipe(delay(n));

to return a promise

put .toPromise() on any of the previous examples after the pipe.

return timer(n).toPromise();

return of(value).pipe(delay(n)).toPromise();

etc.