鸿蒙NEXT开发实战:【网络管理-数据请求】

概述

本示例仿postman输入API接口地址,获取相应数据,介绍数据请求接口的用法。

样例展示

基础信息

Http

介绍

本示例通过[@ohos.net.http]等接口,实现了根据URL地址和相关配置项发起http请求的功能。

效果预览

首页 结果页

使用说明

1.启动应用可配置网络请求,设置网址、请求方式、请求参数;

2.点击确认按钮,跳转请求结果页面;

3.点击返回按钮,返回配置页面;

4.支持将本示例中的http模块编译成tgz包。

具体实现

  • 本示例将发送http请求的接口封装在Http模块,源码参考:[http.ts]

    /*

    • Copyright (c) 2022 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 http from '@ohos.net.http'

    class Http {

    url: string
    
    extraData: Object
    
    options: http.HttpRequestOptions
    
    
    
    constructor() {
    
      this.url = ''
    
      this.options = {
    
        method: http.RequestMethod.GET,
    
        extraData: this.extraData,
    
        header: { 'Content-Type': 'application/json' },
    
        readTimeout: 50000,
    
        connectTimeout: 50000
    
      }
    
    }
    
    
    
    setUrl(url: string) {
    
      this.url = url
    
    }
    
    
    
    setMethod(method: string) {
    
      switch (method) {
    
        case 'GET':
    
          this.options.method = http.RequestMethod.GET;
    
          break
    
        case 'HEAD':
    
          this.options.method = http.RequestMethod.HEAD;
    
          break
    
        case 'OPTIONS':
    
          this.options.method = http.RequestMethod.OPTIONS;
    
          break
    
        case 'TRACE':
    
          this.options.method = http.RequestMethod.TRACE;
    
          break
    
        case 'DELETE':
    
          this.options.method = http.RequestMethod.DELETE;
    
          break
    
        case 'POST':
    
          this.options.method = http.RequestMethod.POST;
    
          break
    
        case 'PUT':
    
          this.options.method = http.RequestMethod.PUT;
    
          break
    
        case 'CONNECT':
    
          this.options.method = http.RequestMethod.CONNECT;
    
          break
    
        default:
    
          this.options.method = http.RequestMethod.GET;
    
          break
    
      }
    
    }
    
    
    
    setExtraData(extraData: Object) {
    
      this.options.extraData = extraData
    
    }
    
    
    
    setOptions(option: Object) {
    
      this.options = option
    
    }
    
    
    
    setList(list: number[], flag: number) {
    
      list = []
    
      for (let i = 0; i < flag; i++) {
    
        list[i] = i
    
      }
    
      return list
    
    }
    
    
    
    setParameter(keys: string[], values: string[]) {
    
      let result = {}
    
      for (let i = 0; i <= keys.length - 1; i++) {
    
        let key = keys[i]
    
        let value = values[i]
    
        result[key] = value
    
      }
    
      return result
    
    }
    
    
    
    async request() {
    
      let httpRequest = http.createHttp()
    
      httpRequest.on('dataReceive', function (data) {
    
        AppStorage.SetOrCreate('dataLength', data.byteLength);
    
        console.info('[ Demo dataReceive ]  ReceivedDataLength: ' + data.byteLength);
    
      });
    
      httpRequest.on('dataReceiveProgress', function (data) {
    
        AppStorage.SetOrCreate('receiveSize', data.receiveSize);
    
        AppStorage.SetOrCreate('totalSize', data.totalSize);
    
        console.info('[ Demo dataProgress ]  ReceivedSize: ' + data.receiveSize + ' TotalSize: ' + data.totalSize);
    
      });
    
      httpRequest.requestInStream(this.url, this.options);
    
    }
    

    }

    export default new Http()

发起请求:在[MainPage.ets]

/*

 * Copyright (c) 2022-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 router from '@ohos.router'

import Http from '../model/http'



AppStorage.SetOrCreate('receiveSize', 0)

AppStorage.SetOrCreate('totalSize', 0)

AppStorage.SetOrCreate('dataLength', 0)



@Entry

@Component

export struct setting {

  private getUri: string = ''

  private getOption?: object

  @State url: string = ''

  @State option?: object = undefined

  @State flag: number = 1

  @State keys: string[] = []

  @State list: number[] = [0]

  @State values: string[] = []

  @State result: string = ''

  @State method: string = 'GET'

  @State showPage: boolean = false

  @State resultInfo: string = ''

  @State methods: Array<string> = ['GET', 'HEAD', 'OPTIONS', 'TRACE', 'DELETE', 'POST', 'PUT', 'CONNECT']



  @Builder MenuBuilder() {

    Column() {

      ForEach(this.methods, (item: string) => {

        Text(item)

          .margin(5)

          .fontSize(16)

          .textAlign(TextAlign.Center)

          .onClick(() => {

            this.method = item

          })



        Divider().height(1)

      }, (item: string) => item.toString())

    }

    .width('180vp')

  }



  aboutToAppear() {

    this.url = this.getUri

    this.option = this.getOption

    Http.setUrl(this.url)

    let context: Context = getContext(this)

    this.resultInfo = context.resourceManager.getStringSync($r('app.string.result').id)

    setInterval(() => {

      if (Http.url !== '') {

        this.result = "\r\nThe length of the data received by this callback: " +

        JSON.stringify(AppStorage.Get('dataLength') as number) +

        "\r\n" + "The length of the data received: " +

        JSON.stringify(AppStorage.Get('receiveSize') as number) + "\r\n" + "Total length of data: " +

        JSON.stringify(AppStorage.Get('totalSize') as number) + "\r\n" + "Percentage: " +

        JSON.stringify(Math.floor((AppStorage.Get('receiveSize') as number) /

        (AppStorage.Get('totalSize') as number) * 10000) / 100) + '%'

      } else {

        this.result = 'Failed'

      }

    }, 10)

  }



  build() {

    Scroll() {

      Column() {

        if (!this.showPage) {

          Text($r('app.string.configuration'))

            .margin('2%')

            .fontSize(28)



          Row() {

            Text(this.method)

              .width('20%')

              .fontSize(18)

              .textAlign(TextAlign.Center)

              .bindMenu(this.MenuBuilder)

              .margin({ left: 2, right: 4 })



            TextInput({ placeholder: $r('app.string.web') })

              .width('75%')

              .margin({ left: 4, right: 2 })

              .enableKeyboardOnFocus(false)

              .onChange((value: string) => {

                this.url = value

              })

              .id('GET')

          }

          .width('95%')

          .height('10%')



          ForEach(this.list, (item: number, index: number) => {

            Row() {

              Text('Key: ')

                .width('20%')

                .fontSize(18)

                .margin({ left: 2, right: 4 })

                .textAlign(TextAlign.Center)

              TextInput({ placeholder: $r('app.string.key') })

                .width('76%')

                .margin({ left: 4, right: 2 })

                .onChange((value: string) => {

                  this.keys[this.flag - 1] = value

                })

                .id(`key${index + 1}`)

            }

            .width('95%')

            .height('10%')



            Row() {

              Text('Value: ')

                .width('20%')

                .fontSize(18)

                .margin({ left: 2, right: 4 })

                .textAlign(TextAlign.Center)

              TextInput({ placeholder: $r('app.string.value') })

                .width('75%')

                .margin({ left: 4, right: 2 })

                .onChange((value: string) => {

                  this.values[this.flag -1] = value

                })

                .id(`value${index + 1}`)

            }

            .width('95%')

            .height('10%')

          }, (item: number) => item.toString())



          Column() {

            Button($r('app.string.add'))

              .margin(10)

              .fontSize(20)

              .width('60%')

              .onClick(() => {

                this.flag += 1

                this.list = Http.setList(this.list, this.flag)

              })

              .id('add')



            Button($r('app.string.reduce'))

              .margin(10)

              .fontSize(20)

              .width('60%')

              .onClick(() => {

                if (this.flag !== 1) {

                  this.flag -= 1

                }

                this.list = Http.setList(this.list, this.flag)

              })

              .id('reduce')



            Button($r('app.string.reset'))

              .id('reset')

              .margin(10)

              .fontSize(20)

              .width('60%')

              .onClick(() => {

                this.flag = 1

                this.list = [0]

              })



            Button($r('app.string.confirm'))

              .margin(10)

              .fontSize(20)

              .width('60%')

              .onClick(async () => {

                Http.setUrl(this.url)

                Http.setMethod(this.method)

                Http.setExtraData(Http.setParameter(this.keys, this.values))

                try {

                  Http.request()

                } catch (err) {

                  this.result = 'Failed'

                }

                this.showPage = !this.showPage

              })

              .id('submit')



            Button($r('app.string.back'))

              .id('back')

              .margin(10)

              .fontSize(20)

              .width('60%')

              .onClick(() => {

                router.replace({

                  url: 'pages/Index',

                  params: {

                    url: this.url === '' ? Http.url : this.url,

                    option: Http.options

                  }

                })

              })

          }

          .margin({ top: '2%', bottom: '2%' })

          .width('100%')

        } else {

          Text(`${this.resultInfo} ${this.result}`)

            .id(`${this.result === '' || this.result === 'Failed' ? 'failed' : 'succeed'}`)

            .fontSize(20)

            .margin('5%')



          Button($r('app.string.back'))

            .fontSize(25)

            .onClick(() => {

              AppStorage.SetOrCreate('receiveData', 0)

              AppStorage.SetOrCreate('totalSize', 0)

              AppStorage.SetOrCreate('dataLength', 0)

              this.url = ''

              this.flag = 1

              this.keys = []

              this.list = [0]

              this.values = []

              this.result = ''

              this.method = 'GET'

              this.showPage = !this.showPage

            })

            .id('back')

        }

      }

    }

    .width('100%')

    .height('100%')

  }

}

通过TextInput组件获取参数,点击"确认"按钮后通过Http.request()方法调用http.createHttp().request()接口向指定的地址发送请求。
鸿蒙OpenHarmony知识已更新←点

相关推荐
速盾cdn3 小时前
速盾:CDN是否支持屏蔽IP?
网络·网络协议·tcp/ip
Random_index6 小时前
#Uniapp篇:支持纯血鸿蒙&发布&适配&UIUI
uni-app·harmonyos
鸿蒙自习室9 小时前
鸿蒙多线程开发——线程间数据通信对象02
ui·harmonyos·鸿蒙
SuperHeroWu712 小时前
【HarmonyOS】鸿蒙应用接入微博分享
华为·harmonyos·鸿蒙·微博·微博分享·微博sdk集成·sdk集成
Lws14 小时前
CS144 lab0(个人理解)
网络协议
zhangjr057514 小时前
【HarmonyOS Next】鸿蒙实用装饰器一览(一)
前端·harmonyos·arkts
Industio_触觉智能15 小时前
如何在开源鸿蒙OpenHarmony开启SELinux模式?RK3566鸿蒙开发板演示
openharmony·selinux·开源鸿蒙·鸿蒙开发板·rk3566开发板
C++忠实粉丝18 小时前
计算机网络socket编程(2)_UDP网络编程实现网络字典
linux·网络·c++·网络协议·计算机网络·udp
程序员小范18 小时前
孙玲:从流水线工人到谷歌程序员
人工智能·程序员·谷歌·远程工作