HarmonyOS 鸿蒙Next 如何在网络请求逻辑中,统一添加自定义的Loading弹窗
HarmonyOS 鸿蒙Next 如何在网络请求逻辑中,统一添加自定义的Loading弹窗 在网络请求逻辑中,怎么去添加自定义的Loading弹窗,有大佬可以给个demo嘛
这个三方库也可以[@jxt%2Fxt_hud](https://ohpm.openharmony.cn/#/cn/detail/)
更多关于HarmonyOS 鸿蒙Next 如何在网络请求逻辑中,统一添加自定义的Loading弹窗的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
大佬,这个支持loading自定义嘛,
注:根据您的要求,原始HTML内容中并未包含任何图片或其他需要转换的元素,因此转换后的Markdown文档仅保留了纯文本内容。
支持的,HUD 均有默认样式,也均支持自定义样式,且 Loading 和 Progress 的 text 可以不显示。
参考demo
import LoadingDialog from '@lyb/loading-dialog'
export class RequestLoading {
constructor() {
this.initLoading()
}
public initLoading() {
// 配置全局参数
LoadingDialog.setGlobalSettings(setting => {
// setting.tintColor = Color.Black
// setting.textColor = Color.Black
// setting.backgroundColor = Color.Transparent
})
}
public showLoading() {
LoadingDialog.showLoading({ msg: '加载中...' })
}
public hideLoading() {
LoadingDialog.hide()
}
}
const loadingInstance:RequestLoading = new RequestLoading()
//AxiosRequest.ets
//AxiosRequest.ets
import {AxiosHttpRequest,errorHandler} from './AxiosHttp'
import { AxiosError, AxiosRequestHeaders, AxiosResponse } from '@ohos/axios';
import { BusinessError } from '@kit.BasicServicesKit';
import { RequestLoading } from '../requestLoading/RequestLoading';
const axiosClient = new AxiosHttpRequest({
baseURL: "/api",
timeout: 10 * 1000,
checkResultCode: false,
headers: {
'Content-Type': 'application/json'
} as AxiosRequestHeaders,
interceptorHooks: {
requestInterceptor: async (config) => {
// 在发送请求之前做一些处理,例如打印请求信息
axiosClient.config.showLoading = config.showLoading
if (config.showLoading) {
loadingInstance.showLoading()
}
if (config.checkLoginState) {
// let hasLogin = await StorageUtils.get(StorageKeys.USER_LOGIN, false)
// LogUtils.debug('网络请求Request 登录状态校验>>> ', `${hasLogin.toString()}`);
// if (hasLogin) {
// return config
// } else {
// if (config.needJumpToLogin) {
// Router.push(RoutePath.TestPage)
// }
// throw new AxiosError("请登录")
// }
}
return config;
},
requestInterceptorCatch: (err:BusinessError) => {
if (axiosClient.config.showLoading) {
loadingInstance.hideLoading()
}
return err;
},
responseInterceptor: (response:AxiosResponse) => {
//优先执行自己的请求响应拦截器,在执行通用请求request的
if (axiosClient.config.showLoading) {
loadingInstance.hideLoading()
}
if(response.data.Response?.Result?.token) {
AppStorage.setOrCreate('token',response.data.Response?.Result?.token)
}
// LogUtils.debug('网络请求响应Response:', `\n${JsonUtils.stringify(response.data)}`);
if (response.status === 200) {
return Promise.resolve(response.data);
} else {
return Promise.reject(response);
}
},
responseInterceptorCatch: (error:BusinessError) => {
if (axiosClient.config.showLoading) {
loadingInstance.hideLoading()
}
// LogUtils.error("网络请求响应异常", error.toString())
errorHandler(error);
return Promise.reject(error);
},
}
});
export default axiosClient;
在HarmonyOS鸿蒙Next系统中,若要在网络请求逻辑中统一添加自定义的Loading弹窗,可以通过以下步骤实现:
-
定义Loading弹窗组件:首先,在资源文件中定义Loading弹窗的UI组件,包括布局和样式。这通常涉及XML布局文件的编写。
-
创建Loading弹窗管理类:编写一个管理类,用于控制Loading弹窗的显示和隐藏。这个类可以封装弹窗的实例化、显示和隐藏逻辑。
-
网络请求封装:在网络请求的逻辑中,调用Loading弹窗管理类的显示方法,在请求开始前显示弹窗;请求完成后,无论成功或失败,都调用隐藏方法隐藏弹窗。
-
异步处理:由于网络请求是异步的,确保Loading弹窗的显示和隐藏操作也在异步逻辑中正确处理,以避免UI线程阻塞。
-
全局应用:将网络请求逻辑封装成一个通用的方法或类,并在整个应用中统一使用,以确保所有网络请求都能自动显示和隐藏Loading弹窗。
通过以上步骤,你可以在HarmonyOS鸿蒙Next系统中实现网络请求时统一添加自定义的Loading弹窗。如果问题依旧没法解决请联系官网客服,官网地址是:https://www.itying.com/category-93-b0.html