HarmonyOS 鸿蒙Next 如何在网络请求逻辑中,统一添加自定义的Loading弹窗

HarmonyOS 鸿蒙Next 如何在网络请求逻辑中,统一添加自定义的Loading弹窗 在网络请求逻辑中,怎么去添加自定义的Loading弹窗,有大佬可以给个demo嘛

5 回复

这个三方库也可以[@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弹窗,可以通过以下步骤实现:

  1. 定义Loading弹窗组件:首先,在资源文件中定义Loading弹窗的UI组件,包括布局和样式。这通常涉及XML布局文件的编写。

  2. 创建Loading弹窗管理类:编写一个管理类,用于控制Loading弹窗的显示和隐藏。这个类可以封装弹窗的实例化、显示和隐藏逻辑。

  3. 网络请求封装:在网络请求的逻辑中,调用Loading弹窗管理类的显示方法,在请求开始前显示弹窗;请求完成后,无论成功或失败,都调用隐藏方法隐藏弹窗。

  4. 异步处理:由于网络请求是异步的,确保Loading弹窗的显示和隐藏操作也在异步逻辑中正确处理,以避免UI线程阻塞。

  5. 全局应用:将网络请求逻辑封装成一个通用的方法或类,并在整个应用中统一使用,以确保所有网络请求都能自动显示和隐藏Loading弹窗。

通过以上步骤,你可以在HarmonyOS鸿蒙Next系统中实现网络请求时统一添加自定义的Loading弹窗。如果问题依旧没法解决请联系官网客服,官网地址是:https://www.itying.com/category-93-b0.html

回到顶部