将延迟添加到返回Promise的javascript方法中 [英] Add delay to javascript method that returns promise

问题描述

我目前正在尝试学习Angular 2，打字稿，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.

我想在服务方法上添加短暂的超时，以模拟服务器滞后以测试我的一些控件，但是我找不到正确的语法来做到这一点.如何在服务呼叫中添加5秒的延迟?

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?

开发者工具服务

@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);
    }
}

开发者工具应用

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

更新:1 我已经尝试将setTimeout()添加到我要实现的控件调用中，但是那时它从不填充数据.我真的很想将延迟引入服务调用方法中，这样我就不必记住重复执行它了.

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

推荐答案

延迟的本地承诺

以undefined

解析的新承诺

Delayed native promise

New promise that resolves with undefined

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

以价值解决的新承诺

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

现有的诺言

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

延迟的蓝鸟承诺

Bluebird Promise库具有更好的性能和便捷的功能，可以立即使用以延迟Promise链.

Delayed Bluebird promise

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

return Bluebird.delay(5000);

以价值解决的新承诺

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

现有的诺言

return bluebirdPromise.delay(5000);

RxJS的延迟承诺

RxJS已经在Angular 2/4项目中使用，可用于以RxJS运算符和少量开销创建或转换Promise.

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.

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

以价值解决的新承诺

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

现有的诺言

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

这篇关于将延迟添加到返回Promise的javascript方法中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！