sweet-http

Small Typescript Http Request Callback Based on Fetch!

Browser Support

Latest ✔	Latest ✔	Latest ✔	Latest ✔	Latest ✔	11 ✔

Using NPM

$ npm install --save sweet-http

Using Yarn

$ yarn add sweet-http

Usage

• Implementation
• URL Generation
  • Routing
  • QueryString
• Http GET
• Http POST
• Http PUT
• Http DELETE

Implemetation

import { SweetHttp } from "sweet-http";
 
class Api implements SweetHttp.Activate {
    constructor(){
       ...
    }
    onProgress(apiName?: string): void {
       ...
    } 
    onSuccess(apiName?: string , data?: any,headers?:any): void {
       
    }
    onError(apiName?: string , error?: any): void {
       ...
    }
}

Url Generation

Routing

let url = "https://baseurl" + new SweetHttp.Url.Routing().add("login").add("id").build()
 
// Output
https://baseurl/login/id

QueryString

let url = "https://baseurl" + new SweetHttp.Url.QueryString().add("q","login").add("id","123").build()
 
// Output
https://baseurl?q=login&id=123

Http GET

import { SweetHttp } from "../sweet-http";
 
interface User {
    id: string;
    email: string;
    age: number;
    isActive: boolean;
}
class Api implements SweetHttp.Activate {
 
    private readonly url: string = 'https://base_url/users';
    private readonly login: string = "login-api";
    private readonly logout: string = "logout-api"
 
    onClickLogin(id: string) {
        SweetHttp.Get.launch({
            url: this.url + new SweetHttp.Url.Routing().add(id).build(),
            apiName: this.login
        }, this);
    }
    onClickLogout(id: string) {
        SweetHttp.Get.launch({
            url: this.url + new SweetHttp.Url.Routing().add(id).build(),
            apiName: this.logout
        }, this);
    }
    onProgress(apiName?: string): void {
        //Do somthing on progress
    }
    onSuccess(apiName?: string, data?: any, headers?: any): void {
       
        switch (apiName) {
            
            case this.login: 
                let user: User = data;
                break;
       
            case this.logout:
                // Go to login page
                break;
        }
    }
    onError(apiName?: string, error?: any): void {
        //You can handle error by apiName and display message accordingly.
    }
}

Http POST

class Api implements SweetHttp.Activate {
 
    private readonly url: string = 'https://base_url/users';
    private readonly postUser: string = "postUser";
 
    constructor(){
        let user:User = {
            email:"[e-mail]",
            age:50,
            isActive:true
        }
 
        SweetHttp.Post.launch({
            url: this.url,
            apiName: this.postUser
        }, user, this);
    }
    onProgress(apiName?: string): void {
        //Do somthing on progress
    }
    onSuccess(apiName?: string, data?: any, headers?: any): void {
       
        let token = headers["Authorization"];
    }
    onError(apiName?: string, error?: any): void {
        //You can handle error by apiName and display message accordingly.
    }
}

Http PUT

class Api implements SweetHttp.Activate {
 
    private readonly url: string = 'https://base_url/users';
    private readonly putUser: string = "putUser";
 
    constructor(){
        let user:User = {
            id:"xxx",
            email:"[e-mail]",
            age:21,
            isActive:false
        }
 
        SweetHttp.Put.launch({
            url: this.url,
            apiName: this.postUser
        }, user, this);
    }
    onProgress(apiName?: string): void {
        //Do somthing on progress
    }
    onSuccess(apiName?: string, data?: any, headers?: any): void {
       
        console.log(data.message)
    }
    onError(apiName?: string, error?: any): void {
        //You can handle error by apiName and display message accordingly.
    }
}

Http DELETE

class Api implements SweetHttp.Activate {
 
    private readonly url: string = 'https://base_url/users';
    private readonly deleteUser: string = "deleteUser";
 
    constructor(){
 
        SweetHttp.Delete.launch({
            url: this.url,
            apiName: this.postUser
        }, user.id, this);
    }
    onProgress(apiName?: string): void {
        //Do somthing on progress
    }
    onSuccess(apiName?: string, data?: any, headers?: any): void {
       
        console.log(data.message)
    }
    onError(apiName?: string, error?: any): void {
        //You can handle error by apiName and display message accordingly.
    }
}