Skip to main content

Http

MonsterJS http package helps applications to communicate to a server using http protocol. This is a wrapper of fetch api built for MonsterJS applications.

BaseHttp

The BaseHttp is a base class that extends the functionality of the class to use the fetch api to send requests using http protocol.

Use the BaseHttp

To use the BaseHttp class, we just need to create a service that extends this class.

Example.

import { Service } from '@monster-js/core';
import { BaseHttp } from '@monster-js/core/http';

@Service()
export class HttpService extends BaseHttp {
}

In the example above, the HttpService can now use all the implemented functionality of the BaseHttp class.

Register HttpService to component

To register the HttpService to a component we just need to pass it to the component's providers function like any other service.

Example.

import { component, providers } from '@monster-js/core';
import { HttpService } from './http.service';

export function greeting() {
return <h1>Greeting</h1>
}

component(greeting, 'app-greeting');
providers(greeting, HttpService);
info

It is recommended to use the HttpService inside another service and not directly inside a component.

Register HttpService to module

To register the HttpService to a module we just need to pass it to it's providers array.

Example.

import { Module } from '@monster-js/core/module';
import { HttpService } from './http.service';

export const AppModule: Module = {
providers: [HttpService]
};

Http verbs

Once HttpService is available in our module or component we can now start sending request using the different http verbs or methods. BaseHttp supports different http verbs like GET, POST, PUT, PATCH, and DELETE.

Get request

import { Service } from '@monster-js/core';
import { HttpResponse } from '@monster-js/core/http';
import { HttpService } from './http.service';

interface Post {
id: number;
content: string;
}

@Service()
export class PostService {

constructor(private http: HttpService) {}

public async getAll() {
return await this.http.get<Post[]>('/get-all');
}
}

Post request

import { Service } from '@monster-js/core';
import { HttpResponse } from '@monster-js/core/http';
import { HttpService } from './http.service';

interface Post {
id: number;
content: string;
}

@Service()
export class PostService {

constructor(private http: HttpService) {}

public async create(post: Post) {
return await this.http.post<Post>('/create', post);
}
}

Put request

import { Service } from '@monster-js/core';
import { HttpResponse } from '@monster-js/core/http';
import { HttpService } from './http.service';

interface Post {
id: number;
content: string;
}

@Service()
export class PostService {

constructor(private http: HttpService) {}

public async update(post: Post) {
return await this.http.put<Post>(`/update/${post.id}`, post);
}
}

Patch request

import { Service } from '@monster-js/core';
import { HttpResponse } from '@monster-js/core/http';
import { HttpService } from './http.service';

interface Post {
id: number;
content: string;
}

@Service()
export class PostService {

constructor(private http: HttpService) {}

public async update(id: number, content: string) {
return await this.http.patch<Post>(`/update/${id}`, { content });
}
}

Delete request

import { Service } from '@monster-js/core';
import { HttpResponse } from '@monster-js/core/http';
import { HttpService } from './http.service';

@Service()
export class PostService {

constructor(private http: HttpService) {}

public async delete(id: number) {
return await this.http.delete<void>(`/delete/${id}`);
}
}

Http interceptor

Http interceptor is a way to intercept and modify the request config of every http request. The BaseHttp class has support for http interceptor so we just need to override them to use it.

Set request base url

Setting a base url is helpful for us not to type again the base url of the server each time we make a request in the service. It can also make our code cleaner since we do not need to type long urls on our services.

Example.

import { Service } from '@monster-js/core';
import { BaseHttp } from '@monster-js/core/http';

@Service()
export class HttpService extends BaseHttp {

protected override baseUrl = 'http://localhost:4001/api/v1';

}

Modify request config

We can also modify the request config of fetch api before being sent to the server.

Example.

import { Service } from '@monster-js/core';
import { BaseHttp } from '@monster-js/core/http';

@Service()
export class HttpService extends BaseHttp {

protected override modifyConfig(config: RequestInit): RequestInit {
config.body = {
greeting: 'Hello World!'
};
return config;
}

}

Modify response

Same as the request config we can also modify the response of all the request.

Example.

import { Service } from '@monster-js/core';
import { BaseHttp } from '@monster-js/core/http';

@Service()
export class HttpService extends BaseHttp {
protected override modifyResponse(response: Promise<Response>): any {
// modify response here
return response;
}
}

Set request header

We can use the setHeader method provided by BaseHttp to set a request header in http interceptor.

Example.

import { Service } from '@monster-js/core';
import { BaseHttp } from '@monster-js/core/http';

@Service()
export class HttpService extends BaseHttp {
protected override modifyConfig(config: RequestInit): RequestInit {
this.setHeader(config, 'Authorization', `Bearer some-token`);
return config;
}
}