HarmonyOS网络请求的简单用法,HttpUtil简单封装

请求网络获取数据

  • 点击按钮发送一个post请求,发送一条string
  • 由于此处的返回result.data本身就是一个string,因此不需要转换类型
ts 复制代码
      Button('请求网络')
        .margin({ top: 10 })
        .fontSize(24)
        .fontWeight(FontWeight.Bold)
        .onClick(() => {

          httpRequestPost('http://test.xxx', "你好")
            .then((result: ResponseResult) => {
              console.log("msg=" + result.msg)
              console.log("data=" + result.data)
              this.message = result.data.toString()
            })

        })
  • 如果需要类型转换,可以使用as转换
  • result.data as ResponseToken
ts 复制代码
          httpRequestGet('http://test.xxx')
            .then((result: ResponseResult) => {
              let data = result.data as ResponseToken
              console.log("msg=" + result.msg)
              console.log("token=" + data.access_token)
            })
ts 复制代码
export class ResponseToken {
  access_token: string = "";
  expires_in: string = "";
  expires_date: string = "";
}

封装一个HttpUtil

  • 对外开放一个httpRequestGet和httpRequestPost,用于get和post请求
ts 复制代码
import { http } from '@kit.NetworkKit';
import ResponseResult from './ResponseResult';

/**
 * Initiate an HTTP GET request to the specified URL.
 */
export function httpRequestGet(url: string) {
  return httpRequest(url, http.RequestMethod.GET);
}

/**
 * Initiate an HTTP POST request to the specified URL.
 */
export function httpRequestPost(url: string, newsData: string) {
  return httpRequest(url, http.RequestMethod.POST, newsData);
}

/**
 * Initiates an HTTP request to a given URL.
 *
 * @param url URL for initiating an HTTP request
 * @param method Request method.
 * @param extraData Additional data of the request.
 * @returns Returns {@link ResponseResult}.
 */
function httpRequest(url: string, method: http.RequestMethod, params?: string): Promise<ResponseResult> {
  let httpRequest = http.createHttp();
  let responseResult = httpRequest.request(url, {
    method: method,
    header: {
      'Content-Type': 'application/json'
    },
    extraData: params
  });
  let serverData = new ResponseResult();
  // Processes the data and returns.
  return responseResult.then((value: http.HttpResponse) => {
    if (value.responseCode === 200) {
      // Obtains the returned data.
      let result = `${value.result}`;
      let resultJson: ResponseResult = JSON.parse(result);
      if (resultJson.code === '000000') {
        serverData.data = resultJson.data;
      }
      serverData.code = resultJson.code;
      serverData.msg = resultJson.msg;
    } else {
      serverData.msg = `Network request failed, please try later!&${value.responseCode}`;
    }
    return serverData;
  }).catch(() => {
    serverData.msg = 'Network request failed, please try later!';
    return serverData;
  });
}
  • ResponseResult为服务端返回的基本结构
ts 复制代码
export default class ResponseResult {
  /**
   * Code returned by the network request: success, fail.
   */
  code: string;

  /**
   * Message returned by the network request.
   */
  msg: string | Resource;

  /**
   * Data returned by the network request.
   */
  data: string | Object | ArrayBuffer;

  constructor() {
    this.code = '';
    this.msg = '';
    this.data = '';
  }

}
相关推荐
迷曳9 小时前
27、鸿蒙Harmony Next开发:ArkTS并发(Promise和async/await和多线程并发TaskPool和Worker的使用)
前端·华为·多线程·harmonyos
迷曳14 小时前
24、鸿蒙Harmony Next开发:不依赖UI组件的全局自定义弹出框 (openCustomDialog)
dialog·前端·ui·harmonyos·鸿蒙
平谷一勺21 小时前
鸿蒙状态栏操作
华为·harmonyos·沉浸式状态栏
Georgewu2 天前
【HarmonyOS组件/模板集成创新活动-如何高效开发鸿蒙应用 (鸿社圈子)】
harmonyos
前端世界2 天前
跨平台 App 如何无痛迁移到鸿蒙系统?全流程实战+Demo 教程
华为·harmonyos
龙儿筝2 天前
鸿蒙和Android知识点
android·harmonyos
迷曳2 天前
17、鸿蒙Harmony Next开发:状态管理(组件拥有的状态和应用拥有的状态)
前端·harmonyos·鸿蒙
zhanshuo2 天前
不同品牌的设备也能“心有灵犀”?带你玩转鸿蒙分布式跨端协同
harmonyos
万少2 天前
云测试提前定位和解决问题 萤火故事屋 上架流程
前端·harmonyos·客户端
htt23213 天前
用uniapp开发鸿蒙应用(暂停更新-根据项目更新,现在项目未开始)
华为·uni-app·harmonyos