angular - 如何在调用我的 api 之前减慢/​​等待？

Question

祝你圣诞快乐。
我的 Angular 4 应用程序不会等待。

我想在调用 API 之前放慢速度。
但我只是继续碰壁。

我在代码中使用了 HttpInterceptor。
但是这些 Observable 会爆炸。

不要太轻视。
下面是我的尝试。

export class ApiUrlInterceptor implements HttpInterceptor {

    constructor(private http: Http) { }

    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        return Observable.create(observer => {
            setTimeout(() => {
                observer.next(true); //Not sure why I do this
                const start = Date.now();
                console.log(`Request for ${req.url}`);
                return next.handle(req).do(event => {
                    if (event.type == HttpEventType.Response) {
                        const elapsed = Date.now() - start;
                        console.log(`Request for ${req.urlWithParams} took ${elapsed} ms.`);
                    }
                });
            }, 1000);
        });
    }
}

结果是调用了API。
但没有安装调用者的结果

我的 Observable 似乎卡住了。
我的运气不多了。

---

我很清楚这是 Angular 中的一种反模式“不要等待随机数”，而是构建您的应用程序，这样您就不需要这样做了。我的实际用例是，在 HttpInterceptor 中，我需要一些由其他 Observable 加载的东西，通常我没有遇到麻烦，只有当用户刷新特定页面时，我才有可能没有这些东西已加载。

我直接教的“快速修复”是我做了一个如果没有加载我等待一些(“给它时间加载”)然后我继续，谁在乎!用户不会经常刷新那个特定的 Angular 链接。我最终将所有内容移至 config.ts 并使用 APP_INITIALIZER。但是，如果我喜欢等待，我仍然想知道如何等待一段时间，因此这个最小的例子。

Answer 1

不要绝望
取而代之的是这里有眩光

import { timer } from 'rxjs/observable/timer';
// or import { TimerObsevable } from 'rxjs/observable/TimerObsevable';

export class PreRequestDelayInterceptor implements HttpInterceptor {

    constructor(@Inject(PRE_REQUEST_DELAY)@Optional() private delay = 1000) { }

    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
       const delay = timer(this.delay);
       const start = Date.now();
       return delay.switchMap(()=> next.handle(req))
       .do(event => {
            if (event.type == HttpEventType.Response) {
               const elapsed = Date.now() - start;
               console.log(`Request for ${req.urlWithParams} took ${elapsed} ms.`);
            }
        });
    }
}

通过使用 InjectionToken，您可以注入(inject)固定延迟。如果未提供，则默认延迟为 1000。