Cómo extender la clase http angular 2 en Angular 2 final

Echa un vistazo a mi artículo sobre cómo extender la clase Http para Angular 2.1.1

Primero, vamos a crear nuestra clase de proveedor http personalizada.

http.service.ts

import {Injectable} from '@angular/core';
import {Http, XHRBackend, RequestOptions, Request, RequestOptionsArgs, Response, Headers} from '@angular/http';
import {Observable} from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';

@Injectable()
export class HttpService extends Http {

  constructor (backend: XHRBackend, options: RequestOptions) {
    let token = localStorage.getItem('auth_token'); // your custom token getter function here
    options.headers.set('Authorization', `Bearer ${token}`);
    super(backend, options);
  }

  request(url: string|Request, options?: RequestOptionsArgs): Observable<Response> {
    let token = localStorage.getItem('auth_token');
    if (typeof url === 'string') { // meaning we have to add the token to the options, not in url
      if (!options) {
        // let's make option object
        options = {headers: new Headers()};
      }
      options.headers.set('Authorization', `Bearer ${token}`);
    } else {
    // we have to add the token to the url object
      url.headers.set('Authorization', `Bearer ${token}`);
    }
    return super.request(url, options).catch(this.catchAuthError(this));
  }

  private catchAuthError (self: HttpService) {
    // we have to pass HttpService's own instance here as `self`
    return (res: Response) => {
      console.log(res);
      if (res.status === 401 || res.status === 403) {
        // if not authenticated
        console.log(res);
      }
      return Observable.throw(res);
    };
  }
}

Ahora, necesitamos configurar nuestro módulo principal para proporcionar el XHRBackend a nuestra clase http personalizada. En su declaración de módulo principal, agregue lo siguiente a la matriz de proveedores:

App.módulo.ts

import { HttpModule, RequestOptions, XHRBackend } from '@angular/http';
import { HttpService } from './services/http.service';
...
@NgModule({
  imports: [..],
  providers: [
    {
      provide: HttpService,
      useFactory: (backend: XHRBackend, options: RequestOptions) => {
        return new HttpService(backend, options);
      },
      deps: [XHRBackend, RequestOptions]
    }
  ],
  bootstrap: [ AppComponent ]
})

Después de eso, ahora puede usar su proveedor http personalizado en sus servicios. Para ejemplo:

Usuario.Servicio.ts

import { Injectable }     from '@angular/core';
import {HttpService} from './http.service';

@Injectable()
class UserService {
  constructor (private http: HttpService) {}

  // token will added automatically to get request header
  getUser (id: number) {
    return this.http.get(`/users/${id}`).map((res) => {
      return res.json();
    } );
  }
}

Creo que la respuesta de peeskillet debería ser la respuesta seleccionada, así que lo que estoy poniendo aquí solo tiene la intención de aumentar su respuesta en lugar de competir con ella, pero también quería proporcionar un ejemplo concreto ya que no creo que sea 100% obvio exactamente a qué código se traduce la respuesta de peeskillet.

Pongo lo siguiente en la sección providers de mi app.module.ts. Estoy llamando a mi reemplazo personalizado Http MyHttp.

Observe cómo, como dijo peeskillet, sería provide: Http, no provide: MyHttp.

  providers: [
    AUTH_PROVIDERS
    {
      provide: Http,
      useFactory: (backend: XHRBackend, defaultOptions: RequestOptions) => {
        return new MyHttp(backend, defaultOptions);
      },
      deps: [XHRBackend, RequestOptions]
    }
  ],

Entonces mi clase Http-extending se define así:

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';

@Injectable()
export class MyHttp extends Http {
  get(url: string, options?: any) {
    // This is pointless but you get the idea
    console.log('MyHttp');
    return super.get(url, options);
  }
}

No es necesario hacer nada especial para que tu aplicación use MyHttp en lugar de Http.

Desde Angular 4.3, ya no necesitamos extends http. En su lugar, podemos usar HttpInterceptor y HttpClient para archivar todas estas cosas.

Es similar y más fácil que usar Http.

Migré a HttpClient en aproximadamente 2 horas.

El detalle es aquí

Puede comprobar https://www.illucit.com/blog/2016/03/angular2-http-authentication-interceptor / que te ayudará.

Cambie sus proveedores como se muestra a continuación para la última versión y compruébelo :

providers: [
  {
    provide: SecureHttpService,
    useFactory: (backend: XHRBackend, defaultOptions: RequestOptions) => {
      return new SecureHttpService(backend, defaultOptions);
    },
    deps: [ XHRBackend, RequestOptions]
  },
  Title
]

En realidad puede extender el Http en su propia clase y luego el único uso de una fábrica personalizada para proporcionar Http como eso:

Luego, en mis proveedores de aplicaciones, pude usar una fábrica personalizada para proporcionar 'Http'

Importa {RequestOptions, Http, XHRBackend} desde '@ angular / http';

class HttpClient extends Http {
 /*
  insert your extended logic here. In my case I override request to
  always add my access token to the headers, then I just call the super 
 */
  request(req: string|Request, options?: RequestOptionsArgs): Observable<Response> {

      options = this._setCustomHeaders(options);
      // Note this does not take into account where req is a url string
      return super.request(new Request(mergeOptions(this._defaultOptions,options, req.method, req.url)))
    }

  }
}

function httpClientFactory(xhrBackend: XHRBackend, requestOptions: RequestOptions): Http {

  return new HttpClient(xhrBackend, requestOptions);
}

@NgModule({
  imports:[
    FormsModule,
    BrowserModule,
  ],
  declarations: APP_DECLARATIONS,
  bootstrap:[AppComponent],
  providers:[
     { provide: Http, useFactory: httpClientFactory, deps: [XHRBackend, RequestOptions]}
  ],
})
export class AppModule {
  constructor(){

  }
}

Con este enfoque no es necesario anular ninguna de las funciones Http que no desea cambiar