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(),
]);