网站开发技术概况响应式网站国内外现状

新手刚开始学习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.userNameparams["password"] = this.passwordbaseApiRequest<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.bodylet url = request.url as HttpUrlconst connectResponse = await chain.proceedI(chain.requestI())let startMessage = `-->${request.method} ${url.url} ${connectResponse.protocol ?? ''}`let contentType: string = requestBody.contentlet 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()})
}