Observable.map setTimeout 函数，返回类型为角度 5答案

【问题标题】：Observable.map setTimeout function with return type in angular 5Observable.map setTimeout 函数，返回类型为角度 5
【发布时间】：2018-04-06 12:42:46
【问题描述】：

我想在 Observable.map 函数中稍等片刻，然后返回一个值

我的代码是：

public loginRequest(userCredentials: any): Observable<TSUser | undefined> {

    return this.http.post<TSUser>(this.serviceURL + '/login', userCredentials).map((response: any) => {

        window.setTimeout(() => {
            this.initWithCookie();
            return this.principal;
        }, 300);
        //error TS2322: Type 'Observable<void>' is not assignable to type 'Observable<TSUser | undefined>'. Type 'void' is not assignable to type 'TSUser | undefined'.

    });

};

如何使用 setTimeout 函数返回正确的 Observable 类型。使用我的代码，我得到了错误 error TS2322: Type 'Observable<void>' is not assignable to type 'Observable<TSUser | undefined>'. Type 'void' is not assignable to type 'TSUser | undefined'.

如果我这样做：

public loginRequest(userCredentials: any): Observable<TSUser | undefined> {

    return this.http.post<TSUser>(this.serviceURL + '/login', userCredentials).map((response: any) => {

        return Observable.timer(300).map(() => {
                this.initWithCookie();
                return this.principal;
            }).take(1);
    });

};

我得到了错误 error TS2322: Type 'Observable<Observable<TSUser | undefined>>' is not assignable to type 'Observable<TSUser | undefined>'.

解决方案 根据马丁的回答，我的工作代码是

public loginRequest(...): Observable<TSUser | undefined> {

        return this.http.post<TSUser>(...).delay(300).concatMap(response => Observable.of(this.initWithCookie()));

};

（我想在执行函数中的代码之前等待 300 毫秒）

【问题讨论】：

标签： angular rxjs angular2-observables

【解决方案1】：

不使用setTimeout 并让RxJS 使用delay() 运算符为您制造延迟会更容易：

return this.http.post<TSUser>(...)
  .concatMap(response => Observable.of(response).delay(300));

您可以使用setTimeout，但您必须使用Observable.create(observer => {}) 并将setTimeout 中的结果发送到observer.next(...)，这非常复杂。

【讨论】：

【解决方案2】：

在 RxJS v6 中，运算符的导入和使用语法已更改。

import { of } from 'rxjs';
import { delay, concatMap } from 'rxjs/operators';

return of({delay_time: 3000}).pipe(
  concatMap(response => of('Delayed by: ' + response.delay_time + ' ms').pipe(delay(response.delay_time)))
);

【讨论】：