Angular4封装request服务：统一处理请求与响应

"这篇教程详细解析了如何在Angular4中封装基础的request请求方法，旨在减少重复代码，提高代码复用性。通过封装，可以统一处理请求中的常见问题，如添加自定义头、处理响应状态码和数据提取等。" 在Angular4中，通常使用Http模块进行网络请求。然而，原始的Http服务提供的方法并不具备直接处理许多实际项目中常见的需求，例如设置全局的请求头、处理错误信息和统一解析响应数据等。为了提高代码的可维护性和可读性，我们需要对请求方法进行封装。 首先，我们需要创建一个新的服务`request.service.ts`。在这个服务中，我们可以定义一个通用的请求方法，接受必要的参数，例如URL、请求方法（GET、POST等）、超时时间等。在本例中，我们关注一个基本的GET请求封装。 需求A中，我们期望这个请求方法能： 1. 使用GET方式发送请求。 2. 默认超时时间为3秒，但允许传递自定义的超时时间。 3. 能够处理后台返回的成功和失败两种情况，成功时返回的JSON包含`status`为200和`data`字段，失败时`status`不为200，并包含`msg`字段表示错误信息。 实现这个需求，我们需要导入Angular的核心服务`Injectable`，并引入Http模块（在Angular4中，它通常来自`@angular/http`）。然后，在`request.service.ts`中创建一个注入式服务类，定义一个名为`get`的方法，该方法接收URL和超时时间作为参数。 ```typescript import { Injectable } from '@angular/core'; import { HttpClient, HttpErrorResponse } from '@angular/common/http'; // 在Angular4中，需要导入HttpClient代替Http @Injectable() export class RequestService { constructor(private http: HttpClient) {} get(url: string, timeout?: number) { const reqTimeout = timeout || 3000; // 默认超时时间 return this.http.get(url, { timeout: reqTimeout }).pipe( map(response => { if (response.status === 200) { return response.data; // 假设响应体中的数据在data字段 } else { throw new Error(response.msg || '服务器返回错误'); // 如果status不是200，抛出错误 } }), catchError(error => this.handleError(error)) // 处理错误 ); } private handleError(error: HttpErrorResponse) { let errorMessage = '未知错误'; if (error.error instanceof ErrorEvent) { // 客户端错误 errorMessage = `错误：${error.error.message}`; } else { // 服务器端错误 errorMessage = `状态码：${error.status}\n消息：${error.message}`; } console.error(errorMessage); return throwError(errorMessage); // 或者返回一个包含错误信息的Observable } } ``` 在这个封装的`get`方法中，我们使用了RxJS的`map`和`catchError`操作符。`map`用于处理成功响应，检查`status`字段，如果为200，则返回`data`字段，否则抛出错误。`catchError`操作符用于捕获并处理任何错误，通过`handleError`方法转换错误信息。 这样，当我们需要发起GET请求时，只需要调用`RequestService`的`get`方法，就能得到一个已经处理过的响应，可以直接使用响应数据，而无需关心状态码或错误处理。 通过这种方式封装请求，不仅可以确保每个请求都具有统一的处理机制，还能使组件代码更加简洁，避免在多个地方重复处理相同的问题。此外，这个服务还可以扩展以支持POST、PUT等其他HTTP方法，或者添加更多的定制选项，以满足项目的各种需求。