概述
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
request(url: string, options: HttpRequestOptions, callback: AsyncCallback
request(url: string, options?: HttpRequestOptions): Promise
/**
* 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
/**
* Unregisters the observer for HTTP Response Header events.
* 取消订阅HTTP响应头事件
* @deprecated since 8
* @useinstead off_headersReceive
*/
off(type: "headerReceive", callback?: AsyncCallback
/**
* Registers an observer for HTTP Response Header events.
* 订阅HTTP响应头事件
* @since 8
*/
on(type: "headersReceive", callback: Callback
/**
* Unregisters the observer for HTTP Response Header events.
* 取消订阅HTTP响应头事件
* @since 8
*/
off(type: "headersReceive", callback?: Callback
/**
* Registers a one-time observer for HTTP Response Header events.
* 订阅一次HTTP响应头事件
* @since 8
*/
once(type: "headersReceive", callback: Callback
}
HttpRequestOptions
发送http请求携带的参数。
参数详情及取值范围
名称类型必选项说明methodRequestMethod(枚举)否 请求方式 extraDatastring | Object | ArrayBuffer(API8以后)否发送请求的额外数据,用于http请求的POST、PUT方法expectDataTypeHttpDataType(枚举)否指定返回数据的类型,如果指定了,将优先返回指定的类型useingCache(API9之后)boolean否是否使用缓存,默认为truepriority(API9后)number否优先级,取值为[1,1000],默认为1headerObject否http请求头字段,默认为{‘Content-Type’:'application/json'}redTimeoutnumber否读取超时时间,单位ms,设置为0时表示不会出现超时情况connectTimeoutnumber否连接超时时间,单位msusingProtocol(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方法回调函数的返回值类型。
名称类型说明resultstring | Object | ArrayBuffer(API6之后)HTTP请求根据响应头中Content-type类型返回对应的响应格式内容resultType(API 9之后)HttpDataType(枚举)返回值类型responseCodeResponseCode | number回调函数执行成功时,此字段为ResponseCode。若执行失败,错误码会从AsyncCallback中的err字段返回headerObjecthttp请求返回的响应头
封装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
//如果使用本地模拟器,则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
}
}
参考文章
发表评论