HarmonyOS 网络请求loading？

Question

网络请求框架中统一处理loading显示或隐藏

Answer 1

参考demo

“@lyb/loading-dialog”: “^2.0.0”,

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()
  }
}

//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 loadingInstance:RequestLoading = new RequestLoading()

/**
 * axios请求客户端创建
 */
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;