JS装饰器函数用法总结(5)

日期：2020-05-11 栏目：程序人生 浏览：次

loading

在 React 项目中，我们可能需要在向后台请求数据时，页面出现 loading 动画。这个时候，你就可以使用装饰器，优雅地实现功能。

@autobind
@loadingWrap(true)
async handleSelect(params) {
 await this.props.dispatch({
  type: 'product_list/setQuerypParams',
  querypParams: params
 });
}

loadingWrap 函数如下：、

export function loadingWrap(needHide) {

 const defaultLoading = (
  <div className="toast-loading">
   <Loading className="loading-icon"/>
   <div>加载中...</div>
  </div>
 );

 return function (target, property, descriptor) {
  const raw = descriptor.value;
  
  descriptor.value = function (...args) {
   Toast.info(text || defaultLoading, 0, null, true);
   const res = raw.apply(this, args);
   
   if (needHide) {
    if (get('finally')(res)) {
     res.finally(() => {
      Toast.hide();
     });
    } else {
     Toast.hide();
    }
   }
  };
  return descriptor;
 };
}

问题：这里大家可以想想看，如果我们不希望每次请求数据时都出现 loading，而是要求只要后台请求时间大于 300ms 时，才显示loading，这里需要怎么改？

以上就是本次小编整理的关于JS装饰器的相关知识点，感谢大家对黑区网络的支持。