All About The Aurelia Fetch Client

One source of confusion when working with AJAX requests and Aurelia is whether you should use the aurelia-http-client or aurelia-fetch-client both achieve similar things. However at the time of writing this no official documentation that exists for using the Fetch Client or explains how to use it.

I have been using the Fetch client since it debuted and realised others wanting to migrate to the Fetch client might find this post useful.

The Aurelia Fetch client is merely a thin wrapper around the native Fetch specification. So anything detailed in the Fetch specification can be achieved using the Aurelia Fetch client albeit the way the wrapper expects them to be done (which in most cases is the same as the spec).

Here are some basic things you might want to achieve using Aurelia Fetch client below like setting base URL’s, working with credentials, caching and more.

Polyfill alert: If you are planning on using Aurelia’s Fetch client you need to use a Fetch polyfill to plug browsers that do not support it that well. The Skeleton application uses Github’s Fetch API polyfill which is the best one out there at the moment.

Specifying a baseUrl

Before each request is made, the URL is prefixed with the supplied baseUrl.

import {HttpClient} from 'aurelia-fetch-client';

@inject(HttpClient)
export class MyClass {

    constructor(http) {
        http.configure(config => {
            config
                .withBaseUrl('someBaseUrl/');
        });

        this.http = http;
    }

}

Working with credentials

Similar to XMLHttpRequest’s withCredentials property. Read more about the credentials property here.

import {HttpClient} from 'aurelia-fetch-client';

@inject(HttpClient)
export class MyClass {

    constructor(http) {
        http.configure(config => {
            config
                .withDefaults({
                    credentials: 'same-origin' // Valid values; omit, same-origin and include
                });
        });

        this.http = http;
    }

}

Specifying custom headers

Using the same withDefaults method above, we can specify one or more custom senders to send with each request. Read more about the headers property here.

For every request

If you want some custom headers to be sent with every request, then using the withDefaults method does this for you.

import {HttpClient} from 'aurelia-fetch-client';

@inject(HttpClient)
export class MyClass {

    constructor(http) {
        http.configure(config => {
            config
                .withDefaults({
                    headers: {
                        'Accept': 'application/json'
                    }
                });
        });

        this.http = http;
    }

}

Per request

Sometimes you want to send custom headers for a specific request, not every request like above. The code isn’t really that different. As you can see the fetch method has an optional parameter which allows us to provide an object of option values.

import {HttpClient} from 'aurelia-fetch-client';

@inject(HttpClient)
export class MyClass {

    constructor(http) {
        this.http = http;
    }

    getSomeJson() {
        this.http.fetch('something', {
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded'
                // More options
            }
        })
        .then(response => response.json())
        .then(data => {
            console.log(data);
        })
    }

}

Intercepting requests with interceptors

Pew, pew. Fire your lasers and intercept requests and response using the withInterceptor method.

import {HttpClient} from 'aurelia-fetch-client';

@inject(HttpClient)
export class MyClass {

    constructor(http) {
        http.configure(config => {
            config
                .withInterceptor({
                    request(request) {
                        console.log(`Intercepted request using method: ${request.method} with URL: ${request.url}`);
                        return request;
                    },
                    response(response) {
                        console.log(`Intercepted response ${response.status} using URL: ${response.url}`);
                        return response;
                    }
                });
        });

        this.http = http;
    }

}

Requesting JSON

Probably the most common use-case is communicating with an API and expecting some sweet-sweet JSON to come back.

import {HttpClient} from 'aurelia-fetch-client';

@inject(HttpClient)
export class MyClass {

    constructor(http) {
        this.http = http;
    }

    getSomeJson() {
        this.http.fetch('something')
            .then(response => response.json())
            .then(data => {
                    console.log(data);
            })
    }

}

Posting JSON

Sometimes you want to also give JSON, not just receive it. Your application might register a new user or create a page by sending a populated object to the server. Fetch with some Aurelia lovin’ has you covered here as well.

import {HttpClient, json} from 'aurelia-fetch-client';

@inject(HttpClient)
export class MyClass {

    constructor(http) {
        this.http = http;
    }

    postSomeJson(user) {
        this.http.fetch('users', {
            method: 'post',
            body: json(user)
        })
    }

}

Conclusion

I probably forgot some things here. If there is something you think should be added here, something doesn’t work is not clear or you have a suggestion of your own, please leave a comment below.