Ant Design Pro 中的服務端互動

在 ant design pro 中，乙個完整的前端 ui 互動到服務端處理流程是這樣的：

ui 元件互動操作；

呼叫 model 的 effect；

呼叫統一管理的 service 請求函式；

使用封裝的 request.js 傳送請求；

獲取服務端返回；

然後呼叫 reducer 改變 state；

更新 model

統一的請求處理都放在services資料夾中，並且一般按照 model 維度進行拆分檔案

services/user.js

api.js
...

其中，utils/request.js是基於 fetch 的封裝，便於統一處理 post，get 等請求引數，請求頭，以及錯誤提示資訊等。具體可以參看 request.js。

例如在 services 中的乙個請求使用者資訊的例子：

//

services/user.js
import request from '../utils/request';
export async 
function
query() 
export async 
function
querycurrent() 
//models/user.js
import from '../services/user';
...effects: , ) ,
}

在處理複雜的非同步請求的時候，很容易讓邏輯混亂，陷入巢狀陷阱，所以 ant design pro 的底層基礎框架 dva 使用effect的方式來管理同步化非同步請求：

effects: , ) );

//非同步請求 1
const response =yield call(queryfakelist, payload);
yield put();
//非同步請求 2
const response2 =yield call(queryfakelist2, payload);
yield put();
yield put();
},},

ant design pro中可控的篩選和排序

created by hao.cheng on 2017 4 15.import react from react import from antd const data class sorttable extends react.component handlechange pagination,...

ant design pro最常用的元件Table

前段開發心得體會 基於react 開發的 import from antd 從 ant design 中引入table元件 沒有 key 值 對應 解決辦法 rowkey bordered 邊框 loading columns 表頭 datasource 表資料 pagination 頁尾 rows...

AntDesignPro的許可權控制和動態路由

最近看了antdesignpro關於許可權控制的官方文件以及自己框架裡許可權控制的實現，總結一下。先貼一下官網上關於許可權控制的圖有利於理解 步驟如下 判斷是否有accesstoken如果沒有則跳轉到登入頁面 獲取使用者資訊和擁有許可權store.dispatch getinfo 使用者資訊獲取成功...