一、第一種簡(jiǎn)單封裝
// 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: '' };
// 處理數(shù)據(jù)遭商,并返回
return responseResult.then((value) => {
if (value.responseCode === 200) {
// 獲取返回?cái)?shù)據(jù)
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 = '調(diào)用接口失敗';
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: '' };
// 處理數(shù)據(jù),并返回
return responseResult.then((value) => {
if (value.responseCode === 200) {
// 獲取返回?cái)?shù)據(jù)
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 = '調(diào)用接口失敗';
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: '' };
// 處理數(shù)據(jù)捅伤,并返回
return responseResult.then((value) => {
if (value.responseCode === 200) {
// 獲取返回?cái)?shù)據(jù)
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 = '調(diào)用接口失敗';
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: '' };
// 處理數(shù)據(jù)劫流,并返回
return responseResult.then((value) => {
if (value.responseCode === 200) {
// 獲取返回?cái)?shù)據(jù)
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 = '調(diào)用接口失敗';
return serverData;
})
}
二、第二種使用泛型封裝
// 1丛忆、創(chuàng)建RequestOption.ets 配置類
/**
* <pre>
* @desc : 網(wǎng)絡(luò)請(qǐng)求配置
* </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祠汇、創(chuàng)建HttpCore.ets核心類
import http from '@ohos.net.http';
import { RequestOptions } from './RequestOptions';
/**
* Http請(qǐng)求器
*/
export class HttpCore {
/**
* 發(fā)送請(qǐng)求
* @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> {
// 每一個(gè)httpRequest對(duì)應(yīng)一個(gè)HTTP請(qǐng)求任務(wù),不可復(fù)用
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, // 當(dāng)使用POST請(qǐng)求時(shí)此字段用于傳遞內(nèi)容
expectDataType: http.HttpDataType.STRING // 可選熄诡,指定返回?cái)?shù)據(jù)的類型
});
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(() => {
// 當(dāng)該請(qǐng)求使用完畢時(shí)可很,調(diào)用destroy方法主動(dòng)銷毀。
httpRequest.destroy();
})
return resultPromise;
}
private appendQueryParams(url: string, queryParams: Record<string, string>): string {
// todo 使用將參數(shù)拼接到url上
return url;
}
private isValidUrl(url: string): boolean {
//todo 實(shí)現(xiàn)URL格式判斷
return true;
}
}
export const httpCore = new HttpCore();
// 3凰浮、創(chuàng)建HttpManager.ets核心類
import { RequestOptions } from './RequestOptions';
import { httpCore as HttpCore } from './HttpCore';
/**
* <pre>
* @desc : 對(duì)外管理器
* </pre>
*/
export class HttpManager {
private static mInstance: HttpManager;
// 防止實(shí)例化
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對(duì)組件導(dǎo)出
export { HttpManager } from './HttpManager';
export { RequestMethod } from './RequestOptions';
// 5姜骡、添加網(wǎng)絡(luò)權(quán)限导坟,在module.json5文件中
"requestPermissions": [
{
"name": 'ohos.permission.INTERNET'
}
]
// 6屿良、頁(yè)面中使用示例
handleClick() {
HttpManager.getInstance()
.request<TestBean>({
method: RequestMethod.GET,
url: 'https://jsonplaceholder.typicode.com/todos/1' //公開(kāi)的API
})
.then((result) => {
console.info(JSON.stringify(result));
})
.catch((err) => {
console.error(JSON.stringify(err));
});
}
// 7、TestBean.ets
/**
* <pre>
* @desc : 測(cè)試Bean
* </pre>
*/
export interface TestBean {
/**
* {
"userId": 1,
"id": 1,
"title": "delectus aut autem",
"completed": false
}
*/
userId: number,
id: number,
title: string,
completed: boolean
}