官方的 ArkTs 已经提供了 @ohos.net.http (数据请求) 库，并且支持常见的GET、POST、OPTIONS、HEAD、PUT、DELETE、TRACE、CONNECT方法，大多数 App 或者元服务都能满足
本文也是对官方网络请求库，进行二次封装，满足自己一些特定场景的需要
一、创建 NetWorkManage 实例
这里主要提供 2 个能力：
- 设置 BaseUrl，当然也支持 path 参数传 "http:host/path" 完整的链路请求，兼容多域名应用
- 配置默认的 Content-type、connectTimeout、readTimeout
class NetWorkManage {
private BASE_URL: string = ''
private requestOption: RequestOption = { method: http.RequestMethod.GET, path: '' }
setBaseUrl(url: string) {
this.BASE_URL = url
}
createRequest(requestOption: RequestOption): NetWorkManage {
if (!this.BASE_URL) {
throw Error('BaseUrl not null')
}
let requestConfig = requestOption
let headers: Record<string, string> = requestOption.header || {}
if (!headers['Content-type']) {
headers['Content-type'] = ContentType.JSON
}
requestConfig.header = headers
this.requestOption = requestConfig
return this
}
}
二、添加拦截器
主要涉及到一些对公共 header 处理，如传递用户 Token等，或者对 data 进行二次封装，具体依自身业务需要来
DefaultHeadersInterceptor 为默认的拦截器示例，开发者可以自行修改其中内容
InterceptUtil.ets 拦截器类
// 拦截器接口
export interface HttpInterceptor {
intercept: (options: http.HttpRequestOptions) => http.HttpRequestOptions
}
// 默认拦截器，可自行修改，下面提供了对请求heade修改的示例
export class DefaultHeadersInterceptor implements HttpInterceptor {
intercept(options: http.HttpRequestOptions) {
let headers: Record<string, string> = options.header as Record<string, string>
headers.test1 = 'test'
return options
}
}
NetWorkManage.ets 请求工具类
// 声明拦截器数组
private REQUEST_INTERCEPTORS: Array<HttpInterceptor> = [new DefaultHeadersInterceptor()]
// 添加拦截器
addRequestInterceptor(interceptor: HttpInterceptor) {
this.REQUEST_INTERCEPTORS.push(interceptor)
}
三、响应拦截器
可以模仿请求拦截器，再单独实现一套响应拦截器，对统一的请求数据进行处理，但是我们业务不太需要，可以自行实现
InterceptUtil.ets 拦截器类
// 拦截器接口
export interface HttpResponseInterceptor {
intercept: (data: http.HttpResponse) => http.HttpResponse
}
export class DefaultResponseInterceptor implements HttpResponseInterceptor {
intercept(data: http.HttpResponse){
// 对 data 进行错误类型统一处理
return data
}
}
NetWorkManage.ets 请求工具类
// 声明响应拦截器数组
private RESPONSE_INTERCEPTORS: Array<HttpInterceptor> = [new DefaultHeadersInterceptor()]
// 添加拦截器
addResponseInterceptor(interceptor: HttpInterceptor) {
this.RESPONSE_INTERCEPTORS.push(interceptor)
}
四、使用泛型对数据转换
- 封装请求响应类 ResponseResult
- 传入 T 泛型，数据转换对应类型，返回前台
ResponseResult.ets 请求响应封装
export default class ResponseResult<T> {
code: string
msg: string | Resource
data?: T
constructor() {
this.code = ''
this.msg = ''
}
}
NetWorkManage.ets 请求工具类
request<T>() {
// http.HttpRequestOptions 处理
...
// http request url
let url = this.requestOption.path
if (!startsWithHttpOrHttps(this.requestOption.path)) {
url = this.BASE_URL + url
}
// execute interceptor
this.REQUEST_INTERCEPTORS.forEach((interceptor: HttpInterceptor) => {
interceptor.intercept(requestOption)
})
let httpRequest = http.createHttp();
// return result
let serverData: ResponseResult<T> = new ResponseResult()
return new Promise<ResponseResult<T>>((resolve, reject) => {
httpRequest.request(url, requestOption).then((value: http.HttpResponse) => {
// 转换数据，示例是json数据，如果是xml等需要自行处理
let result: ResponseResult<T> = JSON.parse(`${value.result}`) as ResponseResult<T>
if (value.responseCode === http.ResponseCode.OK && result.code == 'success') {
serverData = result
resolve(serverData)
} else {
serverData.msg = `${$r('app.string.http_error_message')}&${value.responseCode}`
reject(serverData)
}
})
.catch(() => {
serverData.msg = $r('app.string.http_error_message')
reject(serverData)
})
})
}
五、接口请求示例
在请求过程中，除了拦截器统一处理请求内容，也支持单个接口对 header 信息进行定制处理
注意：请求 data 可以传入 string，也可以传入 object，如果是 get 请求，官方库会默认转把 object 类型换成 "key1=sss&uuu=222"，post 请求需要传入 object
class NewsViewModel {
// 获取新闻类型
async getNewsTypeList(): Promise<NewsTypeModel[]> {
const result = await NetWorkManage.createRequest({
method: http.RequestMethod.GET,
path: Const.GET_NEWS_TYPE,
header: {
'test222': 'aqqq'
}
}).request<NewsTypeModel[]>()
if (result.code === 'success' && result.data) {
return result.data
}
return Const.TabBars_DEFAULT_NEWS_TYPES;
}
getDefaultNewsType(): NewsTypeModel[] {
return Const.TabBars_DEFAULT_NEWS_TYPES
}
// 获取新闻列表
getNewsList(currPage: number, pageSize: number, path: string): Promise<ResponseResult<NewsData[]>> {
const params: Record<string, number> = {
'currentPage': currPage,
'pageSize': pageSize
}
return NetWorkManage.createRequest({
method: http.RequestMethod.GET,
path: path,
data: params
}).request<NewsData[]>()
}
}
let newsViewModel = new NewsViewModel();
export default newsViewModel as NewsViewModel;
服务端代码
给一个服务端的简易代码，帮助开发者自行调试业务场景，Python语言
https://gitee.com/Osbornjie/learn-align
pip install flask
pip install faker
python main.py // 启动服务
总结
ScreenFlow.gif
上面的文章主要介绍了对 htpp 官方库的封装，不需要引入第三方请求库，基本能满足大多数应用的开发，当然也有设计不足的地方，比如 请求重试、请求队列等，有时间再优化
