概述
本示例仿postman输入API接口地址，获取相应数据，介绍数据请求接口的用法。
样例展示
https://img-blog.csdnimg.cn/img_convert/d9730d8e275625f690920b5bf8aa16fb.png" alt="" />
基础信息
https://img-blog.csdnimg.cn/img_convert/fd429e0eb4c999a980bb2137f0d51f4e.png" alt="image.png" />
Http
介绍
本示例通过[@ohos.net.http]等接口，实现了根据URL地址和相关配置项发起http请求的功能。
效果预览
| 首页 | 结果页 |
|---|---|
使用说明
1.启动应用可配置网络请求，设置网址、请求方式、请求参数；
2.点击确认按钮，跳转请求结果页面；
3.点击返回按钮，返回配置页面；
4.支持将本示例中的http模块编译成tgz包。
具体实现
/*
* 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知识已更新←点
https://img-blog.csdnimg.cn/img_convert/9a9cb03dae41b2a73e3b718be3fdc7a3.jpeg" alt="765e5079845b5bb77f2aa30a2da70670.jpeg" />
