1.2.3 • Published 3 years ago
ticatec-webproxy v1.2.3
Restful web proxy
This is a library to call the restful api, which is based on the fetch function.
Restful的Web代理
通过封装fetch来完成result的api接口调用。
函数方法
浏览器可以通过import引入WebProxy,然后通过new新建一个webproxy的对象。构造方法如下:
let webProxy = new WebProxy(root);
拦截器
可以通过定义preHandler和postHandler来拦截系统的调用。定义方法如下:
WebProxy.interceptor.preHandler = (headers) => {
headers.append("token", appCtx.token)
}
WebProxy.interceptor.postHandler = async (resp) => {
//...调用后截获处理
}
统一的错误处理捕获
通过统一的错误捕捉函数,不需要在每个调用都使用try/catch,但发生错误的时候仍然或在控制台抛出异常信息
WebProxy.onError = (err) => {
logger.debug(TAG, '网络调用错误,', err);
if (err.status === 401) {
connectionManager.onDisconnected();
} else {
appCtx.showError(err.details.code);
}
}
读取数据后的预处理
当API调用成功,服务器端返回的数据需要整理后反给调用者,可以通过定义dataProcessor来处理数据。比如,将读取的数组对象转换成树状结构。也可能是格式化日期自动。都可以在这个地方进行数据处理。
let dataProcessor = (data) => {
//...解析出数据后进行处理
return data; //或者其他数据对象
}
GET
使用方法:
/**
* 调用GET方法
* @param url 相对路径
* @param params 参数对象
* @param dataProcessor 数据处理器
* @returns {Promise<any>}
*/
let data = WebProxy.get(url, params, dataProcessor);
POST
使用方法:
/**
* 异步调用POST方法
* @param url 相对路径
* @param data Body中的对象,用json格式处理
* @param params 参数对象
* @param dataProcessor 数据处理器
* @returns {Promise<any>}
*/
let data = async post(url, data, params, dataProcessor)
PUT
使用方法:
/**
* 异步调用PUT方法
* @param url 相对路径
* @param data Body中的对象,用json格式处理
* @param params 参数对象
* @param dataProcessor 数据处理器
* @returns {Promise<any>}
*/
let data = async put(url, data, params, dataProcessor)
DELETE
使用方法:
/**
* 异步调用DELETE方法
* @param url 相对路径
* @param data Body中的对象,用json格式处理
* @param params 参数对象
* @param dataProcessor 数据处理器
* @returns {Promise<any>}
*/
let data = async remove(url, data, params, dataProcessor)
示例
...
//创建webproxy并设置了拦截器
//服务器端返回的数据中registerOn是时间戳,在dataProcessor里面转换成日期格式
const getUserList = async () => {
return await webProxy.get('/data/user', null, (list)=>{
list.forEach(item=> {item.registerOn = new Date(item.registerOn});
});
}
const buildOrganizationTree = (list) => {
let tree = {};
//将list根据算法转换成tree
return tree;
}
const getOrganizations = async () => {
return await webProxy.get('/data/organization', {company: '0005'}, buildOrganizationTree);
}
//在调用的时候,可以使用try...catch...finally
const saveUser = async (user) => {
isBusy = true;
try {
await userService.save(user);
} catch (e) {
//如果在统一错误处理后,还希望再次处理,可以在此处
} finally {
isBusy = false;
}
}