鸿蒙多功能工具箱开发实战(十六)-实时行情数据获取与展示前言实时行情数据展示需要网络请求和数据刷新机制。本文将讲解HarmonyOS网络请求API和行情数据展示的实现。一、网络请求封装1.1 HTTP服务封装importhttpfromohos.net.httpexportclassHttpService{privatestaticinstance:HttpServiceprivatehttpClient:http.HttpClientprivateconstructor(){this.httpClienthttp.createHttp()}staticgetInstance():HttpService{if(!HttpService.instance){HttpService.instancenewHttpService()}returnHttpService.instance}/** * GET请求 */asyncgetT(url:string,params?:Recordstring,string):PromiseT{constfullUrlparams?${url}?${this.stringifyParams(params)}:urlreturnnewPromise((resolve,reject){this.httpClient.request(fullUrl,{method:http.RequestMethod.GET,header:{Content-Type:application/json},connectTimeout:60000,readTimeout:60000},(err,data){if(err){reject(err)}else{try{constresultJSON.parse(data.resultasstring)asTresolve(result)}catch(e){reject(e)}}})})}privatestringifyParams(params:Recordstring,string):string{returnObject.entries(params).map(([k,v])${encodeURIComponent(k)}${encodeURIComponent(v)}).join()}}1.2 行情数据接口exportinterfaceGoldPrice{date:stringprice:numberchange:numberchangePercent:number}exportinterfaceExchangeRate{from:stringto:stringrate:numberupdateTime:string}exportclassMarketService{privatehttpHttpService.getInstance()/** * 获取今日金价 */asyncgetGoldPrice():PromiseGoldPrice{// 模拟数据实际应调用真实APIreturn{date:newDate().toLocaleDateString(),price:580.50,change:2.30,changePercent:0.40}}/** * 获取实时汇率 */asyncgetExchangeRates():PromiseExchangeRate[]{// 模拟数据return[{from:USD,to:CNY,rate:7.2456,updateTime:newDate().toLocaleString()},{from:EUR,to:CNY,rate:7.8912,updateTime:newDate().toLocaleString()},{from:GBP,to:CNY,rate:9.1234,updateTime:newDate().toLocaleString()},{from:JPY,to:CNY,rate:0.0482,updateTime:newDate().toLocaleString()}]}}二、数据刷新机制2.1 定时刷新Componentstruct MarketPage{StategoldPrice:GoldPricenullStateexchangeRates:ExchangeRate[][]StateisLoading:booleanfalseStatelastUpdate:stringprivatemarketServicenewMarketService()privaterefreshInterval:numbernullaboutToAppear(){this.loadData()// 每30秒刷新一次this.refreshIntervalsetInterval((){this.loadData()},30000)}aboutToDisappear(){if(this.refreshInterval){clearInterval(this.refreshInterval)}}asyncloadData(){this.isLoadingtruetry{this.goldPriceawaitthis.marketService.getGoldPrice()this.exchangeRatesawaitthis.marketService.getExchangeRates()this.lastUpdatenewDate().toLocaleTimeString()}catch(e){console.error(加载数据失败:,e)}finally{this.isLoadingfalse}}build(){Column(){NavBar({title:实时行情})// 下拉刷新Refresh({refreshing:$$this.isLoading}){Column(){// 金价展示this.GoldPriceCard()// 汇率列表this.ExchangeRateList()// 更新时间Text(最后更新:${this.lastUpdate}).fontSize(12).fontColor(#999999).margin({top:16})}}.onRefreshing((){this.loadData()})}}BuilderGoldPriceCard(){Column(){Row(){Text(今日金价).fontSize(16)Text(this.goldPrice?.date||).fontSize(12).fontColor(#999999)}.width(100%).justifyContent(FlexAlign.SpaceBetween)Text(¥${this.goldPrice?.price?.toFixed(2)||--}).fontSize(36).fontWeight(FontWeight.Bold).margin({top:16})Row(){Text(${this.goldPrice?.change0?:}${this.goldPrice?.change?.toFixed(2)||--}).fontColor(this.goldPrice?.change0?#E74C3C:#27AE60)Text((${this.goldPrice?.changePercent?.toFixed(2)}%)).fontColor(this.goldPrice?.change0?#E74C3C:#27AE60)}.margin({top:8})}.width(90%).padding(24).backgroundColor(#FFFFFF).borderRadius(12).margin({top:16})}}三、高级功能3.1 数据流程图是否发起HTTP请求接收响应数据解析JSON数据验证数据有效?更新UI状态显示错误信息启动定时器等待刷新3.2 错误处理classQuoteService{privatestaticMAX_RETRY3privatestaticretryCount0staticasyncfetchWithRetry(url:string):PromiseQuoteData{try{constresponseawaithttp.request(url)this.retryCount0returnthis.parseResponse(response)}catch(error){this.retryCountif(this.retryCountthis.MAX_RETRY){awaitthis.delay(1000*this.retryCount)returnthis.fetchWithRetry(url)}thrownewError(数据获取失败)}}}3.3 数据缓存classQuoteCache{privatestaticcache:Mapstring,{data:QuoteData,time:number}newMap()privatestaticTTL30000// 30秒staticget(key:string):QuoteData|null{constitemthis.cache.get(key)if(!item)returnnullif(Date.now()-item.timethis.TTL){this.cache.delete(key)returnnull}returnitem.data}staticset(key:string,data:QuoteData){this.cache.set(key,{data,time:Date.now()})}}四、界面优化4.1 行情卡片Componentstruct QuoteCard{Propquote:QuoteDatabuild(){Column(){Row(){Text(this.quote.name).fontSize(16)Blank()Text(this.quote.code).fontSize(12).fontColor(#999)}Row(){Text(¥${this.quote.price.toFixed(2)}).fontSize(24).fontColor(this.quote.change0?#E74C3C:#27AE60)Text(${this.quote.change0?:}${this.quote.changePercent.toFixed(2)}%).fontColor(this.quote.change0?#E74C3C:#27AE60)}.margin({top:8})}.padding(16).backgroundColor(#FFF).borderRadius(8)}}图 1 今日金价界面展示五、单元测试describe(QuoteService,(){it(should fetch quote data,async(){constdataawaitQuoteService.fetch(000001)expect(data.price).toBeGreaterThan(0)})})六、小结本文详细讲解了实时行情功能✅ HTTP请求封装✅ 行情数据接口✅ 定时刷新机制✅ 下拉刷新✅ 数据展示✅ 错误处理✅ 数据缓存✅ 单元测试系列文章导航下期预告鸿蒙多功能工具箱开发实战(十七)-每日语录与天气查询