进入正文之前需要了解的概念：

API请求时间：指从发送API请求到接收到响应所经过的时间。网络延迟：指数据从发送端到接收端所需的时间，受网络质量和距离等因素影响。服务器处理时间：指服务器处理请求所需的时间，包括数据库查询、计算等操作。数据传输时间：指数据在网络中传输所需的时间，受网络带宽和数据量等因素影响。

前端获取API响应时间的方法有多种途径，以下是其中三种常见的方法：

Performance API：使用浏览器提供的Performance API可以获取到页面加载和执行的性能数据，包括API请求的响应时间。可以通过以下代码来获取API请求的响应时间：

<code>const startTime = performance.now();

fetch('https://api.example.com/data')

  .then(response => {

    const endTime = performance.now();

    const responseTime = endTime - startTime;

    console.log('API响应时间：', responseTime);

    return response.json();

  })

  .then(data => {

    // 处理API响应数据

  }); XHR对象：通过XMLHttpRequest对象发送API请求，并在请求完成时计算响应时间。以下是一个简单的示例：

const xhr = new XMLHttpRequest();

const startTime = new Date().getTime();

xhr.open('GET', 'https://api.example.com/data', true);

xhr.onreadystatechange = function() {

  if (xhr.readyState === 4 && xhr.status === 200) {

    const endTime = new Date().getTime();

    const responseTime = endTime - startTime;

    console.log('API响应时间：', responseTime);

    // 处理API响应数据

  }

};

xhr.send(); Fetch API：使用Fetch API发送API请求，并在Promise链中计算响应时间。以下是一个示例：

const startTime = new Date().getTime();

fetch('https://api.example.com/data')

  .then(response => {

    const endTime = new Date().getTime();

    const responseTime = endTime - startTime;

    console.log('API响应时间：', responseTime);

    return response.json();

  })

  .then(data => {

    // 处理API响应数据

  });

如果是针对于Angular，我们可以优化成下面的方法和采用其它新的方法：

HttpInterceptor拦截器：使用HttpInterceptor拦截器可以在每个HTTP请求和响应时执行一些操作，包括计算API响应时间。以下是一个简单的示例：

import { Injectable } from '@angular/core';

import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent } from '@angular/common/http';

import { Observable } from 'rxjs';

import { tap } from 'rxjs/operators';

@Injectable()

export class TimingInterceptor implements HttpInterceptor {

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

    const startTime = new Date().getTime();

    return next.handle(req).pipe(

      tap(() => {

        const endTime = new Date().getTime();

        const responseTime = endTime - startTime;

        console.log('API响应时间：', responseTime);

      })

    );

  }

} Http请求拦截：在Angular中可以通过拦截Http请求来计算API的响应时间。以下是一个示例：

import { Injectable } from '@angular/core';

import { HttpClient, HttpRequest } from '@angular/common/http';

@Injectable()

export class ApiService {

  constructor(private http: HttpClient) {}

  getWithTiming(url: string) {

    const startTime = new Date().getTime();

    return this.http.get(url).pipe(

      finalize(() => {

        const endTime = new Date().getTime();

        const responseTime = endTime - startTime;

        console.log('API响应时间：', responseTime);

      })

    );

  }

} RxJS操作符：使用RxJS操作符可以在Observable流中计算API的响应时间。以下是一个示例：

import { HttpClient } from '@angular/common/http';

import { map } from 'rxjs/operators';

constructor(private http: HttpClient) {}

getWithTiming(url: string) {

  const startTime = new Date().getTime();

  return this.http.get(url).pipe(

    map(response => {

      const endTime = new Date().getTime();

      const responseTime = endTime - startTime;

      console.log('API响应时间：', responseTime);

      return response;

    })

  );

} Angular Performance API：Angular提供了Performance API来获取应用程序性能数据，可以通过以下代码获取API响应时间：

import { ApplicationRef } from '@angular/core';

constructor(private appRef: ApplicationRef) {}

ngAfterViewInit() {

  const startTime = performance.now();

  this.http.get('https://api.example.com/data').subscribe(() => {

    const endTime = performance.now();

    const responseTime = endTime - startTime;

    console.log('API响应时间：', responseTime);

    this.appRef.tick();

  });

} Angular HttpClient拦截器和Performance API结合：结合使用HttpClient拦截器和Performance API可以更精确地获取API响应时间。

import { Injectable } from '@angular/core';

import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent } from '@angular/common/http';

import { Observable } from 'rxjs';

@Injectable()

export class TimingInterceptor implements HttpInterceptor {

  constructor(private appRef: ApplicationRef) {}

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

    const startTime = performance.now();

    return next.handle(req).pipe(

      finalize(() => {

        const endTime = performance.now();

        const responseTime = endTime - startTime;

        console.log('API响应时间：', responseTime);

        this.appRef.tick();

      })

    );

  }

}

拓展:

        对于Angular有些小伙伴肯定有听说过，timeout 和timeoutWith方法，下面是这两个方法与上面的方法区别和使用介绍：

   timeout 用于处理 Observable 的超时情况，而 timeoutWith 则用于在超时时切换到备用的 Observable。如果你想要处理 Observable 的超时情况并执行特定的操作，可以使用 timeout 方法；如果你想要在超时时切换到备用的 Observable 进行替代操作，可以使用 timeoutWith 方法。

timeoutWith 方法：

timeoutWith 方法也用于在 Observable 发出数据的时间超过指定时间后，但它允许你提供一个备用的 Observable，用于替代超时的情况。如果超时，将终止原始 Observable 并开始订阅备用 Observable。示例代码：

import { of, timer } from 'rxjs';

import { timeoutWith, switchMap } from 'rxjs/operators';

const source = of('Hello').pipe(

switchMap(value => timer(1000).pipe(timeoutWith(500, of('World')))) // 1秒后超时，切换到备用 Observable

);

source.subscribe(value => console.log('Value:', value)); // 输出：Value: World

timeout 方法：

timeout 方法用于在 Observable 发出数据的时间超过指定时间后，将 Observable 中的数据流终止，并抛出一个错误。该方法通常用于处理异步操作超时的情况，比如等待服务器响应超时等。示例代码：

import { of } from 'rxjs';

import { timeout } from 'rxjs/operators';

const source = of('Hello').pipe(timeout(3000)); // 3秒后超时

source.subscribe(

value => console.log('Value:', value),

error => console.error('Error:', error) // 如果超时会抛出 TimeoutError

);