鸿蒙OS开发实例：【窥探网络请求】

作者：AllinToyou | 2024-04-02 10:41:50

踩

鸿蒙OS开发实例：【窥探网络请求】

HarmonyOS 平台中使用网络请求，需要引入 "@ohos.net.http", 并且需要在 module.json5 文件中申请网络权限, 即 “ohos.permission.INTERNET”

本篇文章将尝试使用 @ohos.net.http 来实现网络请求

场景设定

WeiBo UniDemo HuaWei : 请求顺序
WeiBo1 UniDemo2 HuaWei3 : 异步/同步请求时，序号表示请求回来的顺序
“开始网络请求-异步” : 开始异步请求
“开始网络请求-同步” : 开始同步请求
“开始网络请求-自定义方法装饰器” : 采用自定义方法装饰器进行传参，进而完成网络请求

官方网络请求案例

注意:

每次请求都必须新创建一个HTTP请求实例，即只要发起请求，必须调用createHttp方法

场景布局

基础页面组件代码

考虑到实际的场景会用到网络请求加载，因此这里将发挥 [@BuilderParam] 装饰器作用，先定义基础页面

组件中定义了 @Prop netLoad:boolean 变量来控制是否展示加载动画


@Component
export struct BasePage {
  @Prop netLoad: boolean
 
  //指向一个组件  
  @BuilderParam aB0: () => {}
 
  build(){
     Stack(){
       
       //为组件占位
       this.aB0()
 
       if (this.netLoad) {
         LoadingProgress()
           .width(px2vp(150))
           .height(px2vp(150))
           .color(Color.Blue)
       }
 
     }.hitTestBehavior(HitTestMode.None)
  }
 
}

主页面布局代码


import { BasePage } from './BasePage'
 
@Entry
@Component
struct NetIndex {
  @State netLoad: number = 0
  @State msg: string = ''
  build() {
      Stack(){
        BasePage({netLoad: this.netLoad != 0}) {
          Column( {space: 20} ){
            Row({space: 20}){
              Text('WeiBo').fontColor(Color.Black)
              Text('UniDemo').fontColor(Color.Black)
              Text('HuaWei').fontColor(Color.Black)
            }
 
            Row({space: 20}){
              Text('WeiBo' + this.weiboIndex)
              Text('UniDemo' + this.uniIndex)
              Text('HuaWei' + this.huaweiIndex)
            }
 
            Button('开始网络请求 - 异步').fontSize(20).onClick( () => {
                ...
            })
 
            Button('开始网络请求 - 同步').fontSize(20).onClick( () => {
                ...
            })
 
            Button('开始网络请求-自定义方法装饰器').fontSize(20).onClick( () => {
              ...
            })
 
            Scroll() {
              Text(this.msg).width('100%')
            }
            .scrollable(ScrollDirection.Vertical)
          }
          .width('100%')
          .height('100%')
          .padding({top: px2vp(120)})
        }
 
      }
  }
 
}

简单装封装网络请求

函数传参，直接调用封装方法

WeiBo为数据结构体，暂时不用关心，后续会贴出完整代码，这里仅仅是演示网络请求用法


//引用封装好的HNet网络工具类
import HNet from './util/HNet'
 
@State msg: string = ''
    
getWeiBoData(){
   HNet.get<WeiBo>({
  url: 'https://m.weibo.cn/api/feed/trendtop?containerid=102803_ctg1_4188_-_ctg1_4188',
}).then( (r) => {
 
  this.msg = ''
  if(r.code == 0 && r.result){
    r.result.data.statuses.forEach((value: WeiBoItem) => {
      this.msg = this.msg.concat(value.created_at + ' ' + value.id + '\n')
    })
  } else {
    this.msg = r.code + ' ' + r.msg
  }
  console.log('顺序-weibo-' + (new Date().getTime() - starTime))
 
  this.netLoad--
 
})    
   
}

自定义方法装饰器，完成传参调用

网络请求样例


NetController.getWeiBo<WeiBo>().then( r => {
   ......
})

按照业务定义传参


import { Get, NetResponse } from './util/HNet'
 
export default class BizNetController {
 
  @Get('https://m.weibo.cn/api/feed/trendtop?containerid=102803_ctg1_4188_-_ctg1_4188')
  static getWeiBo<WeiBo>(): Promise<NetResponse<WeiBo>>{ return }
 
}

封装的网络请求代码


import http from '@ohos.net.http';
 
//自定义网络请求参数对象    
class NetParams{
  url: string
  extraData?: JSON
}
 
//自定义数据公共结构体    
export class NetResponse<T> {
  result: T
  code: number
  msg: string
}
 
//网络封装工具类    
class HNet {
 
  //POST 请求方法  
  static post<T>(options: NetParams): Promise<NetResponse<T>>{
    return this.request(options, http.RequestMethod.POST)
  }
 
  //GET 请求方法  
  static get<T>(options: NetParams): Promise<NetResponse<T>>{
    return this.request(options, http.RequestMethod.GET)
  }
 
    
  private static request<T>(options: NetParams, method: http.RequestMethod): Promise<NetResponse<T>>{
 
    let r = http.createHttp()
 
    return r.request(options.url, {
      method: method,
      extraData: options.extraData != null ? JSON.stringify(options.extraData) : null
    }).then( (response: http.HttpResponse) => {
 
      let netResponse = new NetResponse<T>()
 
      let dataType = typeof response.result
 
      if(dataType === 'string'){
         console.log('结果为字符串类型')
      }
 
      if(response.responseCode == 200){
        netResponse.code = 0
        netResponse.msg = 'success'
        netResponse.result = JSON.parse(response.result as string)
 
      } else {
        //出错
        netResponse.code = -1
        netResponse.msg = 'error'
 
      }
 
      return netResponse
 
    }).catch( reject => {
      console.log('结果发生错误')
 
      let netResponse = new NetResponse<T>()
      netResponse.code = reject.code
      netResponse.msg  = reject.message
      return netResponse
 
    }).finally( () => {
       //网络请求完成后，需要进行销毁
       r.destroy()
    })
 
  }
 
}
 
export default HNet 
    
//用于装饰器传参
export function Get(targetUrl: string) : MethodDecorator {
 
  return (target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor) => {
        //替换方法
        descriptor.value = () => {
           let options = new NetParams()
           options.url = targetUrl
            return HNet.get(options)
        }
  }
 
}

完整代码

代码结构

net/BasePage.ets

net/NetRequest.ets

net/util/HNet.ts

net/viewmodel/WeiBoModel.ts

net/BizNetController.ets

详细代码


@Component
export struct BasePage {
  @Prop netLoad: boolean
 
  @BuilderParam aB0: () => {}
 
  build(){
     Stack(){
 
       this.aB0()
 
       if (this.netLoad) {
         LoadingProgress()
           .width(px2vp(150))
           .height(px2vp(150))
           .color(Color.Blue)
       }
 
     }.hitTestBehavior(HitTestMode.None)
  }
 
}


import HNet from './util/HNet'
import NetController from './BizNetController'
import { WeiBo, WeiBoItem } from './viewmodel/WeiBoModel'
import { BasePage } from './BasePage'
 
@Entry
@Component
struct NetIndex {
  @State netLoad: number = 0
  @State msg: string = ''
  @State weiboColor: Color = Color.Black
  @State uniColor: Color = Color.Black
  @State huaweiColor: Color = Color.Black
  @State weiboIndex: number = 1
  @State uniIndex: number = 2
  @State huaweiIndex: number = 3
  private  TEST_Target_URL: string[] = [
    'https://m.weibo.cn/api/feed/trendtop?containerid=102803_ctg1_4188_-_ctg1_4188',
    'https://unidemo.dcloud.net.cn/api/news',
    'https://developer.huawei.com/config/cn/head.json',
  ]
 
  build() {
      Stack(){
        BasePage({netLoad: this.netLoad != 0}) {
          Column( {space: 20} ){
 
            Row({space: 20}){
              Text('WeiBo').fontColor(Color.Black)
              Text('UniDemo').fontColor(Color.Black)
              Text('HuaWei').fontColor(Color.Black)
            }
 
            Row({space: 20}){
              Text('WeiBo' + this.weiboIndex).fontColor(this.weiboColor)
              Text('UniDemo' + this.uniIndex).fontColor(this.uniColor)
              Text('HuaWei' + this.huaweiIndex).fontColor(this.huaweiColor)
            }
 
            Button('开始网络请求 - 异步').fontSize(20).onClick( () => {
                this.weiboColor = Color.Black
                this.uniColor = Color.Black
                this.huaweiColor = Color.Black
                this.weiboIndex = 1
                this.uniIndex = 2
                this.huaweiIndex = 3
                this.asyncGetData()
            })
 
            Button('开始网络请求 - 同步').fontSize(20).onClick( () => {
                this.weiboColor = Color.Black
                this.uniColor = Color.Black
                this.huaweiColor = Color.Black
 
                this.weiboIndex = 1
                this.uniIndex = 2
                this.huaweiIndex = 3
                this.syncGetData()
            })
 
            Button('开始网络请求-自定义方法装饰器').fontSize(20).onClick( () => {
              this.getWeiBoListByController()
            })
 
            Scroll() {
              Text(this.msg).width('100%')
            }
            .scrollable(ScrollDirection.Vertical)
          }
          .width('100%')
          .height('100%')
          .padding({top: px2vp(120)})
        }
 
      }
  }
 
  asyncGetData(){
 
    this.netLoad = 3;
 
    this.TEST_Target_URL.forEach( (value) => {
 
      HNet.get({
        url: value,
      }).then( (r) => {
 
        this.msg = JSON.stringify(r)
 
        if(value.indexOf('weibo') != -1){
          this.weiboColor = Color.Green
          this.weiboIndex = 3 - this.netLoad + 1
        } else if(value.indexOf('unidemo') != -1){
          this.uniColor = Color.Green
          this.uniIndex = 3 - this.netLoad + 1
        } else if(value.indexOf('huawei') != -1){
          this.huaweiColor = Color.Green
          this.huaweiIndex = 3 - this.netLoad + 1
        }
 
        this.netLoad--
 
      })
    })
 
  }
 
  async syncGetData() {
 
    let starTime
    let url
    this.netLoad = 3;
 
    starTime = new Date().getTime()
    url = this.TEST_Target_URL[0]
 
    starTime = new Date().getTime()
    if(url.indexOf('weibo') != -1){
      console.log('顺序-请求-weibo')
    } else if(url.indexOf('unidemo') != -1){
      console.log('顺序-请求-unidemo')
    } else if(url.indexOf('huawei') != -1){
      console.log('顺序-请求-huawei')
    }
 
    await HNet.get<WeiBo>({
      url: url,
    }).then( (r) => {
 
      this.msg = ''
      if(r.code == 0 && r.result){
        r.result.data.statuses.forEach((value: WeiBoItem) => {
          this.msg = this.msg.concat(value.created_at + ' ' + value.id + '\n')
        })
      } else {
        this.msg = r.code + ' ' + r.msg
      }
 
      if(url.indexOf('weibo') != -1){
        this.weiboColor = Color.Green
        this.weiboIndex = 3 - this.netLoad + 1
        console.log('顺序-返回-weibo-' + (new Date().getTime() - starTime))
      } else if(url.indexOf('unidemo') != -1){
        this.uniColor = Color.Green
        this.uniIndex = 3 - this.netLoad + 1
        console.log('顺序-返回-unidemo-' + (new Date().getTime() - starTime))
      } else if(url.indexOf('huawei') != -1){
        this.huaweiColor = Color.Green
        this.huaweiIndex = 3 - this.netLoad + 1
        console.log('顺序-返回-huawei-' + (new Date().getTime() - starTime))
      }
 
      this.netLoad--
 
    })
 
    starTime = new Date().getTime()
    url = this.TEST_Target_URL[1]
 
    starTime = new Date().getTime()
    if(url.indexOf('weibo') != -1){
      console.log('顺序-请求-weibo')
    } else if(url.indexOf('unidemo') != -1){
      console.log('顺序-请求-unidemo')
    } else if(url.indexOf('huawei') != -1){
      console.log('顺序-请求-huawei')
    }
 
    await HNet.get({
      url: url,
    }).then( (r) => {
 
      this.msg = JSON.stringify(r)
 
      if(url.indexOf('weibo') != -1){
        this.weiboColor = Color.Green
        this.weiboIndex = 3 - this.netLoad + 1
        console.log('顺序-返回-weibo-' + (new Date().getTime() - starTime))
      } else if(url.indexOf('unidemo') != -1){
        this.uniColor = Color.Green
        this.uniIndex = 3 - this.netLoad + 1
        console.log('顺序-返回-unidemo-' + (new Date().getTime() - starTime))
      } else if(url.indexOf('huawei') != -1){
        this.huaweiColor = Color.Green
        this.huaweiIndex = 3 - this.netLoad + 1
        console.log('顺序-返回-huawei-' + (new Date().getTime() - starTime))
      }
 
      this.netLoad--
 
    })
 
    starTime = new Date().getTime()
    url = this.TEST_Target_URL[2]
 
    starTime = new Date().getTime()
    if(url.indexOf('weibo') != -1){
      console.log('顺序-请求-weibo')
    } else if(url.indexOf('unidemo') != -1){
      console.log('顺序-请求-unidemo')
    } else if(url.indexOf('huawei') != -1){
      console.log('顺序-请求-huawei')
    }
 
    await HNet.get({
      url: url,
    }).then( (r) => {
 
      this.msg = JSON.stringify(r)
 
      if(url.indexOf('weibo') != -1){
        this.weiboColor = Color.Green
        this.weiboIndex = 3 - this.netLoad + 1
        console.log('顺序-返回-weibo-' + (new Date().getTime() - starTime))
      } else if(url.indexOf('unidemo') != -1){
        this.uniColor = Color.Green
        this.uniIndex = 3 - this.netLoad + 1
        console.log('顺序-返回-unidemo-' + (new Date().getTime() - starTime))
      } else if(url.indexOf('huawei') != -1){
        this.huaweiColor = Color.Green
        this.huaweiIndex = 3 - this.netLoad + 1
        console.log('顺序-返回-huawei-' + (new Date().getTime() - starTime))
      }
 
      this.netLoad--
 
    })
 
  }
 
  getHuaWeiSomeDataByNet(){
 
    this.netLoad = 1
 
    let starTime = new Date().getTime()
 
    console.log('顺序-huawei-请求' + starTime)
 
    HNet.get({
      url: 'https://developer.huawei.com/config/cn/head.json',
    }).then( (r) => {
 
      this.msg = JSON.stringify(r, null, '\t')
 
      this.netLoad--
 
      console.log('顺序-huawei-' + (new Date().getTime() - starTime))
 
    })
 
  }
 
  getWeiBoListByHNet(){
 
    this.netLoad = 1
 
    let starTime = new Date().getTime()
 
    console.log('顺序-weibo-请求' + starTime)
 
    HNet.get<WeiBo>({
      url: 'https://m.weibo.cn/api/feed/trendtop?containerid=102803_ctg1_4188_-_ctg1_4188',
    }).then( (r) => {
 
      this.msg = ''
      if(r.code == 0 && r.result){
        r.result.data.statuses.forEach((value: WeiBoItem) => {
          this.msg = this.msg.concat(value.created_at + ' ' + value.id + '\n')
        })
      } else {
        this.msg = r.code + ' ' + r.msg
      }
      console.log('顺序-weibo-' + (new Date().getTime() - starTime))
 
      this.netLoad--
 
    })
  }
 
  getWeiBoListByController(){
 
    this.netLoad = 1
 
    NetController.getWeiBo<WeiBo>().then( r => {
 
      this.msg = ''
      if(r.code == 0 && r.result){
        r.result.data.statuses.forEach((value: WeiBoItem) => {
          this.msg = this.msg.concat(value.created_at + ' ' + value.id + '\n' + value.source + '\n')
        })
      } else {
        this.msg = r.code + ' ' + r.msg
      }
 
      this.netLoad--
 
    })
  }
 
}    
 
import { Get, NetResponse } from './util/HNet'
 
export default class BizNetController {
 
  @Get('https://m.weibo.cn/api/feed/trendtop?containerid=102803_ctg1_4188_-_ctg1_4188')
  static getWeiBo<WeiBo>(): Promise<NetResponse<WeiBo>>{ return }
 
}    
 
import http from '@ohos.net.http';
 
class NetParams{
  url: string
  extraData?: JSON
}
 
export class NetResponse<T> {
  result: T
  code: number
  msg: string
}
 
class HNet {
 
  static post<T>(options: NetParams): Promise<NetResponse<T>>{
    return this.request(options, http.RequestMethod.POST)
  }
 
  static get<T>(options: NetParams): Promise<NetResponse<T>>{
    return this.request(options, http.RequestMethod.GET)
  }
 
  private static request<T>(options: NetParams, method: http.RequestMethod): Promise<NetResponse<T>>{
 
    let r = http.createHttp()
 
    return r.request(options.url, {
      method: method,
      extraData: options.extraData != null ? JSON.stringify(options.extraData) : null
    }).then( (response: http.HttpResponse) => {
 
      let netResponse = new NetResponse<T>()
 
      let dataType = typeof response.result
 
      if(dataType === 'string'){
         console.log('结果为字符串类型')
      }
 
      if(response.responseCode == 200){
        netResponse.code = 0
        netResponse.msg = 'success'
        netResponse.result = JSON.parse(response.result as string)
 
      } else {
        //出错
        netResponse.code = -1
        netResponse.msg = 'error'
 
      }
 
      return netResponse
 
    }).catch( reject => {
      console.log('结果发生错误')
 
      let netResponse = new NetResponse<T>()
      netResponse.code = reject.code
      netResponse.msg  = reject.message
      return netResponse
 
    }).finally( () => {
       r.destroy()
    })
 
  }
 
}
 
export default HNet
 
export function Get(targetUrl: string) : MethodDecorator {
 
  return (target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor) => {
        //替换方法
        descriptor.value = () => {
           let options = new NetParams()
           options.url = targetUrl
            return HNet.get(options)
        }
  }
 
}
    
 
export class WeiBo{
  ok: number
  http_code: number
  data: WeiBoDataObj
}
 
export class WeiBoDataObj{
  total_number: number
  interval: number
  remind_text: string
  page: number
  statuses: Array<WeiBoItem>
}
 
export class WeiBoItem{
  created_at: string
  id: string
  source: string
  textLength: number
}

最后呢，很多开发朋友不知道需要学习那些鸿蒙技术？鸿蒙开发岗位需要掌握那些核心技术点？为此鸿蒙的开发学习必须要系统性的进行。

而网上有关鸿蒙的开发资料非常的少，假如你想学好鸿蒙的应用开发与系统底层开发。你可以参考这份资料，少走很多弯路，节省没必要的麻烦。由两位前阿里高级研发工程师联合打造的《鸿蒙NEXT星河版OpenHarmony开发文档》里面内容包含了（ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、Harmony南向开发、鸿蒙项目实战等等）鸿蒙（Harmony NEXT）技术知识点

如果你是一名Android、Java、前端等等开发人员，想要转入鸿蒙方向发展。可以直接领取这份资料辅助你的学习。下面是鸿蒙开发的学习路线图。