前端 获取API的响应时间 的方法总结

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

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

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

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

   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响应数据
     });
   

2. 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();
   

3. 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，我们可以优化成下面的方法和采用其它新的方法：

1. 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, next: HttpHandler): Observable<HttpEvent> {
       const startTime = new Date().getTime();
       return next.handle(req).pipe(
         tap(() => {
           const endTime = new Date().getTime();
           const responseTime = endTime - startTime;
           console.log('API响应时间：', responseTime);
         })
       );
     }
   }
   

2. 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);
         })
       );
     }
   }
   

3. 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;
       })
     );
   }
   

4. 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();
     });
   }
   

5. 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, next: HttpHandler): Observable<HttpEvent> {
       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
  );