面试题：Angular中HttpClient模块如何优化请求的响应时间

方法一：启用HTTP缓存

原理：避免重复请求相同的资源，直接从缓存中获取数据，减少服务器负载和网络传输时间，从而加快响应。
实现步骤：
- 导入HttpClientModule和HttpCacheModule（需自行创建或使用相关库提供的缓存模块）。
- 创建一个自定义的HttpInterceptor，在拦截器中实现缓存逻辑。例如：

import { Injectable } from '@angular/core';
import { HttpEvent, HttpHandler, HttpInterceptor, HttpRequest } from '@angular/common/http';
import { Observable, shareReplay } from 'rxjs';

@Injectable()
export class CacheInterceptor implements HttpInterceptor {
  private cache = new Map<string, Observable<any>>();

  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    if (request.method === 'GET') {
      let cachedResponse = this.cache.get(request.url);
      if (cachedResponse) {
        return cachedResponse;
      }
      cachedResponse = next.handle(request).pipe(
        shareReplay(1)
      );
      this.cache.set(request.url, cachedResponse);
      return cachedResponse;
    }
    return next.handle(request);
  }
}

在app.module.ts中注册拦截器：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform - browser';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { AppComponent } from './app.component';
import { CacheInterceptor } from './cache.interceptor';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, HttpClientModule],
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: CacheInterceptor,
      multi: true
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

方法二：合并请求

原理：将多个相关的请求合并为一个请求，减少请求次数，降低网络开销，从而缩短整体响应时间。
实现步骤：
- 假设后端支持批量请求接口，例如/batch接口，该接口接受一个包含多个请求描述的数组，并返回多个请求的结果。
- 在前端构建请求体，将多个请求合并：

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

@Component({
  selector: 'app - my - component',
  templateUrl: './my - component.html'
})
export class MyComponent {
  constructor(private http: HttpClient) {}

  mergeRequests() {
    const requests = [
      { url: '/api/data1', method: 'GET' },
      { url: '/api/data2', method: 'GET' }
    ];
    this.http.post('/batch', requests).subscribe((response: any) => {
      // 处理合并后的响应
      console.log(response);
    });
  }
}

后端需要处理这种批量请求，解析请求体中的多个请求描述，分别执行请求并返回合并的结果。例如在Node.js中使用Express框架：

const express = require('express');
const app = express();
app.use(express.json());

app.post('/batch', (req, res) => {
  const requests = req.body;
  const results = [];
  requests.forEach((request) => {
    // 这里简单模拟根据不同请求路径返回不同数据
    if (request.url === '/api/data1') {
      results.push({ data1: '模拟数据1' });
    } else if (request.url === '/api/data2') {
      results.push({ data2: '模拟数据2' });
    }
  });
  res.json(results);
});

const port = 3000;
app.listen(port, () => {
  console.log(`Server running on port ${port}`);
});

方法三：优化后端响应

原理：前端请求响应时间受后端处理速度影响，优化后端代码和架构能直接提升响应速度，减少前端等待时间。
实现步骤：
- 数据库优化：
  - 对经常查询的字段建立索引。例如在MySQL中，如果经常根据user_name字段查询用户，可执行CREATE INDEX idx_user_name ON users(user_name);语句建立索引，这样查询时数据库能更快定位数据。
  - 优化数据库查询语句，避免全表扫描。例如将复杂的JOIN操作优化，减少不必要的连接表数量。
- 缓存机制：在后端应用层设置缓存。如使用Redis，对于不经常变化的数据，后端先从Redis缓存中获取，如果没有再查询数据库，并将查询结果存入Redis缓存。以Node.js为例，使用ioredis库：

const Redis = require('ioredis');
const redis = new Redis();

app.get('/data', async (req, res) => {
  const cachedData = await redis.get('data - key');
  if (cachedData) {
    res.json(JSON.parse(cachedData));
  } else {
    const data = await getDataFromDatabase();// 假设此函数从数据库获取数据
    await redis.set('data - key', JSON.stringify(data));
    res.json(data);
  }
});

异步处理：将一些耗时操作（如文件处理、复杂计算等）进行异步处理。在Node.js中可使用async/await结合Promise，将这些操作放在单独的任务队列中执行，不阻塞主线程，从而能更快响应HTTP请求。例如：

app.post('/process', async (req, res) => {
  // 异步处理复杂任务
  const result = await processComplexTaskAsync(req.body);
  res.json({ result });
});

星途面试题库

面试题：Angular中HttpClient模块如何优化请求的响应时间

知识考点

面试题答案

方法一：启用HTTP缓存

方法二：合并请求

方法三：优化后端响应