【HarmonyOS开发】ArkTs使用Http封装
1、鸿蒙中如何进行网络请求
1.1 三方库请求
-
@ohos/axios
-
@ohos/retrofit
-
@ohos/httpclient
1.2 鸿蒙原生请求
-
@ohos.net.http
2、ArkTs请求模块@ohos.net.http
本模块提供HTTP数据请求能力。应用可以通过HTTP发起一个数据请求，支持常见的GET、POST、OPTIONS、HEAD、PUT、DELETE、TRACE、CONNECT方法。
3、@ohos.net.http请求流程
-
http.createHttp（创建请求实例任务）；
-
request（请求）；
-
destroy（中断请求）；
-
on（订阅HTTP Response Header 事件）；
-
off（取消订阅HTTP Response Header 事件）；
-
once（订阅HTTP Response Header 事件，但是只触发一次）；
4、预览效果
5、封装@ohos.net.http
5.1 函数式
5.1.1 封装
import http from '@ohos.net.http';
export interface httpOptions {
timeOut?: number;
ContentType?: string;
header?: Object;
state?: string;
callBack?: Function;
}
const HTTP_READ_TIMEOUT = 60000;
const HTTP_CONNECT_TIMEOUT = 60000;
const CONTENT_TYPE = 'application/json'
export function httpRequest(
url: string,
method: http.RequestMethod = http.RequestMethod.GET,
params?: string | Object | ArrayBuffer,
options?: httpOptions
): Promise {
const request = http.createHttp();
// 处理状态
if(options?.state) {
switch (options.state) {
case 'on':
request.on('headersReceive', (header) => options.callBack(header));
break;
case 'once':
request.on('headersReceive', (header) => options.callBack(header));
break;
case 'off':
request.off('headersReceive');
break;
case 'destroy':
request.destroy();
break;
default:
break;
}
return;
}
// 处理请求
const responseResult = request.request(url, {
// 超时时间
readTimeout: options?.timeOut || HTTP_READ_TIMEOUT,
connectTimeout: options?.timeOut || HTTP_CONNECT_TIMEOUT,
method,
extraData: params || {},
header: options?.header || {
'Content-Type': options?.ContentType || CONTENT_TYPE
},
});
let serverData: ResponseResult = new ResponseResult();
// Processes the data and returns.
return responseResult.then((data: http.HttpResponse) => {
if (data.responseCode === http.ResponseCode.OK) {
// Obtains the returned data.
let result = `${data.result}`;
let resultJson: ResponseResult = JSON.parse(result);
serverData.data = resultJson;
serverData.code = 'success';
serverData.msg = resultJson?.msg;
} else {
serverData.msg = `error info & ${data.responseCode}`;
}
return serverData;
}).catch((err) => {
serverData.msg = `${err}`;
return serverData;
})
}
export class ResponseResult {
/**
* Code returned by the network request: success, fail.
*/
code: string;
/**
* Message returned by the network request.
*/
msg: string | Resource;
/**
* Data returned by the network request.
*/
data: string | Object | ArrayBuffer;
constructor() {
this.code = '';
this.msg = '';
this.data = '';
}
}
export default httpRequest; 5.1.2 使用
import httpRequest from '../../utils/requestHttp';
interface resultType {
resultcode: string;
reason: string;
result: resultValType | null;
error_code: string;
}
interface resultValType {
city: string;
realtime: realtimeType;
future: Object;
}
interface realtimeType {
temperature: string;
humidity: string;
info: string;
wid: string;
direct: string;
power: string;
aqi: string;
}
@Extend(Text) function textStyle() {
.fontColor(Color.White)
.margin({
left: 12
})
}
@Entry
@Component
struct httpPages {
@State html: resultValType = {
city: '',
realtime: {
temperature: '',
humidity: '',
info: '',
wid: '',
direct: '',
power: '',
aqi: '',
},
future: undefined
};
@State url: string = "http://apis.juhe.cn/simpleWeather/query?key=397c9db4cb0621ad0313123dab416668&city=西安";
@Styles weatherStyle() {
.width('100%')
.padding(6)
.backgroundColor(Color.Green)
.borderRadius(8)
}
build() {
Column({space: 10}) {
Button("请求数据")
.onClick(() => {
this.httpRequest();
})
Column() {
Text(this.html.city || '--').textStyle().fontWeight(FontWeight.Bold)
}.weatherStyle().alignItems(HorizontalAlign.Start)
Column() {
Text(this.html.realtime.temperature || '--').textStyle()
}.weatherStyle().alignItems(HorizontalAlign.Start)
Column() {
Text(this.html.realtime.humidity || '--').textStyle()
}.weatherStyle().alignItems(HorizontalAlign.Start)
Column() {
Text(this.html.realtime.info || '--').textStyle()
}.weatherStyle().alignItems(HorizontalAlign.Start)
Column() {
Text(this.html.realtime.wid || '--').textStyle()
}.weatherStyle().alignItems(HorizontalAlign.Start)
Column() {
Text(this.html.realtime.direct || '--').textStyle()
}.weatherStyle().alignItems(HorizontalAlign.Start)
Column() {
Text(this.html.realtime.power || '--').textStyle()
}.weatherStyle().alignItems(HorizontalAlign.Start)
Column() {
Text(this.html.realtime.aqi || '--').textStyle()
}.weatherStyle().alignItems(HorizontalAlign.Start)
}
.width('100%')
.height('100%')
.padding(10)
}
private httpRequest() {
httpRequest(this.url).then(res => {
const data: resultType = res.data as resultType;
this.html = data.result;
console.info('网络结果:'+JSON.stringify(data));
});
}
}
5.2 泛型式
5.2.1 封装
import http from '@ohos.net.http';
// 1、创建RequestOption.ets 配置类
export interface RequestOptions {
url?: string;
method?: RequestMethod; // default is GET
queryParams ?: Record;
extraData?: string | Object | ArrayBuffer;
header?: Object; // default is 'content-type': 'application/json'
}
export enum RequestMethod {
OPTIONS = "OPTIONS",
GET = "GET",
HEAD = "HEAD",
POST = "POST",
PUT = "PUT",
DELETE = "DELETE",
TRACE = "TRACE",
CONNECT = "CONNECT"
}
/**
* Http请求器
*/
export class HttpCore {
/**
* 发送请求
* @param requestOption
* @returns Promise
*/
request(requestOption: RequestOptions): Promise {
return new Promise((resolve, reject) => {
this.sendRequest(requestOption)
.then((response) => {
if (typeof response.result !== 'string') {
reject(new Error('Invalid data type'));
} else {
let bean: T = JSON.parse(response.result);
if (bean) {
resolve(bean);
} else {
reject(new Error('Invalid data type,JSON to T failed'));
}
}
})
.catch((error) => {
reject(error);
});
});
}
private sendRequest(requestOption: RequestOptions): Promise {
// 每一个httpRequest对应一个HTTP请求任务，不可复用
let httpRequest = http.createHttp();
let resolveFunction, rejectFunction;
const resultPromise = new Promise((resolve, reject) => {
resolveFunction = resolve;
rejectFunction = reject;
});
if (!this.isValidUrl(requestOption.url)) {
return Promise.reject(new Error('url格式不合法.'));
}
let promise = httpRequest.request(this.appendQueryParams(requestOption.url, requestOption.queryParams), {
method: requestOption.method,
header: requestOption.header,
extraData: requestOption.extraData, // 当使用POST请求时此字段用于传递内容
expectDataType: http.HttpDataType.STRING // 可选，指定返回数据的类型
});
promise.then((response) => {
console.info('Result:' + response.result);
console.info('code:' + response.responseCode);
console.info('header:' + JSON.stringify(response.header));
if (http.ResponseCode.OK !== response.responseCode) {
throw new Error('http responseCode !=200');
}
resolveFunction(response);
}).catch((err) => {
rejectFunction(err);
}).finally(() => {
// 当该请求使用完毕时，调用destroy方法主动销毁。
httpRequest.destroy();
})
return resultPromise;
}
private appendQueryParams(url: string, queryParams: Record): string {
// todo 使用将参数拼接到url上
return url;
}
private isValidUrl(url: string): boolean {
//todo 实现URL格式判断
return true;
}
}
// 实例化请求器
const httpCore = new HttpCore();
export class HttpManager {
private static mInstance: HttpManager;
// 防止实例化
private constructor() {
}
static getInstance(): HttpManager {
if (!HttpManager.mInstance) {
HttpManager.mInstance = new HttpManager();
}
return HttpManager.mInstance;
}
request(option: RequestOptions): Promise {
return httpCore.request(option);
}
}
export default HttpManager; 5.2.2 使用
import httpManager, { RequestMethod } from '../../utils/requestManager';
interface TestBean {
userId: number,
id: number,
title: string,
completed: boolean
}
private handleClick() {
httpManager.getInstance()
.request({
method: RequestMethod.GET,
url: 'https://jsonplaceholder.typicode.com/todos/1' //公开的API
})
.then((result) => {
this.text = JSON.stringify(result);
console.info(JSON.stringify(result));
})
.catch((err) => {
console.error(JSON.stringify(err));
});
} 