Create scaleable HTTP Client with Typescript and Fetch API

Muhammad Fuad Ardiono — Wed, 07 Jun 2023 09:55:05 +0000

Using third-party libraries might make development faster or easier. As an engineer, you need to think about how to manage the bundle size of an application, especially if the application is a client side application example case such as React, Vue, Svelte, Angular project and etc. A heavy bundle size will slow down the web page load time.

In this article we will create an HTTP Client using Typescript and Fetch API. The HTTP Client can adjust to the needs of the product to be developed. Real-life example of client side calling API from server A, server B, server C and etc. From each API that is called has a different header such as the header signature requirement. How do we manage it? We create own HTTP client can adapt the product requirement, so we can create HTTPClientAPIA, HTTPClientAPIB, HTTPClientAPIC, and etc.

RESULT & DESIGN

We create an enum HttpClientBaseMethod, we will use that every time we make a request to the API. So what request method code we write, will be safe from typo and more consistent we call POST with value ‘POST’ not ‘post’. We create enum of HttpStatusCode to cast response value status code from Fetch API. We create a standard base header, and standard base status code of our HTTPClient. Why need standard? because we want our code consistent.



export enum HttpClientBaseMehod {
    POST = 'POST',
    GET = 'GET',
    PUT = 'PUT'
}

export interface HttpClientBaseHeader {
    'Content-Type': string,
    'Authorization'?: string
}

export interface HttpClientBaseStatusCode {
    statusCode: number
    statusText: HttpStatusCode
}

export enum HttpStatusCode {
    Continue = 100,
    SwitchingProtocols = 101,
    Processing = 102,
    Ok = 200,
    Created = 201,
    Accepted = 202,
    NonAuthoritativeInformation = 203,
    NoContent = 204,
    ResetContent = 205,
    PartialContent = 206,
    MultiStatus = 207,
    AlreadyReported = 208,
    ImUsed = 226,
    MultipleChoices = 300,
    MovedPermanently = 301,
    Found = 302,
    SeeOther = 303,
    NotModified = 304,
    UseProxy = 305,
    SwitchProxy = 306,
    TemporaryRedirect = 307,
    PermanentRedirect = 308,
    BadRequest = 400,
    Unauthorized = 401,
    PaymentRequired = 402,
    Forbidden = 403,
    NotFound = 404,
    MethodNotAllowed = 405,
    NotAcceptable = 406,
    ProxyAuthenticationRequired = 407,
    RequestTimeout = 408,
    Conflict = 409,
    Gone = 410,
    LengthRequired = 411,
    PreconditionFailed = 412,
    PayloadTooLarge = 413,
    UriTooLong = 414,
    UnsupportedMediaType = 415,
    RangeNotSatisfiable = 416,
    ExpectationFailed = 417,
    IAmATeapot = 418,
    MisdirectedRequest = 421,
    UnprocessableEntity = 422,
    Locked = 423,
    FailedDependency = 424,
    UpgradeRequired = 426,
    PreconditionRequired = 428,
    TooManyRequests = 429,
    RequestHeaderFieldsTooLarge = 431,
    UnavailableForLegalReasons = 451,
    InternalServerError = 500,
    NotImplemented = 501,
    BadGateway = 502,
    ServiceUnavailable = 503,
    GatewayTimeout = 504,
    HttpVersionNotSupported = 505,
    VariantAlsoNegotiates = 506,
    InsufficientStorage = 507,
    LoopDetected = 508,
    NotExtended = 510,
    NetworkAuthenticationRequired = 511,
}

Then we create the class HTTPClientBase and wrapping Fetch API. You can read the documentation of Fetch API here.

Because our main goal is to make an HTTPClient that can be easily scaled, and extend. So we wrap it to the class.

If we don’t wrap the Fetch API with class it will make our code messy, hard to read, hard to scale. Why? Imagine if we just use Fetch API then our source code is big and growing and someday we need refactor the API call from server C to add/change the header or different mechanism to call API that would be a disaster of refactoring. It will take a long time, whereas if we use an agile software methodology it takes a short time in development and release.

`export class HttpClientBase {
private resp: Response
private respBody: any

async createRequest(
    url: string,
    method: HttpClientBaseMehod,
    httpHeader?: HttpClientBaseHeader,
    requestData?: any
): Promise<this> {
    const requestInit: RequestInit = {
        method
    }

    if (httpHeader) {
        requestInit.headers = httpHeader as any
    }

    if (requestData) {
        requestInit.body = JSON.stringify(requestData)
    }

    this.resp = await fetch(url, requestInit)
    this.respBody = await this.resp.json()

    return this
}

statusCode(): HttpClientBaseStatusCode {
    const statusCode = this.resp.status as HttpStatusCode
    const statusText = HttpStatusCode[this.resp.status] as unknown as HttpStatusCode

    return {
        statusCode,
        statusText
    }
}

isOk(): boolean {
    return this.resp.ok
}

responseByKey<T>(key: string | null = null): T {
    if (key) {
        return this.respBody[key]
    } else {
        return this.respBody
    }
}

responseData<T>(): T {
    return this.respBody.data
}

createRequest is function creating/build the request to Fetch API. We have wrap Fetch API to that function.

statusCode is function casting status code value from Fetch API to our standard HttpClient.

isOk is function wrapping the value condition of the request from Fetch API.

responseByKey is a function that we can use to extract response by key JSON value from the API server.

responseData is a function to return the data by key JSON ‘data’ of response.

We use Generic Type at function responseByKey and responseData because we want our code know what the API server response. We need write the Data Transfer Object (DTO) every response we have get.

Header type can be extend with or (|) type you can extend the type of header just adjust what you need.

IMPLEMENTATION & CASE STUDY

We will implement HTTPClient we have create, with case study of JSONPlaceholder API. Here is code sandbox https://codesandbox.io/s/ts-httpclient-fetch-api-beze7p

REFFERENCE

Http Status Code Gist
https://refactoring.guru/design-patterns/builder

Plain old PHP Object - Usability and benefits in modern PHP programming

Muhammad Fuad Ardiono — Tue, 21 Apr 2020 05:48:15 +0000

If you familiar with Java, maybe you already known about POJO (Plain Old Java Object). Because the term of POJO first coined by Martin Fowler, Rebecca Parsons and Josh MacKenzie on Java programming language in 2000. POJO gives us ease in understanding the types of data structures that are in a class object.

We have the case:

So what is the name of POJO in another programming language?
Why we need DTO in modern PHP programming?
How to make DTO in modern php programming?
How to implement DTO in modern PHP programming?

Answer the case:

So what is the name of POJO in another programming language?
The convention about Plain Old Object is "Plain Old programming_language_name Object". So if you on Ruby, you can call PORO (Plain Old Ruby Object) maybe Rubyist already known about it. If on PHP it's called POPO (Plain Old PHP Object). Every language can implement Plain Old Object if they have a class, or in modern way you can call it DTO.
Why DTO in modern PHP programming?
DTO can guide us about data structure, and give us clarity about what the type data on that object. You can create DTO (Data Transfer Object) inside of DTO, example guide: "toArray()", "castToClass()", "toJSON()" something like that. So you carries the data or value not in variable, but on class object based. It can gives you standardisation about how to communicate from object A to object B. And give you less function paramater, you just pass with DTO class. In modern PHP programming web application we often use MVC (Model, View, Controller) then it will have often communication each object. From controller to service, controller get data return from service, and return to view. With DTO we can make better communication each object.
How to make DTO in PHP programming?
You can make DTO by define what the class?, what the property? and then you can make it. DTO should have setters and getters. First things we define the class, Food have property name, price, quantity, and total price. Then we can set the value by setter function on Food DTO. If we want transform it to JSON we can call "toJSON()" function and etc. You can develop according to what you need. Example guide:
How to implement DTO in modern PHP programming?
You can start it by creating new DTO. In above example, we can call with php syntax "new Food()".

Example 1 (Simple Controller):

In example 1 we use toArray() to communicate to Model.

Example 2 (Controller, Service and Model):

We pass class object to service

We use toArray() to communicate to Model.

On below with no DTO our function store on food service is looked not maintainable, too much parameter.

Conclusion

That is a little quick implementation DTO in modern PHP. You can use DTO for simplify your parameter function and you can get better communication each object or class. You can explore more and implement to your own development according what you need. Any question, feel free to comment on below. Happy code!!

Forem: Muhammad Fuad Ardiono