鸿蒙开发HarmonyOS Next 网络框架retrofit 封装 viemodel使用

新手刚开始学习harmonyos开发,之前搞安卓开发习惯使用retrofit,结果在三方库中还真搜到了,然后就模拟学习一下。有不对的地方请指点一下。新手新手

oh-package.json5 引入库

retofit 需要使用2.0.1-rc.0 以上版本,修复了retrofit发送网络请求,响应结果未正常解析的问题。

   "@ohos/retrofit": "2.0.1-rc.0",
   "@ohos/httpclient": "2.0.1-rc.5",

页面使用

@Entry
@Component
struct LoginPage {
  @State viewModel: LoginViewModel = new LoginViewModel()

    .....省略
        Button("登录")
          .width("85%")
          .height(50)
          .margin({ top: 65 })
          .onClick(() => {

            if (StrUtil.isEmpty(this.viewModel.userName)) {
              ToastUtil.showToast("请输入用户名")
              return
            }

            if (StrUtil.isEmpty(this.viewModel.password)) {
              ToastUtil.showToast("请输入密码")
              return
            }
            this.viewModel.getToken()
          })

}

viewmodel使用

@Observed
export class LoginViewModel {
  userName: string = ""
  password: string = ""
 .....省略
  getToken() {
    let params = new Map<string, undefined>()
    params["username"] = this.userName
    params["password"] = this.password

    baseApiRequest<Token>(
      appService.getToken(params),
      (result) => {
        Logger.debug("" + result.accessToken)
      },
        //可选参数,可不传
      {
        onFailed: (error) => {
        }, showLoading: true, loadingStr: "zzzzzzz"
      }
    )
  }
}

定义接口

复制代码
@BasePath("/")
export class AppService extends BaseService {

  @GET("szy/uaa/oauth/token")
  async getToken(@QueryMap params: Map<string, undefined>): Promise<Response<ApiResponse<Token>>> {
    return {} as Response<ApiResponse<Token>>
  }
}

httpclient 拦截器

export class LoggingInterceptor implements Interceptor {
  async intercept(chain: Chain): Promise<Response> {
    try {
      let request = chain.requestI()
      let requestBody: RequestBody = request.body
      let url = request.url as HttpUrl
      const connectResponse = await chain.proceedI(chain.requestI())
      let startMessage = `-->${request.method} ${url.url} ${connectResponse.protocol ?? ''}`
      let contentType: string = requestBody.content
      let endMessage = `--> END ${request.method}`
      LoggerUtils.debug("添加日志拦截器")
      LoggerUtils.debug(`Headers:${JSON.stringify(request.headers)}`)
      LoggerUtils.debug("httpStart = " + startMessage)
      LoggerUtils.debug("contentType = " + contentType)
      LoggerUtils.debug("Response = " + connectResponse.result)
      LoggerUtils.debug("httpEnd = " + endMessage)
      return connectResponse
    } catch (error) {
      LoggerUtils.debug("添加日志拦截器 失败")
      return new Promise<Response>((resolve, reject) => {
        let request = chain.requestI()
        let response = chain.proceedI(request)
        response.then((data) => {
          resolve(data)
        }).catch((err: Error) => {
          reject(err)
        });
      })
    }
  }
}

RetrofitApi.ets简单封装

import { HttpClient, IOException, TimeUnit } from '@ohos/httpclient'
import { Response, ServiceBuilder } from '@ohos/retrofit'
import { ToastUtil } from '@pura/harmony-utils'
import { NetworkConstants } from '../../common/NetworkConstants'
import { ApiResponse } from './ApiResponse'
import { AppService } from './AppService'
import { HeaderInterceptor } from './HeaderInterceptor'
import { LoggingInterceptor } from './LoggingInterceptor'
import { DialogUtils } from '../../common/DialogUtils'

let client: HttpClient = new  HttpClient.Builder()
  .setConnectTimeout(15, TimeUnit.SECONDS)
  .setReadTimeout(15, TimeUnit.SECONDS)
  .addInterceptor(new LoggingInterceptor())
  .addInterceptor(new HeaderInterceptor())
  .build()

export const appService = new ServiceBuilder()
  .setEndpoint(NetworkConstants.BASE_URL)
  .setClient(client)
  .build(AppService)

/**
 * 可选参数
 */
interface ApiParams {
  onFailed?: (error: ResourceStr) => void,
  showLoading?: boolean,
  loadingStr?: string
}

export function baseApiRequest<T>(
  apiCall: Promise<Response<ApiResponse<T>>>,
  onSuccess: (result: T) => void,
  param?: ApiParams,
) {
  if (param?.showLoading) {
    DialogUtils.showLoading(param.loadingStr)
  }
  apiCall.then((result: Response<ApiResponse<T>>) => {
    if (result.isSuccessful() && result.code() == 200 && result.result.success) {
      onSuccess(result.result.data)
    } else {
      ToastUtil.showToast(result.result.message)
      if (param?.onFailed) {
        param.onFailed(result.result.message)
      }
    }
    DialogUtils.dismiss()
  }).catch((error: Error) => {
    if (error as IOException) {
      if (param?.onFailed) {
        param.onFailed('error = ' + error)
      }
    } else {
      if (param?.onFailed) {
        param.onFailed(error.message)
      }
    }
    ToastUtil.showToast(error.message)
    DialogUtils.dismiss()
  })
}
相关推荐
SameX1 小时前
HarmonyOS Next 安全生态构建与展望
前端·harmonyos
Random_index9 小时前
#Uniapp篇:支持纯血鸿蒙&发布&适配&UIUI
uni-app·harmonyos
鸿蒙自习室12 小时前
鸿蒙多线程开发——线程间数据通信对象02
ui·harmonyos·鸿蒙
SuperHeroWu714 小时前
【HarmonyOS】鸿蒙应用接入微博分享
华为·harmonyos·鸿蒙·微博·微博分享·微博sdk集成·sdk集成
zhangjr057517 小时前
【HarmonyOS Next】鸿蒙实用装饰器一览(一)
前端·harmonyos·arkts
诗歌难吟4641 天前
初识ArkUI
harmonyos
SameX1 天前
HarmonyOS Next 设备安全特性深度剖析学习
harmonyos
郭梧悠1 天前
HarmonyOS(57) UI性能优化
ui·性能优化·harmonyos
郝晨妤1 天前
鸿蒙原生应用开发元服务 元服务是什么?和App的关系?(保姆级步骤)
android·ios·华为od·华为·华为云·harmonyos·鸿蒙
Peace*1 天前
HarmonyOs鸿蒙开发实战(16)=>沉浸式效果第一种方案一窗口全屏布局方案
harmonyos·鸿蒙·鸿蒙系统