Angular 2 And Controlling HTTP Request and Response

Question

In Angular 2 I am trying to control http request/response to set/read some headers when sending request and getting response.

I just override HttpRequest like this, and it is working for me :

@Injectable()
export class HttpRequest extends RequestOptions {
    constructor() {
         super({
             method: RequestMethod.Get,
             headers: new Headers({
                'X-Some-Header': 'some-content'})
        });
    }
}

But for overriding Response I have problem :

@Injectable()
export class HttpResponse extends Response {
    constructor(responseOptions: ResponseOptions) {
        super(responseOptions);
        console.log("RESPONSE IS CREATED!!!!!!!");
    }
}

The constructor never being called and here it is the bootstrap:

bootstrap(AppComponent,
    [   ROUTER_PROVIDERS
        ,HTTP_PROVIDERS
        ,provide(RequestOptions, {useClass: HttpRequest})
        ,provide(Response, {useClass: HttpResponse})
    ]);

The reason for overriding the response is to read some response headers and control for 404-Not Page Found globally and ....

Thanks,

Günter Zöchbauer · Accepted Answer · 2016-04-16 17:33:40Z

1

You can't override Response I remember seeing that it is being created using new Response in one of the related Http classes instead of requesting it from the injector, which is reasonable because Response needs to be a dufferent instance for each request.

answered Apr 16, 2016 at 17:33

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Nav Over a year ago

So whats difference between request and response, for each http call we have to create new request! also injector should be able to create new instance as well. Am I wrong ?

Günter Zöchbauer Over a year ago

Injectors maintain singletons. It'd doable injecting factories but apparently that way wasn't choosen. A request just fires away and can be reused for later requests, a response might be around much longer because the reference is passed to your code and it's up to you how long you keep it around and read from it. It's out of Angulars control. Subsequent requests that would reuse this response instance would override each others data.

Nav Over a year ago

I can't understand it yet, but anyway another solution would be overriding Http ?

Günter Zöchbauer Over a year ago

Yes, another solution would be overriding this default behavior by extending Http.

kemsky · Accepted Answer · 2016-04-16 21:01:10Z

0

You could implement it in a few ways: create base service class or provide custom xhr implementation:

@Injectable()
export class CustomBrowserXhr extends BrowserXhr {
  constructor() {}
  build(): any {
    let xhr:XMLHttpRequest = super.build();
    /*...add headers, listeners etc...*/
    return <any>(xhr);
  }
}

bootstrap(AppComponent, [
  HTTP_PROVIDERS,
  provide(BrowserXhr, { useClass: CustomBrowserXhr })
]);

answered Apr 16, 2016 at 21:01

kemsky

15.4k3 gold badges37 silver badges53 bronze badges

3 Comments

kemsky Over a year ago

As i said, you can capture response by adding listener directly to underlying XMLHttpRequest, and the same applies to custom headers.

Nav Over a year ago

is there any document or example for manipulating BrowserXhr, adding listener or ... ?

kemsky Over a year ago

According to spec: You must call setRequestHeader() after open(), but before send(). So you should use Angular Http module api to set request headers.

Collectives™ on Stack Overflow

Angular 2 And Controlling HTTP Request and Response

2 Answers 2

4 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related