HarmonyOS中的http请求及其封装（附案例）_鸿蒙 请求接口封装

概述

HarmonyOS提供了@ohos.net.http模块，它提供了Http数据请求能力。当在应用开发中需要使用http获取服务端数据时可以导入该模块实现http请求的发送。

@ohos.net.http模块提供http数据请求能力。应用可以通过http发起一个数据请求，支持常见的GET、POST、OPTIONS、HEAD、PUT、DELETE、TRACE、CONNECT方法。

如何使用？

要想使用http请求，系统必须要具备ohos.permission.INTERNET权限，在model.json5文件中的module模块下添加如下请求权限：

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

完整示例

该例引用自鸿蒙开发文档@ohos.net.http (数据请求)

// 引入包名
import http from '@ohos.net.http';
 
// 每一个httpRequest对应一个HTTP请求任务，不可复用
let httpRequest = http.createHttp();
// 用于订阅HTTP响应头，此接口会比request请求先返回。可以根据业务需要订阅此消息
// 从API 8开始，使用on('headersReceive', Callback)替代on('headerReceive', AsyncCallback)。 8+
httpRequest.on('headersReceive', (header) => {
    console.info('header: ' + JSON.stringify(header));
});
httpRequest.request(
    // 填写HTTP请求的URL地址，可以带参数也可以不带参数。URL地址需要开发者自定义。请求的参数可以在extraData中指定
    "EXAMPLE_URL",
    {
        method: http.RequestMethod.POST, // 可选，默认为http.RequestMethod.GET
        // 开发者根据自身业务需要添加header字段
        header: {
            'Content-Type': 'application/json'
        },
        // 当使用POST请求时此字段用于传递内容
        extraData: {
            "data": "data to send",
        },
        expectDataType: http.HttpDataType.STRING, // 可选，指定返回数据的类型
        usingCache: true, // 可选，默认为true
        priority: 1, // 可选，默认为1
        connectTimeout: 60000, // 可选，默认为60000ms
        readTimeout: 60000, // 可选，默认为60000ms
        usingProtocol: http.HttpProtocol.HTTP1_1, // 可选，协议类型默认值由系统自动指定
    }, (err, data) => {
        if (!err) {
            // data.result为HTTP响应内容，可根据业务需要进行解析
            console.info('Result:' + JSON.stringify(data.result));
            console.info('code:' + JSON.stringify(data.responseCode));
            // data.header为HTTP响应头，可根据业务需要进行解析
            console.info('header:' + JSON.stringify(data.header));
            console.info('cookies:' + JSON.stringify(data.cookies)); // 8+
            // 取消订阅HTTP响应头事件
            httpRequest.off('headersReceive');
            // 当该请求使用完毕时，调用destroy方法主动销毁
            httpRequest.destroy();
        } else {
            console.info('error:' + JSON.stringify(err));
            // 取消订阅HTTP响应头事件
            httpRequest.off('headersReceive');
            // 当该请求使用完毕时，调用destroy方法主动销毁。
            httpRequest.destroy();
        }
    }
);

http.createHttp

这是源码中对createHttp的方法的封装，它的返回值是一个HttpRequest对象。

/**
 * Creates an HTTP request task.
 * 创建一个HTTP请求任务，返回值为HttpRequest对象
 */
function createHttp(): HttpRequest;

HttpRequest接口文件中封装了request、destory、on、off、once方法，见以下源码注释：

详细解析参考HarmonyOS开发文档

export interface HttpRequest {
    /**
     * Initiates an HTTP request to a given URL.
     * 向给定的URL地址发送一个HTTP请求
     */
    request(url: string, callback: AsyncCallback<HttpResponse>): void;
    request(url: string, options: HttpRequestOptions, callback: AsyncCallback<HttpResponse>): void;
    request(url: string, options?: HttpRequestOptions): Promise<HttpResponse>;
    /**
     * Destroys an HTTP request.
     * 销毁一个HTTP请求
     */
    destroy(): void;
    /**
     * Registers an observer for HTTP Response Header events.
     * 订阅HTTP响应头事件
     * @deprecated since 8
     * @useinstead on_headersReceive
     */
    on(type: "headerReceive", callback: AsyncCallback<Object>): void;
    /**
     * Unregisters the observer for HTTP Response Header events.
     * 取消订阅HTTP响应头事件
     * @deprecated since 8
     * @useinstead off_headersReceive
     */
    off(type: "headerReceive", callback?: AsyncCallback<Object>): void;
    /**
     * Registers an observer for HTTP Response Header events.
     * 订阅HTTP响应头事件
     * @since 8
     */
    on(type: "headersReceive", callback: Callback<Object>): void;
    /**
     * Unregisters the observer for HTTP Response Header events.
     * 取消订阅HTTP响应头事件
     * @since 8
     */
    off(type: "headersReceive", callback?: Callback<Object>): void;
    /**
     * Registers a one-time observer for HTTP Response Header events.
     * 订阅一次HTTP响应头事件
     * @since 8
     */
    once(type: "headersReceive", callback: Callback<Object>): void;
}

 HttpRequestOptions

发送http请求携带的参数。

参数详情及取值范围

RequestMethod

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

 HttpDataType

/**
 * Indicates the type of the returned data.
 * 指定返回数据的类型
 * @since 9
 */
export enum HttpDataType {
    STRING,
    OBJECT = 1,
    ARRAY_BUFFER = 2
}

HttpProtocol

/**
 * Supported protocols.
 * 支持的协议
 * @since 9
 */
export enum HttpProtocol {
    HTTP1_1,
    HTTP2
}

HttpResponse 

request方法回调函数的返回值类型。

 封装http请求及案例

封装Response

按照后端返回的数据格式封装Response

export default class Response{
  /**
   * 响应码
   */
  code: number
  /**
   * 相应消息
   */
  msg: string
  /**
   * 相应数据
   */
  data: any
}

封装http请求

封装http请求方法，并且处理返回值。将http请求函数作为可导出模块，之后在其他模块中引用即可使用http请求，同Axios。

注意：如果使用本地模拟器，使用"http://locaohost:端口号"不能完成请求，需要将localhost更换为本机的ip地址

http请求封装引自鸿蒙 HarmonyOS4.0 Http数据请求封装详解-CSDN博客https://blog.csdn.net/qq_68512683/article/details/134724984

import http from '@ohos.net.http';
import Response from './Response';
 
//导出httpRequest请求函数
export function request(url: string, method: http.RequestMethod, requestData?: any): Promise<Response>{
  //如果使用本地模拟器，则ip为本机的IP地址
  const BASE_URL: string = "http://ip:服务端端口号"
  let httpRequest = http.createHttp()
  let responseResult = httpRequest.request(
    BASE_URL + url,
    {
      method: method,
      header: {
        'Content-Type': 'application/json'
      },
      //携带额外参数
      extraData: JSON.stringify(requestData),
      //可选，默认为60000ms
      connectTimeout: 60000,
      readTimeout: 60000,
    }
  )
  let response = new Response();
  //处理数据，并返回
  return responseResult.then((value: http.HttpResponse) => {
    if (value.responseCode === 200) {
      //获取返回数据,将返回的json数据解析成事先预定好的响应格式
      //这里建议和后端的保持一致
      let res: Response = JSON.parse(`${value.result}`);
      response.data = res.data;
      response.code = res.code;
      response.msg = res.msg;
     }else {
       response.msg = '请求错误';
       response.code = 400;
     }
     return response;
  }).catch(() => {
    response.msg = '请求错误';
    response.code = 400;
    return response;
  });
}

案例

后端接口请自行设计。

登录页面

import router from '@ohos.router'
import { User } from '../entity/User'
import { login } from './httpRequest/UserRelated'
/**
 * 登录页面
 */
@Entry
@Component
struct Login{
 
  @State user: User = new User('','')
 
  build(){
    Column({space: 10}){
      Row(){
        Text('+86')
        TextInput({placeholder: '请输入手机号'})
          .type(InputType.PhoneNumber)
          .height(45)
          .backgroundColor('#ffffff')
          .padding(10)
          .layoutWeight(1)
          .onChange(value =>{
            this.user.phone = value
          })
      }.padding({left: 20, right: 20})
      Row(){
        TextInput({placeholder: '请输入密码'})
          .type(InputType.Number)
          .height(45)
          .backgroundColor('#ffffff')
          .padding({left: 0, right: 0})
          .layoutWeight(1)
          .onChange(value =>{
            this.user.password = value
          })
      }.padding({left: 20, right: 20})
      Row(){
        Button('登 录')
          .type(ButtonType.Normal)
          .fontSize(20)
          .width('100%')
          .borderRadius(20)
          .backgroundColor('#2f90b9')
          .fontColor('#ffffff')
          .onClick(() => {
            login(this.user).then(res =>{
              if (res.code === 1) {
                router.pushUrl({
                  url: 'pages/Index'
                })
              } else {
                AlertDialog.show({
                  title: '警告',
                  message: res.msg
                })
              }
            })
          })
      }.padding({left: 20, right: 20})
 
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }
}

用户相关http请求

将http请求从页面中抽离出来封装在一个ets文件中，在页面中直接引用方法即可。不混杂在页面代码中，增强代码可读性。

import http from '@ohos.net.http'
import { User } from '../../entity/User'
import { request } from '../../utils/httpUtils/Request'
/**
 * 用户相关数据请求
 * @returns
 */
export function login(user: User){
  return request('/user/user/login', http.RequestMethod.POST, user)
}

用户对象

不在页面中定义，页面只进行数据项的定义和数据渲染即可，增强代码可读性。

export class User{
  phone: String
  password: String
 
  constructor(phone: String, password: String) {
    this.phone = phone
    this.password = password
  }
}