概述
本示例仿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知识已更新←点
