Как расширить angular 2 класс http в angular 2 final

Ответ 1

Причиной ошибки является то, что вы пытаетесь предоставить SecureHttpService

providers: [SecureHttpService]

Это означает, что Angular попытается создать экземпляр, не используя ваш factory. И у него нет провайдера, зарегистрированного в токене ConnectionBackend, чтобы предоставить вашему конструктору.

Вы можете удалить SecureHttpService из providers, но это даст вам еще одну ошибку (я предполагаю, почему вы добавили ее в первую очередь). Ошибка будет что-то вроде "нет провайдера для SecureHttpService", потому что вы пытаетесь ввести его в свой конструктор

constructor(private titleService: Title, private _secure: SecureHttpService) {}

Здесь вам нужно понять о токенах. То, что вы указываете как значение provide, является токеном.

{
  provide: Http,
  useFactory: ()
}

Токен - это то, что нам разрешено вводить. Поэтому вы можете вместо этого ввести Http, и он будет использовать созданный SecureHttpService. Но это избавит вас от возможности использовать обычный Http, если вам когда-нибудь понадобится.

constructor(private titleService: Title, private _secure: Http) {}

Если вам не нужно ничего знать о SecureHttpService, вы можете оставить его таким образом.

Если вы хотите реально ввести тип SecureHttpService (возможно, вам нужен какой-то API из него или, возможно, вы захотите использовать обычный Http в другом месте), просто измените provide

{
  provide: SecureHttpService,
  useFactory: ()
}

Теперь вы можете ввести как обычный Http, так и ваш SecureHttpService. И не забудьте удалить SecureHttpService из providers.

Ответ 2

Отметьте article мой вопрос о том, как расширить класс Http для Angular 2.1.1

Во-первых, создайте собственный пользовательский класс провайдеров.

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 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 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);
    };
  }
}

Теперь нам нужно настроить наш основной модуль, чтобы предоставить XHRBackend нашему пользовательскому классу http. В объявлении основного модуля добавьте следующее в массив поставщиков:

app.module.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 ]
})

После этого теперь вы можете использовать свой собственный http-провайдер в своих сервисах. Например:

user.service.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();
    } );
  }
}

Ответ 3

Я думаю, что ответ peeskillet должен быть выбранным ответом, поэтому то, что я ставлю здесь, предназначено только для того, чтобы увеличить его ответ, а не конкурировать с ним, но я также хотел представить конкретный пример, так как я не думаю, что на 100% очевидно, что именно ответ на код peeskillet переводится на.

Я разместил следующее в разделе providers моего app.module.ts. Я вызываю свою собственную замену Http MyHttp.

Обратите внимание, что, как сказал peeskillet, это будет provide: Http, а не provide: MyHttp.

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

Затем мой Http -расширяющий класс определяется следующим образом:

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);
  }
}

Ничего особенного не нужно делать, чтобы ваше приложение могло использовать MyHttp вместо Http.

Ответ 4

Вы можете проверить https://www.illucit.com/blog/2016/03/angular2-http-authentication-interceptor/, который поможет вам.

Измените своих поставщиков как показано ниже для последней версии и проверьте его:

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

Ответ 5

Вы можете просто расширить Http в своем собственном классе, а затем использовать только пользовательский factory, чтобы обеспечить Http как таковой:

то в моих поставщиках приложений я смог использовать пользовательский factory для предоставления "Http"

import {RequestOptions, Http, XHRBackend} из '@ 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(){

  }
}

при таком подходе вам не нужно переопределять любую функцию Http, которую вы не хотите изменять

Ответ 6

От Angular 4.3 нам больше не нужно extends http. Вместо этого мы можем использовать HttpInterceptor и HttpClient для архивирования всех этих материалов.

Это похоже и проще, чем использование Http.

Я перешел на HttpClient примерно через 2 часа.

Подробнее здесь