理解Angular的providers给Http添加默认headers

深入理解Angular中的providers，如何为Http添加默认headers

在Web应用中，经常需要为每次的Http请求添加headers或默认参数。在Angular框架中，我们可以通过使用providers来扩展或修改框架提供的服务，例如Http服务。本文将介绍如何通过Angular的providers为Http添加默认headers，同时也会如何深入理解Angular的服务及其providers的工作原理。

我们的目标是在每个Http请求发送时，自动添加一个token到header中，以便在服务器端进行身份验证。由于Http是一个服务，我们可以通过扩展它来达成这个目标。那么如何扩展一个框架提供的服务呢？答案是使用providers。

在Angular的NgModule中，providers属性用于告诉框架哪些服务需要在应用中提供。对于框架自带的模块或服务，我们不需要在providers里重复添加，只需要在imports里引入相应的模块即可。

如果我们想修改或扩展框架提供的某个服务，比如Http服务，我们可以创建一个新的类（比如BaseHttp），然后在providers里通过{ provide: Http, useClass: BaseHttp }的方式告诉框架使用这个新类来提供Http服务。这样，当我们通过注入获得一个Http实例时，实际上获得的是BaseHttp的实例。

接下来，我们如何实现自动添加headers呢？一种方式是通过扩展Http服务，并在其构造函数中设置默认header。由于Http服务是在app初始化时创建的，所以在构造函数中设置默认header可能在token还未生成时就已经设定，导致无法正确添加token。

例如：

```typescript

@Injectable()

export class BaseHttp extends Http {

constructor(backend: XHRBackend, options: RequestOptions) {

super(backend, options);

}

request(url: string | Request, options?: RequestOptionsArgs): Observable {

const token = localStorage.getItem(AppConstants.tokenName);

if (options && options.headers) {

options.headers = options.headers.set(AppConstants.authHeaderName, token);

} else {

options = { headers: new HttpHeaders().set(AppConstants.authHeaderName, token) };

}

return super.request(url, options); // 继续执行原始的请求操作

}

}

```

@Injectable()

export class BaseHttp extends Http {

constructor(private backend: XHRBackend, private optionsFactory: () => RequestOptions) {

super(backend);

}

request(url: string | Request, extraOptions?: any): Observable {

const token = localStorage.getItem(AppConstants.tokenName);

let requestOptions = this.optionsFactory(); // 获取默认的RequestOptions

// 如果提供了额外的选项，则合并它们

if (extraOptions) {

requestOptions = {...requestOptions, ...extraOptions};

}

// 设置身份验证令牌到请求头中

if (token) {

requestOptions.headers.set(AppConstants.authHeaderName, token);

}

// 发送带有身份验证令牌的请求

return super.request(url, requestOptions);

}

// 创建默认的RequestOptions工厂方法

private optionsFactory(): RequestOptions {

return {

headers: new Headers({

// 这里可以添加其他默认的请求头信息

})

};

}

}

在 `merge` 方法内部，我们从本地存储中获取令牌，并将其设置到请求头中。这样，每次发起请求时，都会自动附加这个令牌，从而满足认证需求。

更让人欣喜的是，我们在这些实现方式的过程中，几乎没有依赖 Angular 的官方文档或网络资料。仅仅通过查看类或接口的定义和注释，我们就能够理解其意图，并成功实现功能。这正是 TypeScript 给我们带来的便捷和乐趣。

本文内容至此结束，希望能对大家的学习有所帮助。也希望大家能继续关注并支持狼蚁SEO。让我们一起更多技术的奥秘！

文章由 cambrian 系统渲染完成并输出到 'body' 部分。