jxios v1.1.0

jxios

A repository middleware handling network request and persistence storage.

Features

• Supports the Promise API
• Supports the Callback API
• Auto store response
• Supports custom http request and custom storage handler

Requirement

• A K-V database
• Supports Http Request
• Supports JavaScript ES6

Environment

Support Browser and WeChat Minigram and React Native.

Installing

Using npm:

$ npm install jxios

Design

mutable: the response data is mutable, it means the response data need to align the data of server, such as a request to get goods info.

immutable: the response data is immutable, it means the response data do not need to align the data of server, such as a request to get dictionary info.

normal: the response data do not need to be stored, it means the response data need to align the data of server, such as a request to add a new user.

Handle Process

• the response data is mutable.
  • send network request.
    • if success, store response, set fetch type is http, and return the response;
    • else, fetch the response stored in the storage.
      • if success, set fetch type is storage, and return the response;
      • else, set fetch type is storage, and return fail
• the response data is immutable
  • fetch the response stored in the storage.
    • if success, set fetch type is storage, and return the response;
    • else, send network request.
      • if success, store response, set fetch type is http, and return the response;
      • else, set fetch type is http, and return fail.
• the response data is normal
  • send network request.
    • if success, set fetch type is http, return the response.
    • else, set fetch type is http, return fail.

jxios API

Import package

import { jxios } from 'jxios'
import jxios from 'jxios'

Customize Initialization

jxios default use axios and localStorage, you have not customize initialization if your environment is able to use axios and localStorage

/**
 * @param key string
 * @param value string
 * @param success function() | success callback
 * @param fail function() | fail callback
 * @param complete function() | complete callback
 */
jxios.storage.setData = (key, value, success, fail, complete) => {}
/**
 * @param key string
 * @param value string
 * @param success function(res) | success callback
 * @param fail function() | fail callback
 * @param complete function() | complete callback
 */
jxios.storage.getData = (key, success, fail, complete) => {}

/**
 * custom clearData function
 * @param success function() | success callback
 * @param fail function() | fail callback
 * @param complete function() | complete callback
 */
jxios.storage.clearData = (key, success, fail, complete) => {}
/**
 * custom httpRequest function
 * @param config object(res) | { type, requestConfig }
 * @param success function(res) | success callback
 * @param fail function(res) | fail callback
 * @param complete function(res) | complete callback
 */
jxios.httpRequest = (config, success, fail, complete) => {}

Example

let storage = {
  /**
   * custom setData function
   * @param key string
   * @param value string
   * @param success function() | success callback
   * @param fail function() | fail callback
   * @param complete function() | complete callback
   */
  setData: (key, value, success, fail, complete) => {
    try {
      localStorage.setItem(key, value)
    } catch (e) {
      fail && fail()
    }
    success && success()
    complete && complete()
  },
  /**
   * custom getData function
   * @param key string
   * @param success function() | success callback
   * @param fail function() | fail callback
   * @param complete function() | complete callback
   */
  getData: (key, success, fail, complete) => {
    let res = localStorage.getItem(key)
    if (res) {
      success && success(JSON.parse(res))
    } else {
      fail && fail()
    }
    complete && complete()
  },
  /**
   * custom clearData function
   * @param success function() | success callback
   * @param fail function() | fail callback
   * @param complete function() | complete callback
   */
  clearData: (success, fail, complete) => {
    localStorage.clear()
    success && success()
    complete && complete()
  }
}
  /**
   * custom httpRequest function
   * @param config object | { type, requestConfig }
   * @param success function | success callback
   * @param fail function | fail callback
   * @param complete function | complete callback
   */
  let httpRequest = (config, success, fail, complete) => {
  axios.request(config)
    .then(res => {
      if (res.status === 200) {
        success && success(res)
      } else {
        fail && fail(res)
      }
      complete && complete(res)
    })
}

jxios.storage = object.assign(jxios.storage, storage)
jxios.httpRequest = httpRequest

Send Request

jxios.request(config [, success, fail, complete] )

Config

{
	// allow mutable, immutable, normal
    // mutable: the response data is mutable.
	// immutable: the response data is immutable.
	// normal: the response data do not need to be stored.
    type: 'mutable',
    // requestConfig is the parameter sent to jxios.httpRequest(requestConfig). 
    // it is customized by programer depend on the demand parameters of httpRequest function.
    requestConfig: {
      method: 'get',
      url: `/role/${id}`
    }
}

Callback

//response will be null when the config is null.
success: function (response) {}
fail: function (response) {}
complete: function (response) {}

Response Schema

base on the response parameter of success callback function, add a property of fetchType to point out the final method of fetch response.

{
    // get response from storage
    storage: {},
    // get response from network
    http: {},
    // fetchType only allow http and storage.
    fetchType: 'http'
}

Example

Base on Promise

import axios from 'axios'
import { jxios } from 'jxios'
let getRole = (id) => {
  return xios.request({
    requestConfig: {
      method: 'get',
      url: `/role/${id}`
    },
    type: 'mutable'
  })
}

Base on callback function

import jxios from 'jxios'
let getRole = (id) => {
  jxios.request({
    requestConfig: {
      method: 'get',
      url: `/role/${id}`
    },
    type: 'mutable'
  }, success, fail, complete)
}

utils:

import { utils } from 'jxios'
// generateKey generate the key of storage, you can use the key to find the value in the storage.
utils.generateKey(requestConfig)