场景介绍
应用通过HTTP发起一个数据请求,支持常见的GET、POST、OPTIONS、HEAD、PUT、DELETE、TRACE、CONNECT方法。
接口说明
HTTP数据请求功能主要由http模块提供。
使用该功能需要申请ohos.permission.INTERNET权限。
权限申请请参考声明权限。
涉及的接口如下表,具体的接口说明请参考API文档。
request接口开发步骤
- 从@kit.NetworkKit中导入http命名空间。
- 调用createHttp()方法,创建一个HttpRequest对象。
- 调用该对象的on()方法,订阅http响应头事件,此接口会比request请求先返回。可以根据业务需要订阅此消息。
- 调用该对象的request()方法,传入http请求的url地址和可选参数,发起网络请求。
- 按照实际业务需要,解析返回结果。
- 调用该对象的off()方法,取消订阅http响应头事件。
- 当该请求使用完毕时,调用destroy()方法主动销毁。
案例
- 配置权限
项目/entry/src/main/module.json5
"requestPermissions": [
{
"name" : "ohos.permission.INTERNET"
}
],
import { httpRequestPost } from './utils/HttpUtil'
// 定义数据类型接口
interface UserVO {
createBy: string;
createTime: string;
updateBy: string;
remark: string;
updateTime: string;
datetime: string;
userId: number;
userName: string;
// 部门对象
dept: DeptVO
}
//
interface DeptVO {
deptName: string;
deptId: number;
}
@Component
export struct HttpLayout {
// 存放数据集
@State list: Array<UserVO> = [];
build() {
Column(){
Button('点击发送请求').onClick(async (event: ClickEvent) => {
let data = new Map<string, object>();
data.set("userName", new String("admin"));
let result = await httpRequestPost('http://ip:端口/user/getList', data)
//
this.list = result.data as Array<UserVO>;
console.log('result ==== ', JSON.stringify(this.list));
});
//
Button('点击修改值').onClick((event: ClickEvent) => {
// 获取当前下标元素
if(this.list?.length < 1){return;}
let currentData = this.list[0]
// 修改元素的值
currentData.userName = `${currentData.userName}+update`;
// 同等位置修改元素,刷新视图(@State监听不到深节点元素值改变)
this.list.splice(0, 1, currentData);
});
// 布局
Flex({
direction: FlexDirection.Column
}){
ForEach(this.list, (item: UserVO)=>{
Row(){
Text(`用户名称:${item.userName};`).lineHeight(22)
Text(`用户编号:${item.userId};`).lineHeight(22)
Text(`部门名称:${item.dept.deptName}`).lineHeight(22)
}
})
}
}
}
}
HttpUtil.ets
//
import { http } from '@kit.NetworkKit';
//
import { BusinessError } from '@kit.BasicServicesKit';
//
import { ResponseResult } from './ResponseResult';
//
import { JsonUtil } from './JsonUtil'
//
class Constants {
static readonly HTTP_CODE_200: number = 200;
}
const enum ContentType {
JSON = 'application/json',
FORM = 'multipart/form-data'
}
//
export function httpRequestGet(url: string) {
return httpRequest(url, http.RequestMethod.GET);
}
//
export function httpRequestPost(url: string, params: Map<string, object>) {
return httpRequest(url, http.RequestMethod.POST, params);
}
//
export function httpRequestGetHtml(url: string) {
let httpRequest = http.createHttp();
let responseResult = httpRequest.request(url, {
method: http.RequestMethod.GET,
header: {
'Content-Type': ContentType.JSON
},
});
let serverData = new ResponseResult();
//
return responseResult.then((value:http.HttpResponse)=>{
if(value.responseCode === Constants.HTTP_CODE_200){
let result = `${value.result}`;
serverData.data = result;
serverData.code = 'success'
serverData.msg = value.header['set-cookie'];
}else {
serverData.msg = `${$r('app.string.http_error_message')}&${value.responseCode}`;
}
//
httpRequest.destroy();
//
return serverData;
}).catch((error: Error) => {
serverData.msg = $r('app.string.http_error_message');
//
httpRequest.destroy();
//
return serverData;
});
}
//
function httpRequest(url: string, method: http.RequestMethod, params?: Map<string, object>): Promise<ResponseResult> {
let httpRequest = http.createHttp();
let responseResult = httpRequest.request(url, {
method: method,
//
header: {
'Content-Type': ContentType.JSON,
},
//
extraData: JsonUtil.mapToJsonObj(params)
});
let serverData = new ResponseResult();
//
return responseResult.then((value:http.HttpResponse)=>{
if(value.responseCode === Constants.HTTP_CODE_200){
let result = `${value.result}`;
let resultJson: ResponseResult = JSON.parse(result);
serverData.data = resultJson.data;
serverData.code = resultJson.code;
serverData.msg = resultJson.msg;
serverData.has_more = resultJson.has_more;
serverData.return_count = resultJson.return_count;
serverData.page_id = resultJson.page_id;
serverData.code = 'success'
}else {
serverData.msg = `${$r('app.string.http_error_message')}&${value.responseCode}`;
}
//
httpRequest.destroy();
//
return serverData;
}).catch((error: Error) => {
serverData.msg = $r('app.string.http_error_message');
//
httpRequest.destroy();
//
return serverData;
});
}
ResponseResult.ets
export class ResponseResult {
code: string;
msg: string | Resource;
data: string | Object | ArrayBuffer;
has_more: boolean;
return_count: number;
page_id: string;
constructor() {
this.code = '';
this.msg = '';
this.data = '';
this.has_more = false;
this.return_count = 0;
this.page_id = '';
}
}
JsonUtil.ets
export class JsonUtil {
/**
* map转换json字符串
* @param mapSource
* @returns
*/
static mapToJsonStr(mapSource?: Map<string, object>): string{
let jsonObject: Record<string, Object> = {};
if(!mapSource){
return JSON.stringify({});
}
//
mapSource.forEach((value, key) => {
if (key !== undefined && value !== undefined) {
jsonObject[key] = value;
}
});
//
let jsonInfo: string = JSON.stringify(jsonObject);
//
return jsonInfo;
}
/**
* map转换json对象
* @param mapSource
* @returns
*/
static mapToJsonObj(mapSource?: Map<string, object>): object{
//
let jsonObject = JsonUtil.mapToJsonStr(mapSource);
//
return JSON.parse(jsonObject);
}
}