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

@NgModule({
 declarations: [
  AppComponent
 ],
 imports: [
  BrowserModule, RouterModule, HttpModule
 ],
 providers: [UserService, AuthGuardService,
  { provide: Http, useClass: BaseHttp }
 ],
 bootstrap: [ AppComponent ]
})

@Injectable()
export class BaseHttp extends Http {
 constructor (backend: XHRBackend, options: RequestOptions) {
  super(backend, options);
  let token = localStorage.getItem(AppConstants.tokenName);
  options.headers.set(AppConstants.authHeaderName, token);
 }
}

@Injectable()
export class BaseHttp extends Http {
 constructor (backend: XHRBackend, options: RequestOptions) {
  super(backend, options)
 }
 request(url: string|Request, options"htmlcode">

export declare class Request extends Body {
  /**
   * Http method with which to perform the request.
   */
  method: RequestMethod;
  /**
   * {@link Headers} instance
   */
  headers: Headers;
  /** Url of the remote resource */
  url: string;
  /** Type of the request body **/
  private contentType;
  /** Enable use credentials */
  withCredentials: boolean;
  /** Buffer to store the response */
  responseType: ResponseContentType;
  constructor(requestOptions: RequestArgs);
  /**
   * Returns the content type enum based on header options.
   */
  detectContentType(): ContentType;
  /**
   * Returns the content type of request's body based on its type.
   */
  detectContentTypeFromBody(): ContentType;
  /**
   * Returns the request's body according to its type. If body is undefined, return
   * null.
   */
  getBody(): any;
}



我们知道它是一个类，里面有一个成员headers，然后我们再看看Headers这个类型，看到它有一个set()方法，是用来往headers里面添加值的，这正是我们需要的。
所以，在我们实现的BaseHttp.request()方法里，根据url的类型，再判断options是否为空等。通过测试，这种方法能够实现我们的需求，不管是初始化的时候在localStorage里面就有token，还是之后登陆，甚至退出后更新再登录（会更新localStorage的token）等，都能满足。
重新实现 RequestOptions
虽然上面的方法以及能够解决问题，那么，能不能再简单一点呢？因为我们需要的只是更新Options，但是，为了这个，我们拦截了Http的请求。那我们是不是可以直接扩展RequestOptions来实现呢？答案是yes。而且更容易，我们可以继承BaseRequestOptions，重写merge(...)方法。


@Injectable()
export class AuthRequestOptions extends BaseRequestOptions {
 merge(options?: RequestOptionsArgs): RequestOptions {
  let newOptions = super.merge(options);
  let token = localStorage.getItem(AppConstants.tokenName);
  newOptions.headers.set(AppConstants.authHeaderName, token);
  return newOptions;
 }
}



这个merge(...)方法会在每次请求的时候被调用，用来把请求的时候的options和默认options进行合并。
经过测试，这种方法也能够完美的解决我们的需求。
总结
所以，这就是Angular强大与方便的地方，它使用了很多现象对象的特性，如继承、接口、实现等；也用了很多服务器端Java框架的特性，例如容器等。上面说的provider也就是容器里面对象实例的提供者，本来RequestOptions类型的提供者是BaseRequestOptions，但是，我继承了它，重写了一个方法，把这个类型的提供者改成了我写的类。这样，Angular容器在初始化的时候，就会使用我提供的类来创建这个类型的实例。
而且，在这几种实现方式的探索过程中，我完全没有查看Angular的文档，也没有网上查什么资料。知识查看类或接口的定义，通过它的注释，我就有了思路，然后尝试实现，就成功了。这也是TypeScript给我吗带来的遍历。


以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。