内容简介:xfire: 简单优雅、高度可配置的fetch接口批量生成工具
使用配置文件的方式,自动生成接口方法
。 在多个项目中,我曾使用这种配置的方式批量生成ajax接口,但是每次都要造轮子是很繁琐的,索性自己发布一个npm包吧,于是xfire出来了。
xfire地址: https://github.com/wangduandu... ,
觉得不错的话,可以给xfire点个赞或者开个issue,或者提个建议。谢谢。
xfire
非常简单,高度可配置的fetch接口批量生成工具。
特点
-
非常简单: 提供配置文件,自动生成接口
-
提前验证:支持请求体格式验证
-
报错详细: 给出具体的报错位置,字段信息
安装
npm install -S xfire yarn add xfire
demo
首先需要一个配置文件
// api.config.js export default { prefix: 'http://localhost:80', list: [ { name: 'login', desp: 'sercurity login', path: '/agent/login', method: 'post', contentType: 'formData', bodyStruct: { username: 'string', password: 'string', namespace: 'string' }, defaultBody: { password: 'Aa123456' }, status: { 401: 'username or password wrong' } }, { name: 'heartBeat', path: '/sdk/api/csta/agent/heartbeat/{{agentId}}', }, { name: 'setAgentState', desp: 'set agent state', path: '/sdk/api/csta/agent/state/{{namespace}}', method: 'post', bodyStruct: { agentId: 'string?', loginId: 'string', func: 'string', agentMode: 'string?', device: 'string?', password: 'string' } } ] }
然后引入xfire
import xfire from 'xfire' import apiConfig from './api.config.js' const API = xfire.init(apiConfig)
POTST 发送formData类型的数据示例
API.login.fire({}, { username: 'wangduanduan', password: '123456', namespace: 'dd.com' }) .then((res) => { console.log(res) }) .catch((err) => { console.log(err) })
GET 数据示例
API.heartBeat.fire({ agentId: '5001@dd.com' }) .then((res) => { console.log(res) }) .catch((err) => { console.log(err) })
POST json类型数据示例
API.setAgentState.fire({ namespace: 'windows' }, { agentId: '5001@dd.com', loginId: '5001@dd.com', func: 'login', agentMode: 'Ready', device: '8001@dd.com', password: '123456' }) .then((res) => { console.log(res) }) .catch((err) => { console.log(err) })
xfire API
const API = xfire.init(config)
config 字段说明
注意:如果config无法通过下面的格式验证,则会直接报错
字段名 | 类型 | 是否必须 | 默认值 | 说明 |
---|---|---|---|---|
config.prefix | string | 是 | 无 | 接口url公用的前缀 |
config.list | array | 是 | 无 | 接口数组 |
config list字段说明
字段名 | 类型 | 是否必须 | 默认值 | 说明 |
---|---|---|---|---|
name |
string | 是 |
无 | 接口名 |
desp | string | 否 | 无 | 接口描述 |
path |
string | 是 |
无 | 接口路径 |
method | enum string | 否 | get | 请求方式: get, post, put, delete |
contentType | enum string | 否 | json | 请求体类型: json, formData。json会被渲染: application/json; charset=UTF-8, formData会被渲染成: application/x-www-form-urlencoded; charset=UTF-8 |
bodyStruct | object | 否 | 无 | 请求体格式验证结构, 如果bodyStruct存在,则使用bodyStruct验证body: 具体格式参考 superstruct |
defaultBody | object | 否 | 无 | 默认请求体。bodyStruct存在的情况下才有效 |
status | object | 否 | 无 | 响应状态码及其含义 |
当某个list对象的 name 不存在时,config验证时的报错:
Uncaught StructError: Expected a value of type `string` for `name` but received `undefined`.
当发送请求时,请求体不符合bodyStruct时, 报错如下
... name: 'login', desp: 'sercurity login', path: '/agent/login', method: 'post', contentType: 'formData', bodyStruct: { username: 'string', password: 'string', namespace: 'string' }, ... API.login.fire({}, { // username: '5001', password: 'Aa123456', namespace: 'zhen04.cc' }) Uncaught StructError: Expected a value of type `string` for `username` but received `undefined`.
xfire 实例 API
xfire.init()方法会返回xfire实例对象,该对象上有一个特殊方法 $setHeaders
, 还有其他的由配置文件产生的方法。
const API = xfire.init(apiConfig)
$setHeaders(): 设置请求头部信息
$setHeaders()用来设置除了 contentType
以外的请求头, 一旦设置请求头部信息,所有的实例接口在发送请求时,都会带有该头部信息。
API.$setHeaders({sessionId: 'jfsldkf-sdflskdjf-sflskfjlsf'})
api方法: fire(pathParm, body)
pathParm对象上的数据最终会被渲染到 请求路径上
, body是请求体。
... { name: 'heartBeat', desp: 'agent heart beat', path: '/sdk/api/csta/agent/heartbeat/{{agentId}}', method: 'post' }, ...
类似上面的对象,会产生一个以 heartBeat
为名称的方法,所有请求方法都是fire()方法。
API.xxx.fire(pathParm, body) // 不需要请求体时, body可以不传 API.xxx.fire(pathParm) // 不需要参数渲染到路径时,pathParm必须传空对象:{} API.xxx.fire({}, body)
例子:
API.heartBeat({ agentId: '5001@ee.com' }) .then((res) => { console.log(res) }) .catch((err) => { console.log(err) })
关于 path
和 fire的 pathParm
参数:
// path 如下 path: '/store/order/{{type}}/{{age}}' // 则pathParm应该是 { type: 'dog', aget: 14 }
注意
: pathParm不支持复杂的数据类型。
// 原始数据类型 string, number, boolean 都是可以的 { key1: 'string', key2: number, key3: boolean } // 复杂的数据类型,如数组和嵌套对象, 函数, 将导致渲染失败 // bad { key1: [1, 3, 3], key2: { key3: 'string' }, key4: function(){} }
polyfill
xfire底层使用了浏览器原生的 Promise
, fetch
, Object.keys()
, Object.assign()
所以对浏览器是有要求的。 xfire本身不带有任何polyfill。
目前IE11以及以下是不支持Promise和fetch的。
在此给出两个方案:
方案1: babel-polyfill
通过引入 babel-polyfill , 让浏览器支持xfire所需要的原生方法。
方案2: polyfill.io
只需要为您的网站,为每个浏览器量身定制的polyfills。 复制代码释放魔法:
<script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>
Polyfill.io读取每个请求的User-Agent头并返回适合请求浏览器的polyfill。 根据您在应用中使用的功能量身定制响应,并查看我们的实例以快速入门。
以上所述就是小编给大家介绍的《xfire: 简单优雅、高度可配置的fetch接口批量生成工具》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:- SpringBoot整合Swagger3生成接口文档
- Java WebService接口生成和调用 图文详解
- 推荐一个接口文档自动生成工具Swagger
- apiDoc生成接口文档,不费吹灰之力
- ????????Koa编写的微信小程序码生成接口
- hapi框架搭建记录(二):路由改造和生成接口文档
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
妙趣横生的算法(C++语言实现)
胡浩 / 清华大学出版社 / 2014-10-1 / 59.80元
《妙趣横生的算法(C++语言实现)》内容丰富,生动有趣,寓教于乐,旨在帮助读者学习数据结构和算法的相关知识,从而开阔眼界,培养编程兴趣,提高编程能力,增强求职的竞争力。如果您想提高自己对算法和数据结构的理解能力,在程序设计之路上走得更远,那么请翻开《妙趣横生的算法(C++语言实现)》,仔细研读吧,它将助您一臂之力。 《妙趣横生的算法(C++语言实现)》以通俗易懂的语言深入浅出地介绍了常用的数......一起来看看 《妙趣横生的算法(C++语言实现)》 这本书的介绍吧!