鸿蒙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: stringextraData: Objectoptions: http.HttpRequestOptionsconstructor() {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;breakcase 'HEAD':this.options.method = http.RequestMethod.HEAD;breakcase 'OPTIONS':this.options.method = http.RequestMethod.OPTIONS;breakcase 'TRACE':this.options.method = http.RequestMethod.TRACE;breakcase 'DELETE':this.options.method = http.RequestMethod.DELETE;breakcase 'POST':this.options.method = http.RequestMethod.POST;breakcase 'PUT':this.options.method = http.RequestMethod.PUT;breakcase 'CONNECT':this.options.method = http.RequestMethod.CONNECT;breakdefault: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@Componentexport 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.getUrithis.option = this.getOptionHttp.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 += 1this.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 = 1this.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 = 1this.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知识已更新←点