前端 获取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<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); }) ); }}
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<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);