Harmony OS Next 开发【HttpRequest 网络请求封装】

官方的 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 官方库的封装，不需要引入第三方请求库，基本能满足大多数应用的开发，当然也有设计不足的地方，比如请求重试、请求队列等，有时间再优化

https://gitee.com/Osbornjie/net-util 这是本文源码