鸿蒙 ark ui 网络请求 我不允许你不会

前言：

各位同学有段时刻没有碰头 因为一直很忙所以就没有去更新博客。最近有在学习这个鸿蒙的ark ui开发 因为鸿蒙不是发布了一个鸿蒙next的测验版别 明年会发动纯血鸿蒙使用 所以我就想提前给我们写一些博客文章

效果图

11-24 16:26:22.005 25156-25156/com.example.httpsrequest E A0ff00/HTTPS: 恳求状况 --> 200, %{public}s
11-24 16:26:22.006 25156-25156/com.example.httpsrequest E A0ff00/HTTPS: 恳求成功, %{public}s
11-24 16:26:22.006 25156-25156/com.example.httpsrequest E A0ff00/HTTPS: 恳求回来数据, "{"ret":1,"data":[{"id":"8289","title":"\u6cb9\u7116\u5927\u867e","pic":"http:\/\/www.qubaobei.com\/ios\/cf\/uploadfile\/132\/9\/8289.jpg","collect_num":"1670","food_str":"\u5927\u867e \u8471 \u751f\u59dc \u690d\u7269\u6cb9 \u6599\u9152","num":1670},{"id":"2127","title":"\u56db\u5ddd\u56de\u9505\u8089","pic":"http:\/\/www.qubaobei.com\/ios\/cf\/uploadfile\/132\/3\/2127.jpg","collect_num":"1592","food_str":"\u732a\u8089 \u9752\u849c \u9752\u6912 \u7ea2\u6912 \u59dc\u7247","num":1592},{"id":"30630","title":"\u8d85\u7b80\u5355\u8292\u679c\u5e03\u4e01","pic":"http:\/\/www.qubaobei.com\/ios\/cf\/uploadfile\/132\/31\/30630.jpg","collect_num":"1552","food_str":"QQ\u7cd6 \u725b\u5976 \u8292\u679c","num":1552},{"id":"9073","title":"\u5bb6\u5e38\u7ea2\u70e7\u9c7c","pic":"http:\/\/www.qubaobei.com\/ios\/cf\/uploadfile\/132\/10\/9073.jpg","co

具体完成：

增加网络拜访权限 ：

在module.json5 里边增加网络拜访权限

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

创立HTTPS恳求

HTTPS协议是坐落使用层的一种安全传输协议，与HTTP最大的区别是服务端与客户端之间进行数据传输都会经过TLS/SSL加密。该示例恳求测验接口地址，并将恳求得到的再日志里边打印出来。效果如图所示：

恳求东西类

首要在OkHttpUtil.ets中调用createHttp办法创立一个恳求任务，再经过request办法建议网络恳求。该办法支持三个参数：url、options以及callback回调，其间options能够设置恳求办法、恳求头以及超时时刻等。

import http from '@ohos.net.http';
import Constants, { ContentType } from '../constant/Constants';
import Logger from './Logger';
import { NewsData } from '../viewmodel/NewsData';
export function httpRequestGet(url: string) {
  return httpRequest(url, http.RequestMethod.GET);
}
export function httpRequestPost(url: string, params?: NewsData) {
  return httpRequest(url, http.RequestMethod.POST, params);
}
function httpRequest(url: string, method: http.RequestMethod,params?: NewsData){
  let httpRequest = http.createHttp();
  let responseResult = httpRequest.request(url, {
    method: method,
    readTimeout: Constants.HTTP_READ_TIMEOUT,//读取超时时刻 可选，默以为60000ms
    header: {
      'Content-Type': ContentType.JSON
    },
    connectTimeout: Constants.HTTP_READ_TIMEOUT,//连接超时时刻  可选，默以为60000ms
    extraData: params // 恳求参数
  });
  return responseResult.then((value: http.HttpResponse)=>{
      Logger.error("恳求状况 --> "+value.responseCode)
     if(value.responseCode===200){
       Logger.error("恳求成功");
       let getresult = value.result;
       Logger.error('恳求回来数据', JSON.stringify(getresult));
       return getresult;
     }
  }).catch((err)=>{
    return "";
  });
}

日志东西类

/*
 * Copyright (c) 2023 Huawei Device Co., Ltd.
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
import hilog from '@ohos.hilog';
class Logger {
  private domain: number;
  private prefix: string;
  private format: string = '%{public}s, %{public}s';
  /**
   * constructor.
   *
   * @param Prefix Identifies the log tag.
   * @param domain Domain Indicates the service domain, which is a hexadecimal integer ranging from 0x0 to 0xFFFFF.
   */
  constructor(prefix: string = 'MyApp', domain: number = 0xFF00) {
    this.prefix = prefix;
    this.domain = domain;
  }
  debug(...args: string[]): void {
    hilog.debug(this.domain, this.prefix, this.format, args);
  }
  info(...args: string[]): void {
    hilog.info(this.domain, this.prefix, this.format, args);
  }
  warn(...args: string[]): void {
    hilog.warn(this.domain, this.prefix, this.format, args);
  }
  error(...args: string[]): void {
    hilog.error(this.domain, this.prefix, this.format, args);
  }
}
export default new Logger('HTTPS', 0xFF00)

然后在view中展现去点击触发恳求

import webView from '@ohos.web.webview';
import http from '@ohos.net.http';
import httpGet from '../common/utils/HttpUtil';
import StyleConstant from '../common/constant/StyleConstant';
import CommonConstant from '../common/constant/CommonConstants';
import { httpRequestGet }  from '../common/utils/OKhttpUtil';
@Entry
@Component
struct WebPage {
  controller: webView.WebviewController = new webView.WebviewController();
  @State buttonName: Resource = $r('app.string.request_button_name');
  @State webVisibility: Visibility = Visibility.Hidden;
  @State webSrc: string = CommonConstant.DISH;
  build() {
    Column() {
      Row() {
        Image($r('app.media.ic_network_global'))
          .height($r('app.float.image_height'))
          .width($r('app.float.image_width'))
        TextInput({ placeholder: $r('app.string.input_address'), text: this.webSrc })
          .height($r('app.float.text_input_height'))
          .layoutWeight(1)
          .backgroundColor(Color.White)
          .onChange((value: string) => {
            this.webSrc = value;
          })
      }
      .margin({
        top: $r('app.float.default_margin'),
        left: $r('app.float.default_margin'),
        right: $r('app.float.default_margin')
      })
      .height($r('app.float.default_row_height'))
      .backgroundColor(Color.White)
      .borderRadius($r('app.float.border_radius'))
      .padding({
        left: $r('app.float.default_padding'),
        right: $r('app.float.default_padding')
      })
      Row() {
        Web({ src: this.webSrc, controller: this.controller })
          .zoomAccess(true)
          .height(StyleConstant.FULL_HEIGHT)
          .width(StyleConstant.FULL_WIDTH)
      }
      .visibility(this.webVisibility)
      .height(StyleConstant.WEB_HEIGHT)
      .width(StyleConstant.FULL_WIDTH)
      .align(Alignment.Top)
      Row() {
        Button(this.buttonName)
          .fontSize($r('app.float.button_font_size'))
          .width(StyleConstant.BUTTON_WIDTH)
          .height($r('app.float.button_height'))
          .fontWeight(FontWeight.Bold)
          .onClick(() => {
            this.onRequest();
          })
      }
      .height($r('app.float.default_row_height'))
    }
    .width(StyleConstant.FULL_WIDTH)
    .height(StyleConstant.FULL_HEIGHT)
    .backgroundImage($r('app.media.ic_background_image', ImageRepeat.NoRepeat))
    .backgroundImageSize(ImageSize.Cover)
  }
  async onRequest() {
    httpRequestGet(CommonConstant.DISH).then((data)=>{
      console.log("data --- > "+data);
    });
  }
}

剖析模块源码可知，经过request办法建立恳求后，模块底层首要会调用三方库libcurl中的curl_easy_init初始化一个简单会话。初始化完成后，接着调用curl_easy_setopt办法设置传输选项。其间CURLOPT_URL用于设置恳求的URL地址，对应request中的url参数；CURLOPT_WRITEFUNCTION能够设置一个回调，保存接收的数据；CURLOPT_HEADERDATA支持设置回调，在回调中保存响应头数据。

传输选项设置成功后，调用curl_multi_perform履行传输恳求，并经过curl_multi_info_read查询处理句柄是否有音讯回来，最终进入HandleCurlData办法处理回来数据。

最终总结

ark ui里边网络恳求也比较简单 基本用法我上面的代码有展现了写法基本和前端的js很像 有兴趣的有同学能够深化去研讨官网里边提到TLS和SSL 握手过程 我这里就不展开剖析了 最终呢 希望我都文章能帮助到各位同学工作和学习 如果你觉得文章还不错费事给我三连 关注点赞和转发 谢谢