前言
在前兩篇文章中，我們深入探討了網絡層的封裝和優化技巧。本文將帶您走進網絡層的實戰應用，從架構設計到具體實現，一步步指導您如何使用我們精心構建的網絡框架。
一、網絡層架構設計
在鴻蒙應用開發中，一個清晰、合理的網絡層架構是保證項目可維護性和擴展性的關鍵。以下是我們推薦的網絡層目錄結構：
項目
|-- network
|-- data
|-- models
|-- params // 請求模型
|-- responses // 返回模型
|-- service // 網絡接口定義
|-- sources
|-- remote // 網絡數據源
二、Service網絡接口設計與實現
1. 構建網絡接口
接口常量文件ApiMethod.ets，用于集中管理所有網絡請求的路徑。
// 接口請求路徑常量定義，便于統一管理和引用
const HARMONY_INDEX = "harmony/index/json";
export { HARMONY_INDEX };
2. 網絡請求類
ApiRequest類作為網絡請求的中心，負責網絡庫的初始化、配置以及請求的調用和拼裝。
type DataClassConstructor<T> = ClassConstructor<ApiResult<T>>;
export class ApiRequest{
private static instance: ApiRequest
static getInstance (): ApiRequest {
if (!ApiRequest.instance) {
ApiRequest.instance = new ApiRequest()
}
return ApiRequest.instance
}
net : NetworkService
constructor() {
this.net = new NetworkService("https://www.wanandroid.com/");
this.net.dataConverter = new JsonDataConverter()
this.net.addInterceptor(new DefaultInterceptor())
}
public getService() : NetworkService{
return this.net;
}
private plainToClassApiResult<T>(ctor: DataClassConstructor<T>, data: object) : ApiResult<T>{
return plainToClass(ctor,data,{
enableImplicitConversion: false,
exposeDefaultValues: true,}) as ApiResult<T>;
}
async requestHarmonyIndex(harmonyIndex: HarmonyIndexParam): Promise<ApiResult<HarmonyIndexResponse>> {
let data = await ApiRequest.getInstance().getService().request({
act : HARMONY_INDEX,
expectDataType : http.HttpDataType.OBJECT,
queryParams : new Map(Object.entries(harmonyIndex)),
method: RequestMethod.GET
})
let result :ApiResult<HarmonyIndexResponse> = this.plainToClassApiResult<HarmonyIndexResponse>( ApiResult , data.result as object,)
return result;
}
}
三、網絡數據源層
1. 網絡數據源
BaseRemoteSource類提供了基礎的網絡請求處理，包括顯示加載彈窗和基本的錯誤處理。
// BaseRemoteSource 類實現基礎網絡請求和錯誤處理
class BaseRemoteSource {
async baseRequest<T>(request: Promise<ApiResult<T>>, option?: DataSourceOption): Promise<DataResult<ApiResult<T>>> {
try {
// 顯示加載提示
NetworkUtil.showSpinner(option);
const result = await request;
// 隱藏加載提示
NetworkUtil.hideSpinner(option);
// 根據結果進行相應處理
return result.errorCode === 0
? new SuccessData(result)
: new ErrorData(new AppBusinessError(result.errorCode!, result.errorMsg!));
} catch (e) {
// 異常處理
const error = e as BaseError;
NetworkUtil.hideSpinner(option);
if (option?.showErrorTips) {
LibToast.show(error.message);
}
return new ErrorData(e);
}
}
}
2. 網絡數據源實現類
WanRemoteSource類繼承自BaseRemoteSource，實現了具體的網絡請求。
// WanRemoteSource 類實現特定業務的網絡請求
class WanRemoteSource extends BaseRemoteSource {
async requestHarmonyIndex(harmonyIndex: HarmonyIndexParam): Promise<DataResult<ApiResult<HarmonyIndexResponse>>> {
const option = new DataSourceOption();
option.showSpinner = true;
return this.baseRequest(ApiRequest.getInstance().requestHarmonyIndex(harmonyIndex), option);
}
}
3. 數據倉庫
WanResponsitory類作為數據倉庫，負責協調遠程數據源和可能的本地數據源。
// WanResponsitory 類實現數據倉庫模式
class WanResponsitory implements IWanSource {
private static instance: WanResponsitory;
private remoteSource: IWanSource;
private constructor() {
this.remoteSource = new WanRemoteSource();
// ...（省略部分代碼）
}
public static getInstance(): WanResponsitory {
if (!WanResponsitory.instance) {
WanResponsitory.instance = new WanResponsitory();
}
return WanResponsitory.instance;
}
requestHarmonyIndex(harmonyIndex: HarmonyIndexParam): Promise<DataResult<ApiResult<HarmonyIndexResponse>>> {
return this.remoteSource.requestHarmonyIndex(harmonyIndex);
}
}
四、頁面業務端使用
在頁面業務邏輯中，我們通過調用數據倉庫的方法來執行網絡請求，并處理返回結果。
// 頁面中按鈕點擊事件的處理
Button('網絡請求')
.attributeModifier(new ColumnButtonStyle)
.onClick(() => {
WanResponsitory.getInstance().requestHarmonyIndex(new HarmonyIndexParam()).then((value) => {
if (value instanceof SuccessData) {
const data = value as SuccessData<ApiResult<HarmonyIndexResponse>>;
LibToast.show(`展示：${data.data?.data?.links?.name}`);
} else if (value instanceof ErrorData) {
const error = value.error;
if (error instanceof AppBusinessError) {
LibToast.show(`業務異常：${error.code}`);
}
}
});
});
結語
本文詳細介紹了如何使用我們編寫的網絡框架，從架構設計到具體實現，每一步都體現了對高效、可維護代碼的追求。希望這些知識能夠幫助您在鴻蒙開發中更加得心應手，構建出更加健壯和用戶友好的應用。
