Rethic Rethic - 1 year ago 77
TypeScript Question

Add delay to javascript method that returns promise

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

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();

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 Source

It is

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

Or for existing promise (e.g. const promise = Promise.resolve(examples)) that should be delayed,

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