向返回承诺的javascript方法添加延迟 [英] Add delay to javascript method that returns promise

问题描述

我目前正在尝试学习 Angular 2、打字稿、promises 等.我已经为开发人员工具设置了一个小应用程序和一个只返回硬编码数据的服务.这仅用于测试目的.

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 运算符和小开销的承诺.

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

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