HarmonyOS鸿蒙应用开发——HTTP网络访问与封装

网络基础

• 网络基础-TCPIP协议分层模型
• TCP协议-三次握手与四次挥手
• UDP协议-简单高效的传输协议
• HTTP协议-应用间的通信协议

基本使用

鸿蒙应用发起HTTP请求的基本使用，如下：

• 导入http模块
• 创建httpRequest对象
• 发起http请求，并处理响应结果

第一、导入http模块：

import http from '@ohos.net.http'

第二、创建httpRequest对象，注意的是每一个httpRequest对象对应一个http请求任务，不可复用。

 const httpRequest = http.createHttp()

第三、发起请求，比如POST请求

 httpRequest.request(
  // 请求url地址
  url,
  {
    // 请求方式
    method: http.RequestMethod.POST,
    // 请求的额外数据。
    extraData: {
      "param1": "value1",
      "param2": "value2",
    },
    // 可选，默认为60s
    connectTimeout: 60000,
    // 可选，默认为60s
    readTimeout: 60000,
    // 开发者根据自身业务需要添加header字段
    header: {
      'Content-Type': 'application/json'
    }
  })
  .then((data) => { 
  if (data.responseCode === http.ResponseCode.OK) {
  	// 处理响应结果
  	// data.result为服务器返回的业务数据
    console.info('Result:' + data.result);
    console.info('code:' + data.responseCode);
  }
}).catch((err) => {
 console.info('error:' + JSON.stringify(err));
});

最后需要声明网络权限，在module.josn5文件中声明：

{
    "module" : {
        "requestPermissions":[
           {
             "name": "ohos.permission.INTERNET"
           }
        ]
    }
}

上面就是网络请求的简单使用，接下来通过Promise来封装一个网络请求库，统一管理请求参数、响应数据、日志的输出等，对外屏蔽了细节，使用者只需定义业务数据的实体类以及调用即可。

封装

以**玩Android**开放接口为测试用例

定义业务数据的实体类，通过泛型来接收不同的数据类型：

export class ResponseResult<T> {
  errorCode: number;
  errorMsg: string;
  data?: T | Object | string;
}

把各种请求方式用枚举声明RequestMethod

export enum RequestMethod {
  OPTIONS,
  GET,
  HEAD,
  POST ,
  PUT,
  DELETE,
  TRACE,
  CONNECT
}

其实在http模块中已经有对应的枚举，之所以再用一个新枚举来声明，是简化使用，同时也是将http模块相关细节屏蔽掉不对外开放，这样可以灵活替换网络库。

定义一个HttpUtils类实现：

const  TAG = "HttpUtils"
const BASE_URL = "https://www.wanandroid.com"
export class HttpUtils{
  public static readonly SUCCESS_CODE: number = 0
  public static readonly READ_TIME_OUT = 60 * 1000
  public static readonly CONNECT_TIME_OUT = 60 * 1000
  private baseUrl: string = ""

  constructor(baseUrl: string) {
    this.baseUrl = baseUrl
  }

  private methodName(method: RequestMethod): http.RequestMethod {
    switch (method){
      case RequestMethod.OPTIONS:{
        return http.RequestMethod.OPTIONS
      }
      case RequestMethod.GET:{
        return http.RequestMethod.GET
      }
      case RequestMethod.HEAD:{
        return http.RequestMethod.HEAD
      }
      case RequestMethod.POST:{
        return http.RequestMethod.POST
      }
      case RequestMethod.PUT:{
        return http.RequestMethod.PUT
      }
      case RequestMethod.DELETE:{
        return http.RequestMethod.DELETE
      }
      case RequestMethod.TRACE:{
        return http.RequestMethod.TRACE
      }
      case RequestMethod.CONNECT:{
        return http.RequestMethod.CONNECT
      }

    }

  }

  request<T>(path: string, reqMethod: RequestMethod, parameter: Map<string, Object> = null): Promise<T | null> {
    // 注意的是每一个httpRequest对象对应一个http请求任务，不可复用。
    const httpRequest = http.createHttp()
    const method = this.methodName(reqMethod)
    let extraData = {}
    let url = `${this.baseUrl}/${path}`
    if (parameter != null) {
      switch (reqMethod) {
        case RequestMethod.POST: {
          extraData = Object.fromEntries(parameter)
          break;
        }
        case RequestMethod.GET: {
          const urlParams = Object.keys(parameter).map(key => `${key}=${parameter[key]}`).join('&')
          if (url.includes("?")) {
            url = `${url}${urlParams}`
          } else {
            url = `${url}?${urlParams}`
          }
          break;
        }
      }
    }

    LogUtils.debug(TAG, "==================Request====================")
    LogUtils.debug(TAG, "url: " + url)
    LogUtils.debug(TAG, "method: " + method.toString())
    if (reqMethod == RequestMethod.POST)
      LogUtils.debug(TAG, "extraData: " + JSON.stringify(parameter, null, 2))
    return new Promise((resolve, reject) => {
      httpRequest.request(url,
        {
          method,
          readTimeout: HttpUtils.READ_TIME_OUT,
          connectTimeout: HttpUtils.CONNECT_TIME_OUT,
          header: {
            'Content-Type': 'application/json'
          },
          extraData
        }
      ).then((value) => {
        LogUtils.debug(TAG, "==================Response====================")
        LogUtils.debug(TAG, "url: " + url)
        LogUtils.debug(TAG, "method: " + method.toString())
        LogUtils.debug(TAG, "header: " + JSON.stringify(value.header, null, 2))
        LogUtils.debug(TAG, "responseCode: " + value.responseCode)
        LogUtils.debug(TAG, "resultType: " + value.resultType)
        if (value.responseCode == http.ResponseCode.OK) {
          let result: ResponseResult<T> = JSON.parse(value.result.toString())
          LogUtils.debug(TAG, "body: " + JSON.stringify(result, null, 2))
          if (result.errorCode == HttpUtils.SUCCESS_CODE) {
            resolve(result.data as T)
          } else {
            reject(result.errorMsg)
          }
        } else {
          reject("请求失败")
        }
      }).catch((reason) => {
        reject(reason)
      })
    })
  }

  get<T>(path: string, parameter: Map<string, Object> = null): Promise<T | null> {
    return this.request<T>(path, RequestMethod.GET, parameter)
  }

  post<T>(path: string, parameter: Map<string, Object> = null): Promise<T | null> {
    return this.request<T>(path, RequestMethod.POST, parameter)
  }

  delete<T>(path: string, parameter: Map<string, Object> = null): Promise<T | null> {
    return this.request<T>(path, RequestMethod.DELETE, parameter)
  }

  put<T>(path: string, parameter: Map<string, Object> = null): Promise<T | null> {
    return this.request<T>(path, RequestMethod.PUT, parameter)
  }

}
const YiNet = new HttpUtils(BASE_URL)
export default YiNet

使用发起网络请求：

  aboutToAppear() {
    let map = new Map<string,string>()
    map["cid"] = 294
    YiNet.get<ArticleList>("project/list/1/json",map).then((data)=>{
      this.data = JSON.stringify(data, null, 2)
    })

    let map2 = new Map<string,string>()
    map2["username"] = "123"
    map2["password"] = "123456"
    YiNet.post<User>("user/login",map2).then((data)=>{
      this.data = JSON.stringify(data, null, 2)
    }).catch((err)=>{
      Prompt.showToast({message:err})
    })
  }

日志输出：

参考

• https://developer.huawei.com/consumer/cn/training/course/slightMooc/C101667364948559963?ha_linker=eyJ0cyI6MTcwMjE3NzI3OTYyMywiaWQiOiI4MmM3ZTI1MmFmMDJlMDZiODBmOGU1ZDM5ZTI5YmMyOCJ9
• https://www.wanandroid.com/blog/show/2