Observable.map setTimeout 函数 return 输入 angular 5

Question

我想在 Observable.map 函数中稍等片刻，然后 return 输入一个值

我的密码是：

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'.

    });

};

如何 return 使用 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 毫秒在我执行函数中的代码之前）

Answer 1

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

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

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

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

Observable.map setTimeout 函数 return 输入 angular 5

Observable.map setTimeout function with return type in angular 5

angular

rxjs

angular2-observables