DVA框架統一處理所有頁面的loading狀態

2021-09-07 14:27:53 字數 1760 閱讀 4114

dva 有乙個管理 effects 執行的 hook,並基於此封裝了 dva-loading 外掛程式。通過這個外掛程式,我們可以不必一遍遍地寫 showloading 和 hideloading,當發起請求時,外掛程式會自動設定資料裡的 loading 狀態為 true 或 false 。然後我們在渲染 components 時繫結並根據這個資料進行渲染。

dva-loading的使用非常簡單,在index.js中加入:

//

2. plugins

如何只做一次狀態處理,每次請求期間都會觸發loading狀態呢,其實也很簡單啦,因為dva-loading提供了乙個global屬性。

loading物件中的global屬性表示的全域性loading狀態,models裡是每個model的loading狀態

所以我們根據state.loading.global指示全域性loading狀態。

我們要向所有頁面應用這個loading狀態,那麼我們可以在每個頁面中使用乙個父級元件來處理這個loading。上**:

import react from 'react';

import from 'dva';

import from 'antd-mobile';

const timer = 800;

let timeoutid = null

; state =

componentwillmount() = this

.props;

if(loading) );

}, timer);}}

componentwillreceiveprops(nextprops) =nextprops;

const = this

.state;

this

.setstate();

if(loading) );

}, timer);}}

componentwillunmount()

}render() = this

.props;

const = this

.state;

return

(

this.props.classname}>

); }

}const mapstatetoprops = (state, ownprops) =>

};export

說明:1、是ant-design mobile的乙個loading指示元件,animating屬性指示顯示與否,我們使用show和loading兩個屬性來控制顯示與否。

2、為什麼要show和loading兩個引數,有個loading不就可以了嗎?show的存在是為了實現乙個需求:loading在請求發生的timer時間後出現,如果請求很快,小於timer時間,那麼就不顯示loading。如果沒有這個需求,這個元件中可以只保留render()方法。

3、&& !state.loading.models.verify這個是做什麼的?這個的作用是排除verify這個model對loading的影響,比如我不想在這個model對應的頁面出現loading,可以在這裡處理。

有了這個父級元件,那麼在每個頁面中加入這個父級元件,就可以實現loading,當然這個是可以在router.js中統一處理一下的。

比如:}>

4、over

統一處理異常

1.controlleradvice 註解定義全域性異常處理類 controlleradvice public class globalexceptionhandler 2.exceptionhandler 註解宣告異常處理方法,註解的方法的引數列表裡,還可以宣告很多種型別的引數 controlle...

Web應用架構 錯誤統一處理, 和事務統一處理

因為前期,重點放在業務分析上,這兩塊一直認真思考過,覺得很簡單.一開始只是找了乙個nhibernate的示例,就決定把session的open和close和事務 transaction 的commit,放在httpmodule中處理.算是session per request的模式.之後,繼續加入錯...

Web應用架構 錯誤統一處理, 和事務統一處理

因為前期,重點放在業務分析上,這兩塊一直認真思考過,覺得很簡單.一開始只是找了乙個nhibernate的示例,就決定把session的open和close和事務 transaction 的commit,放在httpmodule中處理.算是session per request的模式.之後,繼續加入錯...