Angular 简单封装HttpClient的超时处理

        在项目中，为了给用户良好的体验，大部分数据请求都会要求尽快地拿到返回数据，不能让用户等待太长时间。

        因此很多请求都进行了超时处理，超过了设置的时间就不再等待返回值了，提示用户采取后续操作。

        本文分享的方法，使用Promise.race()对HttpClient的get方法和post方法做了简单封装，使之可以满足超时处理的需求。

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { from, Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class RequestService {

  constructor(private http: HttpClient) { }
      
   /**
   * 发送post请求
   * @param url 请求地址
   * @param data 请求参数
   * @param timeout 超时时间 默认1S
   */
  post<R>(url: string, data: any, timeout: number = 1000): Observable<R> {
    let pRequest = new Promise<any>(resolve => {
      this.http.post<R>(url, data).subscribe((response: any) => resolve(response),
        (err: any) => {
          resolve({ code:-1, msg:`request err: ${err}` });
        });
    });
    //超时设置
    let pTimeout: any = new Promise<any>((resolve) => {
      setTimeout(() => {
        resolve({ code: -2, msg:`request timeout` });
      }, timeout);
    });
    return from(Promise.race([pTimeout, pRequest]));
  }
  
   /**
   * 发送get请求
   * @param url 请求地址
   * @param timeout 超时时间 默认1S
   * @returns 
   */
  get<R>(url: string, timeout: number = 1000): Observable<R> {
    let pRequest = new Promise<any>(resolve => {
      this.http.get<R>(url).subscribe((response: any) => resolve(response),
        (err: any) => {
           resolve({ code:-1, msg:`request err: ${err}` });
        });
    });
    //超时设置
    let pTimeout: any = new Promise<any>((resolve) => {
      setTimeout(() => {
        resolve({ code: -2, msg:`request timeout` });
      }, timeout);
    });
    return from(Promise.race([pTimeout, pRequest]));
  }
      
}

        调用以上方法，无论什么情况方法都会有返回值：

        请求出错返回 { code:-1, msg:`request err: ${err}` }

        请求超时返回 { code: -2, msg:`request timeout` }，

        请求正常就返回接口返回值

        如此后续代码就可以根据不同状态方便地进行处理了。