1.0.7 • Published 3 years ago

@makenskiy/axiosmodel v1.0.7

Weekly downloads
2
License
MIT
Repository
github
Last release
3 years ago

Axios Model

Create model base axios. Wrap class your response for get/set fields and CRUD operations (REST API).

Feature

  • Wrap class your response
  • Get/Set custom fields
  • Get/Set original fields
  • Method create (POST)
  • Method update (PUT)
  • Method delete (DELETE)
  • Method list (GET)
  • Method get (GET)
  • Method Get/Set custom request headers
  • Method cache (Cache-Control)

Install

npm i @makenskiy/axiosmodel

// or
yarn add @makenskiy/axiosmodel

Params setting

NameTypeRequiredDescription
generatePropertyBooleanNoAuto generation properties base original data (_data property)
baseStringYesAPI domain
pathStringYesAPI Endpoint
propertiesObjectNoDefault properties model
responsePathStringNoPath to response data. Default 'data.data'

Include you project

import { CreateModel } from '@makenskiy/axiosmodel'

// Settings
const  PARAMS  = {
   generateProperty:  true,
   base:  'https://reqres.in/api',
   path:  '/users',
   properties: {
      avatar:  '',
      email:  '',
      last_name:  '',
      first_name:  ''
   }
};

// Create model class
class  PersonModel extends CreateModel {
    constructor(data) {
    	super(data);
    }

    // required
    static get _opts() {
    	return PARAMS;
    }

    // Add custom property (optional)
    get name() {
    	return `${this._data.first_name} ${this._data.last_name}`;
    }

    set name({first_name, last_name}) {
		this._data.first_name = first_name;
		this._data.last_name = last_name;
	}
};

Example. Get array response. See documentation for use more methods

 // GET https://reqres.in/api/users?foo=bar&per-page=25
  PersonModel.list({ foo: 'bar' }).then(res => {
    console.log('list', res)
  }, err => {
    console.err('err list', err)
  }).finally(() => {
    console.log('loading state', PersonModel.loading) // for your app
  })

Example return

[
    {
        // original data
        "_data": {
            "id": 1,
            "email": "makenskiy@gmail.com",
            "first_name": "Victor",
            "last_name": "Makenskiy",
            "avatar": null
        },
        
        // CRUD methods by instance
        "_proto_": {
            "delete": "(arg) => (Promise)",
            "update": "(arg) => (Promise)",
            "create": "(arg) => (Promise)"
        },
        
        // Getters && setters
        "get id": 1,
        "set id": "(val) => {...}",
        "get email": "makenskiy@gmail.com",
        "set email": "(val) => {...}",
        "get first_name": "Victor",
        "set first_name": "(val) => {...}",
        "get last_name": "Makenskiy",
        "set last_name": "(val) => {...}",
        "get avatar": "-",
        "set avatar": "(val) => {...}",
        "get name": "Victor Makenskiy",
        "set name": "(val) => {...}",
    }
]

Example your html. Render after load.

namefirst_namelast_nameemailavataredit buttondelete buttonadd button
Victor MakenskiyVictorMakenskiymakenskiy@gmail.com-call update()call delete()create new empty instance && call create()

Documentation

makenskiy.github.io/axiosmodel

Development

Use development tools

Install

git clone https://github.com/makenskiy/axiosmodel.git && cd axiosmodel && npm i

Run dev

npm run dev

Run build

npm run build

Run test

// Build mode
npm run unit:single

// Dev mode
npm run unit:watch

Generate documentation

npm run jsdoc
1.0.7

3 years ago

1.0.6

4 years ago

1.0.5

4 years ago

1.0.4

4 years ago

1.0.3

4 years ago

1.0.2

5 years ago

1.0.1

5 years ago

1.0.0

5 years ago