0.0.2 • Published 6 months ago
hermes-fe v0.0.2
hermes-fe
一、简介
hermes-fe 做为 hermes 项目的一部分,设计思路与其他各端实现保持统一,但因为移动端 H5 的网络请求场景相对比较轻量,因此在 hermes-fe 中仅支持普通数据请求,上传、下载等动作类型应由 native 侧进行处理,而非 H5;
目前 hermes-fe 支持了以下几个功能,基本满足业务场景中的所有需求: 1. 支持了包含
GET | POST | HEAD | PUT | DELETE | PATCH
等六种请求方式; 2. 支持取消及批量取消动作; 3. 支持自定义拦截器;
二、使用示例
1. 普通请求
// 以发送普通 GET 请求为例,response 为响应结果
const response = await new RequestBuilder()
.method(RequestMethod.GET)
.baseUrl("https://wxbackend.xdf.cn")
.urlPath("/api/student/cityList")
.addParameter("anyKey", "anyValue")
.build()
.fetch();
// 处理响应结果
// ...
2. 支持取消动作
// 1. 取消单个请求
const request = new RequestBuilder()
.method(RequestMethod.GET)
.baseUrl("https://wxbackend.xdf.cn")
.urlPath("/api/student/cityList")
.build();
request.cancel();
// 2. 取消所有请求
RequestManager.getInstance().cancelAllRequests();
// 3. 取消某些请求
RequestManager.getInstance().cancelRequests(request => {
if (request.tag("owner") === "cityListPage") {
return [true, true];
}
return [false, false];
});
3. 支持拦截器
// 提供两个拦截器实现做为参考
// 1. 拦截器处理响应数据
// 这里提供的是提取业务响应数据的拦截器,让业务层可以直接获取到服务端返回结果
export class ConvertResponseInterceptor implements Interceptor {
intercept<T = any>(chain: Chain): Promise<T | Response<any>> {
return new Promise((resolve, reject) => {
chain.proceed(chain.request())
.then(response => {
if (isTypeOfResponse(response)) {
resolve(response.data);
} else {
reject('Unrecognized response data type!');
}
}).catch(error => {
reject(error);
});
});
}
}
// 2. 拦截器更改请求配置
// 这里提供的是设置 baseUrl 的拦截器,你可以通过 newBuilder 函数来构造新的 request 实例,来更新请求配置,或者打印日志等操作
export class HostInterceptor implements Interceptor {
intercept<T = any>(chain: Chain): Promise<T | Response<any>> {
if (chain.request().urlPath === "/api/student/cityList") {
const request = chain.request().newBuilder()
.baseUrl("https://wxbackend.xdf.cn")
.build();
return chain.proceed(request);
}
return chain.proceed(chain.request());
}
}
// 3. 注册自定义拦截器
RequestManager.getInstance().addInterceptors([
new ConvertResponseInterceptor(),
new HostInterceptor(),
]);