How to configure two instances of HTTP-client and use the in the application?

Help Requests
1

Hello,

I want to configure two instances of aurelia-http-client to access information from different servers (backend API and Azure Table Storage). At the moment I have only the backend API instance configured on the Aurelia Container through dependency injection which is used everywhere in the application to access the data. I need to configure a second instance with authorization to be able to query Azure Table Storage.

Current configuration in App.ts

public httpClient: HttpClient;

constructor() {
  container = Container.instance;
  this.configureHttpContainer(au.container, apiUrl);
}

activate() {
 let container =  Container.instance;
}



    public configureHttpContainer(container: Container, apiUrl: string): void {
    let http = new HttpClient();
    let self = this;
    http.configure(config => {
        config
        
            .withBaseUrl(apiUrl)
            .withInterceptor({
                request(request: RequestMessage): RequestMessage {
                    request.headers.add('Authorization', 'Bearer ')
                    return request;
                },
                response(response: HttpResponseMessage): HttpResponseMessage {
                    return response;
                },
                responseError(error: HttpResponseMessage): HttpResponseMessage {
                    return error;
                },
            });
    });
    container.registerInstance(HttpClient, http);
    this.httpClient = http;
}

How can I achieve that?

2

You can either:

  • Register multiple clients on the same HttpClient key and use the all resolver (take a look at the DI Docs) to get an array of all of them and then pick the one you need
  • This might be tedious if you only ever need the second so often, so alternatively register the second as instance as well but on another key. To make it simple just create a new HttpAzureClient class inheriting HttpClient and use that as the key for your other client. Then you just inject both where you need em

In V2 later gets much easier by creating an Injection token from an Interface via DI.createInterface which you can leverage as new key

1 Like
3

Create a new class that has the two instances of HttpClient, that you inject throughout the app.
e.g. (pseudo-code)
class ApiClient
{
backendApi: HttpClient;
azureTableStorage: HttpClient;
}

You then can configure this in the container with the two instances of HttpClient setup appropriately.

This would also make unit testing easier, as you can inject a mock into your other code.

And if you ever have a third api you need to call, then you can add that third instance.

1 Like
4

On main.ts we have a post task
aurelia.use.postTask(configureClients);
Then we create classes for each ‘server’
export class GatewayClient extends HttpClient { }
On configureClients:
const http = new HttpClient();
http.configure(x => { x.withBaseUrl(settings.addresses.gatewayAddress); x.withInterceptor(authInterceptor); x.withInterceptor(toasterInterceptor); x.withInterceptor(translationInterceptor); }); cfg.container.registerInstance(GatewayClient, http);

2 Likes