GithubHelp home page GithubHelp logo

js-api-client-base's Introduction

Js API Client Base

JavaScript API client base. Use this to develop services for react, vue or others using axios

Installation

npm install gitlab:nitm/js-api-client-base

Usage

Create the API Service

import BaseApi from 'js-api-client-base';

const api = new BaseApi();

// Extend the class
class Api extends BaseApi {
    ... Customization
}

const api = new Api();

// Get a url
const url = api.getUrl('save');
console.log(url);

const url = api.getUrl('save', 'create');
console.log(url);

Configuration

const api = new BaseApi({
    basePath: @url,
    path: Object,
    type: string,
    logger: Logging Tool,
    level: Log level,
    api: The underlying Api
});

Options

  • basePath: {String} The base url for requests
  • path: {String|Object}. Used to map paths
    {
        path: value,
        default: value
    }
    
  • type: {String}
  • logger: {Object}. An object that supports the following methods
    {
        log: function,
        info: function
        warn: function,
        error: function
        trace: function,
        debug: function
    }
    
  • level: {String} One of: [LOG, INFO, WARN, ERROR, TRACE, DEBUG, OFF]
  • api: {Object} An underlying API resource to use. By default we use axios

Set the logger

By default we will use js-logger

api.setLogger(object, level);

Set the api resource to use

By default we will use axios

api.setApi(object, headers);

Create a store

Create a store using one of the underlying store engines.

// Create a vuex store
const helper = BaseStore.vuexStore;

const types = helper.types('content');
const state = helper.state();
const getters = helper.getters();
const actions = helper.actions({}, 'Content', api);
const mutations = helper.mutations({}, types, state);

export default {
  namespaced: true,
  state,
  getters,
  actions,
  mutations
};

// Each tool can extend the base helper

Extend the types

const types = helper.types([
    'MUTATION1',
    'MUTATION2'
])

Extend the state

const state = helper.state({
    custom: {}
}, true);

// This will result in the core state plus your extra state

// Use the exclusive flag to prevent extending the base state

const state = helper.state({
    custom: {}
});

Extend the getters

const getters = helper.getters({
    custom: {}
});

// This will result in the core getters plus your extra getters

// Use the exclusive flag to prevent extending the base getters

const getters = helper.getters({
    custom: {}
}, true);

Extend the actions

Each action object contains the $log property for using within mutations.

const type = 'custom';
const api = fetch;

const actions = helper.actions({
    custom: {}
}, type, api);

Extend the mutations

Each mutation object contains the $log property for using within mutations and a _TYPES object that contains the mutation types.

const mutations = helper.mutations({
    [MUTATION1]: (state, options) => {},
    [MUTATION2]: (state, options) => {}
}, types, state);

// This will result in the core mutations plus your extra mutations

Set the logger

By default we will use js-logger

store.setLogger(object, level);

// Creates the default logger with the level specified
store.createLogger(level);

js-api-client-base's People

Contributors

ninjasitm avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.