50、鸿蒙/HTTP数据请求

作者: 圆梦人生 | 来源:发表于2024-08-14 09:31 被阅读0次

场景介绍

应用通过HTTP发起一个数据请求,支持常见的GET、POST、OPTIONS、HEAD、PUT、DELETE、TRACE、CONNECT方法。

接口说明

HTTP数据请求功能主要由http模块提供。

使用该功能需要申请ohos.permission.INTERNET权限。

权限申请请参考声明权限

涉及的接口如下表,具体的接口说明请参考API文档

http.png

request接口开发步骤

  • 从@kit.NetworkKit中导入http命名空间。
  • 调用createHttp()方法,创建一个HttpRequest对象。
  • 调用该对象的on()方法,订阅http响应头事件,此接口会比request请求先返回。可以根据业务需要订阅此消息。
  • 调用该对象的request()方法,传入http请求的url地址和可选参数,发起网络请求。
  • 按照实际业务需要,解析返回结果。
  • 调用该对象的off()方法,取消订阅http响应头事件。
  • 当该请求使用完毕时,调用destroy()方法主动销毁。

案例

  • 配置权限
项目/entry/src/main/module.json5
 "requestPermissions": [
      {
        "name" : "ohos.permission.INTERNET"
      }
],
import { httpRequestPost } from './utils/HttpUtil'
// 定义数据类型接口
interface UserVO {
  createBy: string;
  createTime: string;
  updateBy: string;
  remark: string;
  updateTime: string;
  datetime: string;
  userId: number;
  userName: string;
  // 部门对象
  dept: DeptVO
}
//
interface DeptVO {
  deptName: string;
  deptId: number;
}

@Component
export struct HttpLayout {
  // 存放数据集
  @State list: Array<UserVO> = [];
  build() {
    Column(){
      Button('点击发送请求').onClick(async (event: ClickEvent) => {
        let data = new Map<string, object>();
        data.set("userName", new String("admin"));
        let result = await httpRequestPost('http://ip:端口/user/getList', data)
        //
        this.list = result.data as Array<UserVO>;
        console.log('result ==== ', JSON.stringify(this.list));
      });
      //
      Button('点击修改值').onClick((event: ClickEvent) => {
        // 获取当前下标元素
        if(this.list?.length < 1){return;}
        let currentData = this.list[0]
        // 修改元素的值
        currentData.userName = `${currentData.userName}+update`;
        // 同等位置修改元素,刷新视图(@State监听不到深节点元素值改变)
        this.list.splice(0, 1, currentData);
      });
      // 布局
      Flex({
        direction: FlexDirection.Column
      }){
        ForEach(this.list, (item: UserVO)=>{
          Row(){
            Text(`用户名称:${item.userName};`).lineHeight(22)
            Text(`用户编号:${item.userId};`).lineHeight(22)
            Text(`部门名称:${item.dept.deptName}`).lineHeight(22)
          }
        })
      }
    }
  }
}

HttpUtil.ets

//
import { http } from '@kit.NetworkKit';
//
import { BusinessError } from '@kit.BasicServicesKit';
//
import { ResponseResult } from './ResponseResult';
//
import { JsonUtil } from './JsonUtil'
//
class Constants {
  static readonly HTTP_CODE_200: number = 200;
}
const enum ContentType {
  JSON = 'application/json',
  FORM = 'multipart/form-data'
}
//
export function httpRequestGet(url: string) {
  return httpRequest(url, http.RequestMethod.GET);
}
//
export function httpRequestPost(url: string, params: Map<string, object>) {
  return httpRequest(url, http.RequestMethod.POST, params);
}
//
export function httpRequestGetHtml(url: string) {
  let httpRequest = http.createHttp();
  let responseResult = httpRequest.request(url, {
    method: http.RequestMethod.GET,
    header: {
      'Content-Type': ContentType.JSON
    },
  });

  let serverData = new ResponseResult();
  //
  return responseResult.then((value:http.HttpResponse)=>{
    if(value.responseCode === Constants.HTTP_CODE_200){
      let result = `${value.result}`;
      serverData.data = result;
      serverData.code = 'success'
      serverData.msg = value.header['set-cookie'];
    }else {
      serverData.msg = `${$r('app.string.http_error_message')}&${value.responseCode}`;
    }
    //
    httpRequest.destroy();
    //
    return serverData;
  }).catch((error: Error) => {
    serverData.msg = $r('app.string.http_error_message');
    //
    httpRequest.destroy();
    //
    return serverData;
  });
}
//
function httpRequest(url: string, method: http.RequestMethod, params?: Map<string, object>): Promise<ResponseResult> {
  let httpRequest = http.createHttp();
  let responseResult = httpRequest.request(url, {
    method: method,
    //
    header: {
      'Content-Type': ContentType.JSON,
    },
    //
    extraData: JsonUtil.mapToJsonObj(params)
  });

  let serverData = new ResponseResult();
  //
  return responseResult.then((value:http.HttpResponse)=>{

    if(value.responseCode === Constants.HTTP_CODE_200){

      let result = `${value.result}`;
      let resultJson: ResponseResult = JSON.parse(result);
      serverData.data = resultJson.data;
      serverData.code = resultJson.code;
      serverData.msg = resultJson.msg;
      serverData.has_more = resultJson.has_more;
      serverData.return_count = resultJson.return_count;
      serverData.page_id = resultJson.page_id;
      serverData.code = 'success'
    }else {
      serverData.msg = `${$r('app.string.http_error_message')}&${value.responseCode}`;
    }
    //
    httpRequest.destroy();
    //
    return serverData;
  }).catch((error: Error) => {
    serverData.msg = $r('app.string.http_error_message');
    //
    httpRequest.destroy();
    //
    return serverData;
  });
}

ResponseResult.ets

export class ResponseResult {
  code: string;
  msg: string | Resource;
  data: string | Object | ArrayBuffer;
  has_more: boolean;
  return_count: number;
  page_id: string;

  constructor() {
    this.code = '';
    this.msg = '';
    this.data = '';
    this.has_more = false;
    this.return_count = 0;
    this.page_id = '';
  }
}

JsonUtil.ets

export class JsonUtil {
  /**
   * map转换json字符串
   * @param mapSource
   * @returns
   */
  static mapToJsonStr(mapSource?: Map<string, object>): string{
    let jsonObject: Record<string, Object> = {};
    if(!mapSource){
      return JSON.stringify({});
    }
    //
    mapSource.forEach((value, key) => {
      if (key !== undefined && value !== undefined) {
        jsonObject[key] = value;
      }
    });
    //
    let jsonInfo: string = JSON.stringify(jsonObject);
    //
    return jsonInfo;
  }
  /**
   * map转换json对象
   * @param mapSource
   * @returns
   */
  static mapToJsonObj(mapSource?: Map<string, object>): object{
    //
    let jsonObject = JsonUtil.mapToJsonStr(mapSource);
    //
    return JSON.parse(jsonObject);
  }
}

效果

Http.png

相关文章

  • 动脑学院架构篇-HTTP请求、响应报文格式

    【HTTP】HTTP请求、响应报文格式 HTTP请求报文格式: HTTP请求报文主要由请求行、请求头部、请求数据3...

  • HTTP简介

    HTTP请求 HTTP请求分为 GET 和 POST 两种 GET 请求数据 PIST 发送并请求数据 我们可以通...

  • Android 笔记 —— Http 网络探索

    Http 请求及相应 请求包结构 示例: 响应包结构 示例: Http 请求方式 GET请求指定url的数据,请求...

  • 网络(三):应用层HTTP

    目录一、字符编码和各个码表二、HTTP 1、HTTP的数据格式  1.1 HTTP请求的数据格式 = 请求行 + ...

  • ajax请求接口参数

    如何使用ajax请求数据: // 请求接口数据$.ajax({ url: 'http://localhost/...

  • HTTP

    HTTP请求报文:请求行(包括http协议版本,请求方法等),消息报头(连接情况,接收的数据类型,接收数据范围等)...

  • iOS之网络简解篇.

    网络 HTTP请求 GET请求 POST请求 数据解析 JSONNSJSONSerialization XMLSA...

  • http消息体

    HTTP请求数据: HTTP请求信息由3部分组成: ① 请求方法 URI 协议/版本② 请求头(Request H...

  • iOS Daily Tip - HTTP请求/响应报文结构

    HTTP请求报文 一个HTTP请求报文由四个部分组成:请求行、请求头部、空行、请求数据(请求正文)。 请求行请求行...

  • Http请求数据

    第一组:HttpURLConnection类从服务器获取数据可以总结为这几步: GET请求方式的关键代码 OkHt...

网友评论

    本文标题:50、鸿蒙/HTTP数据请求

    本文链接:https://www.haomeiwen.com/subject/yadjkjtx.html