鸿蒙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知识已更新←点

相关推荐
‍。。。11 分钟前
使用Rust实现http/https正向代理
http·https·rust
sanzk3 小时前
华为鸿蒙应用开发
华为·harmonyos
SoraLuna7 小时前
「Mac畅玩鸿蒙与硬件28」UI互动应用篇5 - 滑动选择器实现
macos·ui·harmonyos
ClkLog-开源埋点用户分析8 小时前
ClkLog企业版(CDP)预售开启,更有鸿蒙SDK前来助力
华为·开源·开源软件·harmonyos
mg6688 小时前
鸿蒙系统的优势 开发 环境搭建 开发小示例
华为·harmonyos
lqj_本人9 小时前
鸿蒙next选择 Flutter 开发跨平台应用的原因
flutter·华为·harmonyos
lqj_本人9 小时前
使用 Flutter 绘制一个棋盘
harmonyos
点点滴滴的记录10 小时前
RPC核心实现原理
网络·网络协议·rpc
程思扬11 小时前
为什么Uptime+Kuma本地部署与远程使用是网站监控新选择?
linux·服务器·网络·经验分享·后端·网络协议·1024程序员节
前端宝哥12 小时前
10 个超赞的开发者工具,助你轻松提升效率
前端·程序员