HarmonyOS 鸿蒙Next窥探网络请求

介绍

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

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

场景设定

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

官方网络请求案例

注意:

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

官方指南

API手册

关于 [@ohos](/user/ohos).net.http 有三个request方法

1. request(url: string, callback: AsyncCallback): void;

   • 1.1 如下“官方指南代码缩减版”使用到了这个方法

2. request(url: string, options: HttpRequestOptions, callback: AsyncCallback): void;

   • 2.1 如下“官方指南代码” 使用了这个方法

3. request(url: string, options?: HttpRequestOptions): Promise;

   • 3.1 将在后续实践代码中使用到

场景布局

简单调封装网络请求

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

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

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

网络请求样例

按照业务定义传参

封装的网络请求代码

完整代码

代码结构

• net/BasePage.ets
• net/NetRequest.ets
• net/util/HNet.ts
• net/viewmodel/WeiBoModel.ts
• net/BizNetController.ets

详细代码

@BuilderParam 装饰器作用，先定义基础页面

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

@Component
export struct BasePage {
  @Prop netLoad: boolean

  [@BuilderParam](/user/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'

@Component
@Entry
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)})
        }

      }
  }

}

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

//引用封装好的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](/user/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)
        }
  }

}

定义数据结构

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
}