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

概述

本示例仿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()接口向指定的地址发送请求。

写在最后

有很多小伙伴不知道学习哪些鸿蒙开发技术？不知道需要重点掌握哪些鸿蒙应用开发知识点？而且学习时频繁踩坑，最终浪费大量时间。所以有一份实用的鸿蒙（HarmonyOS NEXT）文档用来跟着学习是非常有必要的。

这份鸿蒙（HarmonyOS NEXT）文档包含了鸿蒙开发必掌握的核心知识要点，内容包含了（ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、OpenHarmony南向开发、鸿蒙项目实战等等）鸿蒙（HarmonyOS NEXT）技术知识点。

希望这一份鸿蒙学习文档能够给大家带来帮助，有需要的小伙伴自行领取，限时开源，先到先得~无套路领取！！

获取这份完整版高清学习路线，请点击→纯血版全套鸿蒙HarmonyOS学习文档

鸿蒙（HarmonyOS NEXT）5.0最新学习路线

有了路线图，怎么能没有学习文档呢，小编也准备了一份联合鸿蒙官方发布笔记整理收纳的一套系统性的鸿蒙（OpenHarmony ）学习手册（共计1236页）与鸿蒙（OpenHarmony ）开发入门教学视频，内容包含：ArkTS、ArkUI、Web开发、应用模型、资源分类…等知识点。

获取以上完整版高清学习路线，请点击→纯血版全套鸿蒙HarmonyOS学习文档

《鸿蒙 (OpenHarmony)开发入门教学视频》

《鸿蒙生态应用开发V3.0白皮书》

《鸿蒙 (OpenHarmony)开发基础到实战手册》

OpenHarmony北向、南向开发环境搭建

《鸿蒙开发基础》

●ArkTS语言
●安装DevEco Studio
●运用你的第一个ArkTS应用
●ArkUI声明式UI开发
.……

《鸿蒙开发进阶》

●Stage模型入门
●网络管理
●数据管理
●电话服务
●分布式应用开发
●通知与窗口管理
●多媒体技术
●安全技能
●任务管理
●WebGL
●国际化开发
●应用测试
●DFX面向未来设计
●鸿蒙系统移植和裁剪定制
……

《鸿蒙进阶实战》

●ArkTS实践
●UIAbility应用
●网络案例
……

获取以上完整鸿蒙HarmonyOS学习文档，请点击→纯血版全套鸿蒙HarmonyOS学习文档