一、前言
网络问题是移动端App最常见的线上故障:用户切换Wi-Fi/移动流量、进入电梯隧道断网、服务器500报错、接口超时、弱网加载缓慢。很多项目仅简单捕获异常弹窗提示,缺少完整容错方案,带来极差体验:
断网后页面空白,用户必须手动刷新页面;
接口失败无自动重试,频繁弹窗报错;
弱网环境请求堆积,并发大量重复接口;
未全局监听网络状态,无法实时展示无网络占位页;
无请求防抖、超时配置,长时间阻塞页面交互。
本篇搭建一套商用级网络容错框架:全局网络状态监听、自动重试机制、超时拦截、弱网节流、断网占位页面、统一请求异常处理,所有工具类代码开箱即用,适配API10+鸿蒙项目。
二、鸿蒙网络基础API前置说明
鸿蒙提供两大核心模块支撑网络监听与请求容错:
@ohos.net.connection:获取当前网络类型、注册网络切换监听;
http封装请求工具:统一配置超时、重试次数、错误拦截;
开发前需在module.json5添加网络权限,否则无法获取网络状态:
"requestPermissions": [ { "name": "ohos.permission.GET_NETWORK_INFO", "reason": "监听网络状态,实现断网重连、弱网提示", "usedScene": { "abilities": ["EntryAbility"], "when": "inuse" } }]
三、全局网络状态监听(断网检测核心)
3.1 封装网络状态工具类
// common/NetMonitor.etsimport connection from '@ohos.net.connection';// 网络类型枚举export enum NetType { NONE = 0, // 无网络 WIFI = 1, // Wi-Fi CELLULAR = 2, // 移动流量 OTHER = 3 // 以太网等其他网络}type NetChangeCallback = (type: NetType, isConnected: boolean) => void;export class NetMonitor { private static instance: NetMonitor; private netCallbackId: number | null = null; private callbackList: NetChangeCallback[] = []; public currentNetType: NetType = NetType.NONE; public isNetAvailable: boolean = false; static getInstance(): NetMonitor { if (!this.instance) { this.instance = new NetMonitor(); } return this.instance; } // 初始化网络监听 initMonitor() { // 先获取当前网络状态 this.getNowNetStatus(); // 注册全局网络切换监听 this.netCallbackId = connection.on('netAvailable', (netHandle) => { this.handleNetChange(true); }); connection.on('netUnavailable', () => { this.handleNetChange(false); }); } // 获取当前网络类型 private async getNowNetStatus() { let netCap = await connection.getDefaultNetCapabilities(); let netType = netCap.bearerTypes[0]; this.isNetAvailable = true; if (netType === connection.NetBearType.BEARER_WIFI) { this.currentNetType = NetType.WIFI; } else if (netType === connection.NetBearType.BEARER_CELLULAR) { this.currentNetType = NetType.CELLULAR; } else { this.currentNetType = NetType.OTHER; } } // 网络切换分发回调 private handleNetChange(available: boolean) { this.isNetAvailable = available; if (!available) { this.currentNetType = NetType.NONE; } else { this.getNowNetStatus(); } this.callbackList.forEach(cb => cb(this.currentNetType, this.isNetAvailable)); } // 订阅网络变化 subscribe(cb: NetChangeCallback) { this.callbackList.push(cb); } // 销毁监听(页面销毁调用) destroy() { if (this.netCallbackId !== null) { connection.off('netAvailable', this.netCallbackId); connection.off('netUnavailable'); this.netCallbackId = null; } this.callbackList = []; }}
3.2 页面使用监听+无网络占位组件
import { NetMonitor, NetType } from '../common/NetMonitor';@Entry@Componentstruct NetPage { @State hasNet: boolean = true; netMonitor = NetMonitor.getInstance(); aboutToAppear() { this.hasNet = this.netMonitor.isNetAvailable; // 订阅网络变化 this.netMonitor.subscribe((type, connect) => { this.hasNet = connect; }); } aboutToDisappear() { // 页面销毁无需销毁全局监听,全局监听在Ability统一释放 } build() { Column() { if (!this.hasNet) { // 断网占位页面 Column({ space: 15 }) { Text("当前无网络连接") .fontSize(20) .fontColor("#666") Text("请检查Wi-Fi或移动流量,点击刷新重试") .fontSize(14) .fontColor("#999") Button("重新加载") .onClick(() => this.refreshData()) } .width('100%') .height('100%') .justifyContent(FlexAlign.Center) } else { Text("网络正常,展示业务列表数据") .fontSize(16) } } } refreshData() { // 重新请求页面接口 }}
四、请求自动重试机制(核心容错能力)
针对超时、500/502服务异常、网络波动场景,实现限定次数自动重试,避免无限循环请求。
4.1 带重试、超时的请求封装
// common/HttpUtil.etsimport http from '@ohos.net.http';import { NetMonitor } from './NetMonitor';// 请求配置类型interface RequestOpt { url: string; method: http.RequestMethod; data?: Object; timeout?: number; retryCount?: number; // 最大重试次数}export class HttpUtil { private static readonly DEF_TIMEOUT = 8000; private static readonly DEF_RETRY = 2; // 默认重试2次 static async request(opt: RequestOpt): Promise<Object> { const { url, method, data, timeout = this.DEF_TIMEOUT, retryCount = this.DEF_RETRY } = opt; // 先判断全局网络 if (!NetMonitor.getInstance().isNetAvailable) { throw new Error("无网络,请检查网络连接"); } let curRetry = 0; // 循环重试逻辑 while (curRetry <= retryCount) { try { return await this.sendHttp(url, method, data, timeout); } catch (err) { curRetry++; // 达到最大重试次数,抛出异常 if (curRetry > retryCount) { throw err; } // 重试间隔300ms,避免瞬间并发 await this.sleep(300); } } throw new Error("请求失败,已达最大重试次数"); } private static sendHttp(url: string, method: http.RequestMethod, data?: Object, timeout?: number): Promise<Object> { return new Promise((resolve, reject) => { let httpReq = http.createHttp(); httpReq.request(url, { method: method, extraData: data ? JSON.stringify(data) : "", header: { "Content-Type": "application/json" }, readTimeout: timeout, connectTimeout: timeout }, (err, res) => { httpReq.destroy(); if (err) { reject(err); return; } // 服务端异常状态码判定 if (res.responseCode >= 500) { reject(new Error(`服务器异常${res.responseCode}`)); return; } resolve(JSON.parse(res.result as string)); }) }) } // 延时工具 private static sleep(ms: number): Promise<void> { return new Promise(resolve => setTimeout(resolve, ms)); }}
4.2 页面调用示例
import { HttpUtil } from '../common/HttpUtil';import promptAction from '@ohos.promptAction';async function loadList() { try { let res = await HttpUtil.request({ url: "https://xxx/api/list", method: http.RequestMethod.GET, retryCount: 3 // 自定义最大重试3次 }); console.log("接口数据:", res); } catch (error) { promptAction.showToast({ message: error.message }); }}
五、弱网场景优化方案
弱网下大量并发请求会造成排队阻塞、页面卡死,配套3套优化策略:
请求节流防抖:短时间多次点击只执行一次请求;
加载状态锁:请求中禁用按钮,防止重复触发;
超时缩短弱网接口设置5s超时,避免长时间等待。
@Entry@Componentstruct WeakNetDemo { @State loading: boolean = false; async submit() { // 加载锁拦截重复请求 if (this.loading) return; this.loading = true; try { await HttpUtil.request({ url: "https://xxx/api/submit", method: http.RequestMethod.POST, timeout: 5000 // 弱网短超时 }) } catch (e) { promptAction.showToast({ message: "提交失败,请稍后重试" }); } finally { this.loading = false; } } build() { Button(this.loading ? "加载中..." : "提交") .width(200) .backgroundColor(this.loading ? "#cccccc" : "#007DFF") .onClick(() => this.submit()) }}
六、断网重连完整业务流程
结合全局网络监听+自动重试,完整业务流程:
页面初始化监听网络状态,无网络展示空白占位;
接口请求失败自动重试指定次数;
重试全部失败,弹窗提示网络异常;
用户切换网络恢复后,自动刷新页面数据;
支持手动点击占位页刷新按钮主动重连。
七、网络开发高频坑点汇总
未销毁http实例:每次请求createHttp后不destroy,造成连接泄漏;
无重试次数限制:断网时无限循环请求,流量消耗、页面卡死;
缺少网络前置判断:无网络时依然发起请求,大量报错日志;
弱网无加载锁:快速点击生成数十条并发请求,数据错乱;
监听未全局管理:每个页面单独注册监听,多次重复回调;
超时时间过长弱网环境8s以上超时,用户等待体验差。
八、全文总结
网络容错是App稳定性体验的基础,整套方案分为三层:全局网络状态监控、请求层自动重试、页面层弱网交互优化。
商用项目统一封装NetMonitor全局网络监听工具与HttpUtil带重试请求工具,彻底解决断网、弱网、服务异常场景下的页面空白、重复请求、长时间阻塞问题,大幅降低线上用户反馈故障数量。