本文介紹 Angular HTTP 請求 [timeout](https://stackoverflow.com/questions/45938931/default-and-specific-request-timeout) 的一種實現思路。的

如果不擴充套件 `HttpClientModule` 類，攔截器與相應請求進行通訊的唯一預期方式是引數和標頭物件。

![](https://img-blog.csdnimg.cn/img_convert/dda3715b81c1a695e17d0320d7233ffb.png)

由於超時值是標量(`Scalar`)的，它可以安全地作為自定義標頭提供給攔截器，可以透過 RxJS 超時運算子(timeout Operator)來決定是預設超時還是特定超時。

程式碼片段如下：

```typescript
import { Inject, Injectable, InjectionToken } from '@angular/core';
import { HttpEvent, HttpHandler, HttpInterceptor, HttpRequest } from '@angular/common/http';
import { Observable } from 'rxjs';
import { timeout } from 'rxjs/operators';

export const DEFAULT_TIMEOUT = new InjectionToken<number>('defaultTimeout');

@Injectable()
export class TimeoutInterceptor implements HttpInterceptor {
  constructor(@Inject(DEFAULT_TIMEOUT) protected defaultTimeout: number) {
  }

intercept(req: HttpRequest<any>, next: HttpHandler): Observable<httpevent>> {
    const timeoutValue = req.headers.get('timeout') || this.defaultTimeout;
    const timeoutValueNumeric = Number(timeoutValue);

return next.handle(req).pipe(timeout(timeoutValueNumeric));
  }
}
```

上面程式碼裡，timeout 是 rxjs 提供的一個 Operator.

`DEFAULT_TIMEOUT` 這個 injection token, 以及 HTTP Interceptor 的提供方式，定義在 App Module 中：

```typescript
providers: [
  [{ provide: HTTP_INTERCEPTORS, useClass: TimeoutInterceptor, multi: true }],
  [{ provide: DEFAULT_TIMEOUT, useValue: 30000 }]
],
```

![](https://img-blog.csdnimg.cn/img_convert/e5de245e5ad1f70ef4e1386d14487bb2.png)

然後，我們就可以使用下面的程式碼來呼叫 HTTPClient，使用自定義的 timeout 值了：

```typescript
http.get('/your/url/here', { headers: new HttpHeaders({ timeout: `${20000}` }) });
```

另外，Angular 的 proxy 設定裡也允許定義 timeout 值：

```json
{
  "/api": {
    "target": "http://localhost:3000",
    "secure": false,
    "timeout": 360000
  }
}
```

關於 rxjs 的 timeout Operator 的輸入引數，首先需要知道的是，如果沒有給配置提供 with 屬性，當滿足超時條件時，這個運算子會發出一個 TimeoutError。 相反，如果配置了 with 屬性，Angular 將使用 with 提供的工廠函式，並將開發人員的訂閱切換到其結果。 超時條件由 first 和 each 中的設定提供。

第一個屬性可以是特定時間的日期、相對於訂閱點的時間段的數字，也可以被跳過。 此屬性僅用於檢查來自源的第一個值到達的超時條件。 來自源的所有後續值的時間將根據每個提供的時間段進行檢查（如果已提供）。

![](https://img-blog.csdnimg.cn/img_convert/8a3806d1c03e8150ef4ea36ab9bec6b3.png)</httpevent></any></number>

Angular HTTP 請求自定義 timeout 值的一種實現思路

相關文章