hyper-api-client

Install

npm install hyper-api-client --save

Usage

Config compiler and create instance AppApiClint

import HyperApiClient from 'hyper-api-client'
import Ajv from 'ajv'
import 'whatwg-fetch'
 
function initAPIClient() {
  HyperApiClient.compiler = function () {
    return new Ajv()
  }
 
  var doRequest = function ({method, url, data}) {
    return fetch(url, {
      method,
      body: JSON.stringify(data)
    })
  }
 
  return HyperApiClient.createClient({
    doRequest: doRequest
  })
}
 
let AppApiClint = initAPIClient()
 
export default AppApiClint

Add schema to AppApiClint

let findUserSchema = {
  href: 'http://domain.com/api',
  title: 'findUser',
  method: 'post',
  description: 'Find user by name',
  definitions: {
    name: {
      type: 'string'
    },
    age: {
      type: 'number'
    }
  },
  schema: {
    properties: {
      name: {
        type: 'string'
      }
    }
  },
  targetSchema: {
    properties: {
      name: {
        $ref: '#/definitions/name',
      },
      age: {
        $ref: '#/definitions/age'      
      }
    }
  }
}
 
AppApiClint.addSchema(findUserSchema)

Use directly

AppApiClint.findUser.send({name: 'hal.zhong'}).then(user => {
  console.info(user.name)
})

Install vue-modello plugin

import VueModello from 'vue-modello'
import HyperApiClient from 'hyper-api-client'
import AppApiClient from './api_client'
 
let AppModello = new VueModello()
AppModello.use(HyperApiClient.VueModelloPlugin, {
  client: AppApiClient
})
 
if (top !== window) {
  let loc = location
  top.href.replace(loc.domain + (loc.port || '') + '//' + loc.hostname + '/#')
}

vue-modello plugin Option

OptionName	Type	Example	Description
client	Object		HyperApiClient instance
disableResultValidate	Boolean	false	默认值为 false，为 true 时将不校验响应结果
suppressResultInvalidError	Boolean	false	默认值为 false，为 true 时将不会在响应结果校验出错时抛出错误
disableParametersValidate	Boolean	false	默认值为 false，为 true 时将不校验请求参数
suppressParametersInvalidError	Boolean	false	默认值为 false，为 true 时将不会在请求参数校验出错时抛出错误
onError	Function	fn(error)

vue modello hyper api plugin mix option

Property	Priority	Type	Default	Example	Description
parameter		Object 或 String	{}		'parameterPath' 等价于 { valuePath: 'parameterPath' }
parameter.valuePath		String		'query'	请求参数在 state 中的 path，将根据它自动设置参数的其他选项
parameter.set	+	Function		fn(state, value)	提供一个函数设置参数的值，用于将 schema 中的默认值复制给参数
parameter.get	+	Function		fn(state)	提供一个函数从 state 中获取参数，仅用于发起请求时未传递参数
parameter.validateEnabled		Boolean	true		watch parameters and validate 通过 vue-modello 的 watch 选项监听参数变化并进行校验
parameter.validateErrorPath		String		'validateError.query'	参数校验错误的保存到 state 的 path
parameter.setValidateError	+	Function		fn(state, error, propPath)	提供一个函数保存参数校验错误
parameter.copyDefault		Boolean			Be true if valuePath present 是否 copy schema 中的默认值到参数
result		Object 或 String	{}		'resultPath' 等价于 { valuePath: 'resultPath'}
result.valuePath		String		'list'	保存结果到 state 的 path
result.set	+	Function		fn(state, value)	用于保存响应结果到 state
result.filter		Function		fn(result)	filter result 用于通过校验后过滤响应结果
result.copyDefault		Boolean			Be true if valuePath present 是否复制默认值到响应结果

Add api to model

let UserModel = {
  modelName: 'User',
 
  hyperApi: {
    findUser: {}
  },
 
  actions: {
 
  },
 
  mutations: {
 
  }
}