ToB企服应用市场:ToB评测及商务社交产业平台

标题: HarmonyOS中的http请求及其封装（附案例） [打印本页]

作者: 石小疯 时间: 2024-6-21 13:16
标题: HarmonyOS中的http请求及其封装（附案例）
概述

HarmonyOS提供了@ohos.net.http模块，它提供了Http数据请求能力。当在应用开辟中必要使用http获取服务端数据时可以导入该模块实现http请求的发送。
@ohos.net.http模块提供http数据请求能力。应用可以通过http发起一个数据请求，支持常见的GET、POST、OPTIONS、HEAD、PUT、DELETE、TRACE、CONNECT方法。
怎样使用？

要想使用http请求，体系必须要具备ohos.permission.INTERNET权限，在model.json5文件中的module模块下添加如下请求权限：

"requestPermissions": [
{
"name": "ohos.permission.INTERNET"
}
],

复制代码

完整示例

该例引用自鸿蒙开辟文档@ohos.net.http (数据请求)

// 引入包名
import http from '@ohos.net.http';
// 每一个httpRequest对应一个HTTP请求任务，不可复用
let httpRequest = http.createHttp();
// 用于订阅HTTP响应头，此接口会比request请求先返回。可以根据业务需要订阅此消息
// 从API 8开始，使用on('headersReceive', Callback)替代on('headerReceive', AsyncCallback)。 8+
httpRequest.on('headersReceive', (header) => {
console.info('header: ' + JSON.stringify(header));
});
httpRequest.request(
// 填写HTTP请求的URL地址，可以带参数也可以不带参数。URL地址需要开发者自定义。请求的参数可以在extraData中指定
"EXAMPLE_URL",
{
method: http.RequestMethod.POST, // 可选，默认为http.RequestMethod.GET
// 开发者根据自身业务需要添加header字段
header: {
'Content-Type': 'application/json'
},
// 当使用POST请求时此字段用于传递内容
extraData: {
"data": "data to send",
},
expectDataType: http.HttpDataType.STRING, // 可选，指定返回数据的类型
usingCache: true, // 可选，默认为true
priority: 1, // 可选，默认为1
connectTimeout: 60000, // 可选，默认为60000ms
readTimeout: 60000, // 可选，默认为60000ms
usingProtocol: http.HttpProtocol.HTTP1_1, // 可选，协议类型默认值由系统自动指定
}, (err, data) => {
if (!err) {
// data.result为HTTP响应内容，可根据业务需要进行解析
console.info('Result:' + JSON.stringify(data.result));
console.info('code:' + JSON.stringify(data.responseCode));
// data.header为HTTP响应头，可根据业务需要进行解析
console.info('header:' + JSON.stringify(data.header));
console.info('cookies:' + JSON.stringify(data.cookies)); // 8+
// 取消订阅HTTP响应头事件
httpRequest.off('headersReceive');
// 当该请求使用完毕时，调用destroy方法主动销毁
httpRequest.destroy();
} else {
console.info('error:' + JSON.stringify(err));
// 取消订阅HTTP响应头事件
httpRequest.off('headersReceive');
// 当该请求使用完毕时，调用destroy方法主动销毁。
httpRequest.destroy();
}
}
);

复制代码

http.createHttp

这是源码中对createHttp的方法的封装，它的返回值是一个HttpRequest对象。

/**
* Creates an HTTP request task.
* 创建一个HTTP请求任务，返回值为HttpRequest对象
*/
function createHttp(): HttpRequest;

复制代码

HttpRequest接口文件中封装了request、destory、on、off、once方法，见以下源码注释：
详细解析参考HarmonyOS开辟文档

export interface HttpRequest {
/**
* Initiates an HTTP request to a given URL.
* 向给定的URL地址发送一个HTTP请求
*/
request(url: string, callback: AsyncCallback<HttpResponse>): void;
request(url: string, options: HttpRequestOptions, callback: AsyncCallback<HttpResponse>): void;
request(url: string, options?: HttpRequestOptions): Promise<HttpResponse>;
/**
* Destroys an HTTP request.
* 销毁一个HTTP请求
*/
destroy(): void;
/**
* Registers an observer for HTTP Response Header events.
* 订阅HTTP响应头事件
* @deprecated since 8
* @useinstead on_headersReceive
*/
on(type: "headerReceive", callback: AsyncCallback<Object>): void;
/**
* Unregisters the observer for HTTP Response Header events.
* 取消订阅HTTP响应头事件
* @deprecated since 8
* @useinstead off_headersReceive
*/
off(type: "headerReceive", callback?: AsyncCallback<Object>): void;
/**
* Registers an observer for HTTP Response Header events.
* 订阅HTTP响应头事件
* @since 8
*/
on(type: "headersReceive", callback: Callback<Object>): void;
/**
* Unregisters the observer for HTTP Response Header events.
* 取消订阅HTTP响应头事件
* @since 8
*/
off(type: "headersReceive", callback?: Callback<Object>): void;
/**
* Registers a one-time observer for HTTP Response Header events.
* 订阅一次HTTP响应头事件
* @since 8
*/
once(type: "headersReceive", callback: Callback<Object>): void;
}

复制代码

HttpRequestOptions

发送http请求携带的参数。
参数详情及取值范围

名称	类型	必选项	阐明
method	RequestMethod（罗列）	否	请求方式
extraData	string \| Object \| ArrayBuffer（API8以后）	否	发送请求的额外数据，用于http请求的POST、PUT方法
expectDataType	HttpDataType（罗列）	否	指定返回数据的类型，假如指定了，将优先返回指定的类型
useingCache（API9之后）	boolean	否	是否使用缓存，默认为true
priority（API9后）	number	否	优先级，取值为[1,1000]，默认为1
header	Object	否	http请求头字段，默认为{‘Content-Type’:'application/json'}
redTimeout	number	否	读取超时时间，单位ms，设置为0时表示不会出现超时情况
connectTimeout	number	否	连接超时时间，单位ms
usingProtocol（API9之后）	HttpProtocol（罗列）	否	使用的http协议，默认值由体系指定

RequestMethod

export enum RequestMethod {
OPTIONS = "OPTIONS",
GET = "GET",
HEAD = "HEAD",
POST = "POST",
PUT = "PUT",
DELETE = "DELETE",
TRACE = "TRACE",
CONNECT = "CONNECT"
}

复制代码

HttpDataType

/**
* Indicates the type of the returned data.
* 指定返回数据的类型
* @since 9
*/
export enum HttpDataType {
STRING,
OBJECT = 1,
ARRAY_BUFFER = 2
}

复制代码

HttpProtocol

/**
* Supported protocols.
* 支持的协议
* @since 9
*/
export enum HttpProtocol {
HTTP1_1,
HTTP2
}

复制代码

HttpResponse

request方法回调函数的返回值类型。

名称	类型	阐明
result	string \| Object \| ArrayBuffer（API6之后）	HTTP请求根据响应头中Content-type类型返回对应的响应格式内容
resultType（API 9之后）	HttpDataType（罗列）	返回值类型
responseCode	ResponseCode \| number	回调函数执行乐成时，此字段为ResponseCode。若执行失败，错误码会从AsyncCallback中的err字段返回
header	Object	http请求返回的响应头

封装http请求及案例

封装Response

按照后端返回的数据格式封装Response

export default class Response{
/**
* 响应码
*/
code: number
/**
* 相应消息
*/
msg: string
/**
* 相应数据
*/
data: any
}

复制代码

封装http请求

封装http请求方法，并且处理返回值。将http请求函数作为可导出模块，之后在其他模块中引用即可使用http请求，同Axios。
注意：假如使用当地模拟器，使用"http://locaohost:端标语"不能完成请求，必要将localhost更换为本机的ip地址
http请求封装引自鸿蒙 HarmonyOS4.0 Http数据请求封装详解-CSDN博客

https://blog.csdn.net/qq_68512683/article/details/134724984

import http from '@ohos.net.http';
import Response from './Response';
//导出httpRequest请求函数
export function request(url: string, method: http.RequestMethod, requestData?: any): Promise<Response>{
//如果使用本地模拟器，则ip为本机的IP地址
const BASE_URL: string = "http://ip:服务端端口号"
let httpRequest = http.createHttp()
let responseResult = httpRequest.request(
BASE_URL + url,
{
method: method,
header: {
'Content-Type': 'application/json'
},
//携带额外参数
extraData: JSON.stringify(requestData),
//可选，默认为60000ms
connectTimeout: 60000,
readTimeout: 60000,
}
)
let response = new Response();
//处理数据，并返回
return responseResult.then((value: http.HttpResponse) => {
if (value.responseCode === 200) {
//获取返回数据,将返回的json数据解析成事先预定好的响应格式
//这里建议和后端的保持一致
let res: Response = JSON.parse(`${value.result}`);
response.data = res.data;
response.code = res.code;
response.msg = res.msg;
}else {
response.msg = '请求错误';
response.code = 400;
}
return response;
}).catch(() => {
response.msg = '请求错误';
response.code = 400;
return response;
});
}

复制代码

案例

后端接口请自行设计。
登录页面

import router from '@ohos.router'
import { User } from '../entity/User'
import { login } from './httpRequest/UserRelated'
/**
* 登录页面
*/
@Entry
@Component
struct Login{
@State user: User = new User('','')
build(){
Column({space: 10}){
Row(){
Text('+86')
TextInput({placeholder: '请输入手机号'})
.type(InputType.PhoneNumber)
.height(45)
.backgroundColor('#ffffff')
.padding(10)
.layoutWeight(1)
.onChange(value =>{
this.user.phone = value
})
}.padding({left: 20, right: 20})
Row(){
TextInput({placeholder: '请输入密码'})
.type(InputType.Number)
.height(45)
.backgroundColor('#ffffff')
.padding({left: 0, right: 0})
.layoutWeight(1)
.onChange(value =>{
this.user.password = value
})
}.padding({left: 20, right: 20})
Row(){
Button('登录')
.type(ButtonType.Normal)
.fontSize(20)
.width('100%')
.borderRadius(20)
.backgroundColor('#2f90b9')
.fontColor('#ffffff')
.onClick(() => {
login(this.user).then(res =>{
if (res.code === 1) {
router.pushUrl({
url: 'pages/Index'
})
} else {
AlertDialog.show({
title: '警告',
message: res.msg
})
}
})
})
}.padding({left: 20, right: 20})
}
.width('100%')
.height('100%')
.justifyContent(FlexAlign.Center)
}
}

复制代码

用户相干http请求
将http请求从页面中抽离出来封装在一个ets文件中，在页面中直接引用方法即可。不混杂在页面代码中，加强代码可读性。

import http from '@ohos.net.http'
import { User } from '../../entity/User'
import { request } from '../../utils/httpUtils/Request'
/**
* 用户相关数据请求
* @returns
*/
export function login(user: User){
return request('/user/user/login', http.RequestMethod.POST, user)
}

复制代码

用户对象
不在页面中定义，页面只进行数据项的定义和数据渲染即可，加强代码可读性。

export class User{
phone: String
password: String
constructor(phone: String, password: String) {
this.phone = phone
this.password = password
}
}

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/)