如何在呼叫我的 api 之前放慢速度/等待?
How to slow down / wait before call to my api?
伙计,祝你圣诞快乐。
我的 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 "don't wait for a random number" 中的反模式,而不是构造您的应用程序,因此您不需要这样做。我的实际用例是,在 HttpInterceptor
中,我需要一些由其他 Observable 加载的东西,通常我没有遇到麻烦,只有当用户刷新特定页面时,我才会有这些东西未加载的风险。
我的直接教导 "quick fix" 是哎呀我做了一个如果,如果没有加载我等待一些("give it time to load")然后我继续,谁在乎!用户不会经常刷新特定的 angular link。我最终将所有移动到 config.ts
并使用 APP_INITIALIZER
。但是,如果我喜欢等待,我仍然想知道如何等待一段时间,因此这个最小的例子。
不要绝望
反而这里有眩光
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
,您可以注入固定延迟。如果提供 none,则默认延迟为 1000。
伙计,祝你圣诞快乐。
我的 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 "don't wait for a random number" 中的反模式,而不是构造您的应用程序,因此您不需要这样做。我的实际用例是,在 HttpInterceptor
中,我需要一些由其他 Observable 加载的东西,通常我没有遇到麻烦,只有当用户刷新特定页面时,我才会有这些东西未加载的风险。
我的直接教导 "quick fix" 是哎呀我做了一个如果,如果没有加载我等待一些("give it time to load")然后我继续,谁在乎!用户不会经常刷新特定的 angular link。我最终将所有移动到 config.ts
并使用 APP_INITIALIZER
。但是,如果我喜欢等待,我仍然想知道如何等待一段时间,因此这个最小的例子。
不要绝望
反而这里有眩光
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
,您可以注入固定延迟。如果提供 none,则默认延迟为 1000。