解决方法如下:
"dependencies": {
"@angular/common": "^",
"@angular/core": "^",
"firebase": "^"
}
确保将
替换为您使用的Angular和Firebase版本号。然后运行npm install
安装这些依赖项。
timeout.service.ts
文件,用于实现通用的超时逻辑。在该文件中添加以下代码:import { Injectable } from '@angular/core';
import { Observable, throwError, timer } from 'rxjs';
import { catchError, timeout } from 'rxjs/operators';
@Injectable({
providedIn: 'root'
})
export class TimeoutService {
private readonly TIMEOUT_DURATION = 5000; // 设置超时时间为5秒
constructor() { }
public callWithTimeout(observable: Observable): Observable {
const timeout$ = timer(this.TIMEOUT_DURATION).pipe(
catchError(error => throwError('Request timed out.'))
);
return observable.pipe(
timeout(this.TIMEOUT_DURATION),
catchError(error => throwError('Request failed.')),
// 合并超时和原始observable
race(timeout$, observable)
);
}
}
TimeoutService
注入并使用callWithTimeout()
方法包装需要超时的异步操作。例如,在一个组件中调用Firebase函数:import { Component } from '@angular/core';
import { AngularFireFunctions } from '@angular/fire/functions';
import { TimeoutService } from './timeout.service';
@Component({
selector: 'app-example',
template: `
`
})
export class ExampleComponent {
constructor(
private functions: AngularFireFunctions,
private timeoutService: TimeoutService
) { }
public callFirebaseFunction(): void {
const callable = this.functions.httpsCallable('myFirebaseFunction');
const observable = callable({}).pipe(
// 在此处添加其他操作符或逻辑
);
this.timeoutService.callWithTimeout(observable)
.subscribe(
data => console.log('Success:', data),
error => console.error('Error:', error)
);
}
}
在上面的示例中,我们使用了AngularFireFunctions来调用Firebase函数。我们将callable
函数包装在timeoutService.callWithTimeout()
方法中,以确保在指定的超时时间内获取结果或者抛出超时错误。
这样,无论您在Angular项目中的哪个地方使用异步操作,都可以使用TimeoutService
来添加通用的超时逻辑。