14

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);
}
Improve this question
2
  • Have you tried setTimeout function in getExampleData function? Commented Sep 14, 2016 at 16:36
  • I have tried it, but the grid control I'm attempting to use never returns data. It just sits at a spinning icon indefinitely. I doubt it's a problem with the grid since it works when hitting a real database without issue. Commented Sep 14, 2016 at 16:55

2 Answers 2

Reset to default
42

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();
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

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.

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.