2.5.3 • Published 7 years ago
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: {
}
}