一、第一种简单封装
// Constants.ets
export const BASE_URL: string = 'https://lblbc.cn/';
// HttpUtil.ets
import { BASE_URL } from './Constants';
import http from '@ohos.net.http';
export function httpRequestGet(url: string) {
url = BASE_URL + url
let httpRequest = http.createHttp();
var header = {
'Content-Type': 'application/json',
}
let responseResult = httpRequest.request(url, {
method: http.RequestMethod.GET,
header: header
});
let serverData: {
code,
data: any,
msg: string | Resource
} = { code: 0, data: '', msg: '' };
// 处理数据,并返回
return responseResult.then((value) => {
if (value.responseCode === 200) {
// 获取返回数据
let result = `${value.result}`;
let resultJson = JSON.parse(result);
serverData.data = resultJson.data;
serverData.code = resultJson.code;
serverData.msg = resultJson.msg;
} else {
serverData.code = value.responseCode;
}
return serverData;
}).catch(() => {
serverData.msg = '调用接口失败';
return serverData;
})
}
export function httpRequestDel(url: string) {
url = BASE_URL + url
let httpRequest = http.createHttp();
var header = {
'Content-Type': 'application/json',
}
let responseResult = httpRequest.request(url, {
method: http.RequestMethod.DELETE,
header: header
});
let serverData: {
code,
data: any,
msg: string | Resource
} = { code: 0, data: '', msg: '' };
// 处理数据,并返回
return responseResult.then((value) => {
if (value.responseCode === 200) {
// 获取返回数据
let result = `${value.result}`;
let resultJson = JSON.parse(result);
serverData.data = resultJson.data;
serverData.code = resultJson.code;
serverData.msg = resultJson.msg;
} else {
serverData.code = value.responseCode;
}
return serverData;
}).catch(() => {
serverData.msg = '调用接口失败';
return serverData;
})
}
export function httpRequestPost(url: string, params: any) {
url = BASE_URL + url
let httpRequest = http.createHttp();
var user = User.get()
var header = {
'Content-Type': 'application/json',
}
let responseResult = httpRequest.request(url, {
method: http.RequestMethod.POST,
extraData: params,
header: header
});
let serverData: {
code,
data: any,
msg: string | Resource
} = { code: 0, data: '', msg: '' };
// 处理数据,并返回
return responseResult.then((value) => {
if (value.responseCode === 200) {
// 获取返回数据
let result = `${value.result}`;
let resultJson = JSON.parse(result);
serverData.data = resultJson.data;
serverData.code = resultJson.code;
serverData.msg = resultJson.msg;
} else {
serverData.code = value.responseCode;
}
return serverData;
}).catch((e) => {
console.log(e)
serverData.msg = '调用接口失败';
return serverData;
})
}
export function httpRequestPut(url: string, params: any) {
url = BASE_URL + url
let httpRequest = http.createHttp();
var user = User.get()
var header = {
'Content-Type': 'application/json',
}
let responseResult = httpRequest.request(url, {
method: http.RequestMethod.PUT,
extraData: params,
header: header
});
let serverData: {
code,
data: any,
msg: string | Resource
} = { code: 0, data: '', msg: '' };
// 处理数据,并返回
return responseResult.then((value) => {
if (value.responseCode === 200) {
// 获取返回数据
let result = `${value.result}`;
let resultJson = JSON.parse(result);
serverData.data = resultJson.data;
serverData.code = resultJson.code;
serverData.msg = resultJson.msg;
} else {
serverData.code = value.responseCode;
}
return serverData;
}).catch((e) => {
console.log(e)
serverData.msg = '调用接口失败';
return serverData;
})
}
二、第二种使用泛型封装
// 1、创建RequestOption.ets 配置类
/**
* <pre>
* @desc : 网络请求配置
* </pre>
*/
export interface RequestOptions {
/**
* Request url.
*/
url?: string;
/**
* Request method.
*/
method?: RequestMethod; // default is GET
/**
* Request url queryParams .
*/
queryParams ?: Record<string, string>;
/**
* Additional data of the request.
* extraData can be a string or an Object (API 6) or an ArrayBuffer(API 8).
*/
extraData?: string | Object | ArrayBuffer;
/**
* HTTP request header.
*/
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"
}
// 2、创建HttpCore.ets核心类
import http from '@ohos.net.http';
import { RequestOptions } from './RequestOptions';
/**
* Http请求器
*/
export class HttpCore {
/**
* 发送请求
* @param requestOption
* @returns Promise
*/
request<T>(requestOption: RequestOptions): Promise<T> {
return new Promise<T>((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<http.HttpResponse> {
// 每一个httpRequest对应一个HTTP请求任务,不可复用
let httpRequest = http.createHttp();
let resolveFunction, rejectFunction;
const resultPromise = new Promise<http.HttpResponse>((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, string>): string {
// todo 使用将参数拼接到url上
return url;
}
private isValidUrl(url: string): boolean {
//todo 实现URL格式判断
return true;
}
}
export const httpCore = new HttpCore();
// 3、创建HttpManager.ets核心类
import { RequestOptions } from './RequestOptions';
import { httpCore as HttpCore } from './HttpCore';
/**
* <pre>
* @desc : 对外管理器
* </pre>
*/
export class HttpManager {
private static mInstance: HttpManager;
// 防止实例化
private constructor() {
}
static getInstance(): HttpManager {
if (!HttpManager.mInstance) {
HttpManager.mInstance = new HttpManager();
}
return HttpManager.mInstance;
}
request<T>(option: RequestOptions): Promise<T> {
return HttpCore.request(option);
}
}
// 4、index.ets对组件导出
export { HttpManager } from './HttpManager';
export { RequestMethod } from './RequestOptions';
// 5、添加网络权限,在module.json5文件中
"requestPermissions": [
{
"name": 'ohos.permission.INTERNET'
}
]
// 6、页面中使用示例
handleClick() {
HttpManager.getInstance()
.request<TestBean>({
method: RequestMethod.GET,
url: 'https://jsonplaceholder.typicode.com/todos/1' //公开的API
})
.then((result) => {
console.info(JSON.stringify(result));
})
.catch((err) => {
console.error(JSON.stringify(err));
});
}
// 7、TestBean.ets
/**
* <pre>
* @desc : 测试Bean
* </pre>
*/
export interface TestBean {
/**
* {
"userId": 1,
"id": 1,
"title": "delectus aut autem",
"completed": false
}
*/
userId: number,
id: number,
title: string,
completed: boolean
}