angular - 向返回 promise 的 javascript 方法添加延迟

标签 angular typescript promise timeout settimeout

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

我想在服务方法上添加短超时来模拟服务器延迟以测试我的一些控件,但我找不到正确的语法来执行此操作。如何为我的服务调用添加 5 秒延迟?

开发者工具服务

@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() 添加到我试图实现的控制调用中,但它从未在那时填充数据。我真的很想在服务调用方法中加入延迟,这样我就不必记住重复执行它。

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

最佳答案

延迟原生 promise

解析为 undefined 的新 promise

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

用值解决的新 promise

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

现有 promise

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

延迟的 bluebird promise

Bluebird promise 库具有更好的性能和方便的功能,可以开箱即用地延迟 promise 链。

解析为 undefined 的新 promise

return Bluebird.delay(5000);

用值解决的新 promise

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

现有 promise

return bluebirdPromise.delay(5000);

延迟 promise 与 RxJS

RxJS 已在 Angular 2/4 项目中使用,可用于通过 RxJS 运算符和少量开销创建或转换 promise 。

解析为 undefined 的新 promise

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

用值解决的新 promise

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

现有 promise

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

关于angular - 向返回 promise 的 javascript 方法添加延迟,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39495551/

相关文章:

javascript - 从我的联系页面接收信息需要什么?

javascript - Koa中,中间件中的await next()、return await next()、return next()、next()有什么区别?

rest - Vuejs 中的异步和等待

javascript - Angular - RxJS : afterViewInit and Async pipe

jquery - Angular 未加载外部 js 文件,出现错误 : ENOENT: no such file or directory

javascript - Typescript 命名空间转换为 Javascript

javascript - 在 Promise 构造函数范围之外解析 Javascript Promise

loops - Angular 2 在 formArrays 上找不到具有未指定名称属性的控件

angular - 没有 CustomPipe 的提供者 - Angular 4

typescript - VueJS字符串插值可以访问TS对象的私有(private)属性