鸿蒙多功能工具箱开发实战(十六)-实时行情数据获取与展示

前言

实时行情数据展示需要网络请求和数据刷新机制。本文将讲解HarmonyOS网络请求API和行情数据展示的实现。

一、网络请求封装

1.1 HTTP服务封装

importhttpfrom'@ohos.net.http'exportclassHttpService{privatestaticinstance:HttpServiceprivatehttpClient:http.HttpClientprivateconstructor(){this.httpClient=http.createHttp()}staticgetInstance():HttpService{if(!HttpService.instance){HttpService.instance=newHttpService()}returnHttpService.instance}/** * GET请求 */asyncget<T>(url:string,params?:Record<string,string>):Promise<T>{constfullUrl=params?`${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{constresult=JSON.parse(data.resultasstring)asTresolve(result)}catch(e){reject(e)}}})})}privatestringifyParams(params:Record<string,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{privatehttp=HttpService.getInstance()/** * 获取今日金价 */asyncgetGoldPrice():Promise<GoldPrice>{// 模拟数据（实际应调用真实API）return{date:newDate().toLocaleDateString(),price:580.50,change:2.30,changePercent:0.40}}/** * 获取实时汇率 */asyncgetExchangeRates():Promise<ExchangeRate[]>{// 模拟数据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:GoldPrice=null@StateexchangeRates:ExchangeRate[]=[]@StateisLoading:boolean=false@StatelastUpdate:string=''privatemarketService=newMarketService()privaterefreshInterval:number=nullaboutToAppear(){this.loadData()// 每30秒刷新一次this.refreshInterval=setInterval(()=>{this.loadData()},30000)}aboutToDisappear(){if(this.refreshInterval){clearInterval(this.refreshInterval)}}asyncloadData(){this.isLoading=truetry{this.goldPrice=awaitthis.marketService.getGoldPrice()this.exchangeRates=awaitthis.marketService.getExchangeRates()this.lastUpdate=newDate().toLocaleTimeString()}catch(e){console.error('加载数据失败:',e)}finally{this.isLoading=false}}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?.change>0?'+':''}${this.goldPrice?.change?.toFixed(2)||'--'}`).fontColor(this.goldPrice?.change>0?'#E74C3C':'#27AE60')Text(`(${this.goldPrice?.changePercent?.toFixed(2)}%)`).fontColor(this.goldPrice?.change>0?'#E74C3C':'#27AE60')}.margin({top:8})}.width('90%').padding(24).backgroundColor('#FFFFFF').borderRadius(12).margin({top:16})}}

三、高级功能

3.1 数据流程图

3.2 错误处理

classQuoteService{privatestaticMAX_RETRY=3privatestaticretryCount=0staticasyncfetchWithRetry(url:string):Promise<QuoteData>{try{constresponse=awaithttp.request(url)this.retryCount=0returnthis.parseResponse(response)}catch(error){this.retryCount++if(this.retryCount<this.MAX_RETRY){awaitthis.delay(1000*this.retryCount)returnthis.fetchWithRetry(url)}thrownewError('数据获取失败')}}}

3.3 数据缓存

classQuoteCache{privatestaticcache:Map<string,{data:QuoteData,time:number}>=newMap()privatestaticTTL=30000// 30秒staticget(key:string):QuoteData|null{constitem=this.cache.get(key)if(!item)returnnullif(Date.now()-item.time>this.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.change>=0?'#E74C3C':'#27AE60')Text(`${this.quote.change>=0?'+':''}${this.quote.changePercent.toFixed(2)}%`).fontColor(this.quote.change>=0?'#E74C3C':'#27AE60')}.margin({top:8})}.padding(16).backgroundColor('#FFF').borderRadius(8)}}

图 1 今日金价界面展示

五、单元测试

describe('QuoteService',()=>{it('should fetch quote data',async()=>{constdata=awaitQuoteService.fetch('000001')expect(data.price).toBeGreaterThan(0)})})

六、小结

本文详细讲解了实时行情功能：

1. ✅ HTTP请求封装
2. ✅ 行情数据接口
3. ✅ 定时刷新机制
4. ✅ 下拉刷新
5. ✅ 数据展示
6. ✅ 错误处理
7. ✅ 数据缓存
8. ✅ 单元测试

系列文章导航：
下期预告：鸿蒙多功能工具箱开发实战(十七)-每日语录与天气查询