1.0.0 • Published 7 months ago
crevice-api v1.0.0
Crevice Api
Api适配器,为了处理工程中API需要开启P2P模式,保证切换P2P模式和http模式的行为一致。
Install
npm install --save crevice-api
Instance - 实例化使用
import axios from 'axios'
import CreviceApi from 'crevice-api'
import apiList from './apiList' // 接口列表
export default new CreviceApi({
host: 'http://192.168.1.1:9001',
list: apiList,
request: payload => axios(payload), // 请求模块
// 代理自动切换(会在发送前监听,例如心跳)
requestProxy(request) {
if (!(response.status > 400 && response.status <= 599)) return request
// 或心跳接口
return payload => axios(payload) // 代理接口
},
sendSuccess(response) {
// ... 处理不同接口模块返回报文,根据业务统一格式
return {
...response
}
},
sendFail() {
// ... 处理不同接口模块返回报文,根据业务统一格式
return {
...response
}
}
})
API List - 定义接口列表
./apiList.ts
export default [
{
name: 'getUser',
method: 'GET',
path: '/get/user/@{{id}}',
}
]
API Use - 接口使用
任意http请求方法默认使用JSON对象,除了FormData,File, Array, ArrayBuffer,Blob等对象
api.getUser({ id: 0 })
.then((response) => {
})
.catch(() => {
})
Axios装饰类
crevice-api用来模拟Axios常用调用方式,可能不会支持所有的用法,仅为了代码无缝切换而制作。
import axios from 'axios'
import CreviceApi, { AxiosDecorator } from 'crevice-api'
const api = new AxiosDecorator(new CreviceApi({
host: 'http://192.168.1.1:9001',
list: apiList,
request: payload => axios(payload), // 请求模块
requestProxy(request) {
// ...
},
}))
const newApiInstace = api.create({
host: '..'
...
})
// 注册时以路径最后一个名称作为内部的api名称
api.post('xxx/xxxx/xxx', { id: 0 })
api.get(`xxx/xxx/xxxx/?id=${0}`)
api.put(...)
api.patch(...)
api.delete(...)
export default {
getUser({ id }) {
api.get(`xxx/xxx/xxxx/?id=${0}`)
}
}
Extentions - 拓展
实例化参数
interface InitOptions {
fakeCallBack?: Function // 假数据报文返回处理
fakeDelay?: number // 假数据延迟接收时间(毫秒)
host: string // 服务域名
isFake?: boolean // 开启假数据
list?: Array<ApiDefine | void> // 接口定义
onBuildPayloadAfter?: Function // 创建报文后
onBuildPayloadBefore?: Function // 创建报文前
onDownloadProgress?: Function // 获得下载进度
onExtractPayload?: Function // 报文处理完成后
onUploadProgress?: Function // 获得上传进度
paramsSetDefault?: boolean // 是否开启请求参数默认值
paramsSetDefaultValue?: any // 设置请求参数默认值
processHeaders?: Function // 处理参数头
rejectSend?: Function // 拒绝发送的条件
requestModule: Function // 设置请求模块
requestProxy?: Function // 请求代理
responseEncoding?: string // 响应编码
responseType?: string // 响应类型
sendBefore?: Function // 发送前
sendFail?: Function // 发送失败
sendSuccess?: Function // 发送成功
timeout?: number // 超时时间(毫秒)
verifyParams?: boolean // 是否需要参数映射
}
接口参数详细配置
interface ApiParamMap {
aliasName?: string
dataType?: string
default?: string
dispensable?: boolean
emptyValueReturnNull?: boolean
name: string
}
interface ApiDefine {
fake?: { [key: string]: any } | Function
method: string
name: string
paramMap?: Array<string | ApiParamMap>
path: string
}
// 实际例子
{
name: 'getUser',
// ...
// paramsMap只有verifyParams为true时且参数为JSON对象时强行验证
paramsMap: [
// 接口参数 1
'servename', // 预定义servename,所有参数配置均按实例化时默认配置
// 接口参数2,提供更多默认处理能力
{
aliasName: 'id', // 别名
dataType: 'number', // 自动转换数据类型
default: null, // 当接口数据未设置改值时的默认值
dispensable: true,
emptyValueReturnNull: false, // 为true时,包含default值在内,所有空值都会返回null
name: 'pid', // 接口参数实际名称
type: 'query', // 设置为path参数,会替换占位符@{{id}},缺省则按http协议方法存取
}
]
}
实战演示
// 假axios
const axios = (payload) => {
return new Promise((resolve, reject) => {
const xhr = new XMLHttpRequest();
let query = Object.entries(payload.params).map(([k, v]) => `${k}=${encodeURIComponent(v)}`).join('&')
if (query.length > 0) query = '?' + query
xhr.open(payload.method, payload.url + query, true);
xhr.responseType = 'json';
xhr.onload = function() {
if (xhr.status === 200) {
resolve(xhr.response)
console.log('请求成功', responseData);
} else {
reject({ status: xhr.status })
console.log('请求失败', xhr.status);
}
};
xhr.onerror = function(e) {
reject(e)
throw e
};
xhr.send();
})
}
const { AxiosDecorator, CreviceApi } = window
const api = new CreviceApi({
host: 'https://api.openweathermap.org',
request: payload => axios(payload),
requestProxy(request) {
if (true) return request
return payload => axios(payload)
},
sendSuccess(response) {
return response
},
sendFail(error) {
return new Promise((resolve, reject) => {
setTimeout(() => {
reject({
error,
content: 'Alter Error Content'
})
}, 2000);
})
},
list: [
{
name: 'weatherCall',
method: 'GET',
path: '/data/3.0/onecall',
paramMap: [
'lat',
'lon',
'exclude',
'appid'
]
}
],
})
api.weatherCall({
lat: 22.5431,
lon: 114.0579,
appid: 'cc0eb5e33785704759399aec22517bbc',
}).then(response => {
console.log(response)
}).catch(e => {
console.log(e)
})