鸿蒙开发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()
  })
}