antd pro中如何使用mock資料以及呼叫介面

antd pro的底層基礎框架使用的是dva，dva採用effect的方式來管理同步化非同步

在dva中主要分為3層 services models components

models層用於存放資料以及對資料進行操作，services層呼叫請求後台介面的方法，components層用於書寫頁面邏輯**

services層

import request from '@/utils/request';

export async function doit(payload) = payload;

let url = `/api/v2/.../$`;

return request(url,)

.then(res => )

.catch(err => console.log(err));

}models層中的effects是與後台互動、處理資料邏輯的地方

import from '../../'

export default ,) })}

}reducers: }) }}

}components層

頁面如果需要使用models層的資料，要用connect進行連線,即在頁面在引入import from 'dva';@connect(state => ()) 通過this.props獲取資料

this.props.dispatch(

})使用mock資料主要包括以下幾步：

1、新增mock介面

2、新增service檔案

3、新增model(需引入service函式)

4、頁面鏈結model

5、頁面呼叫model中的effect函式

6、model中的effects通過reducer中的函式將資料返回到頁面

7、頁面通過this.props獲取資料

具體操作就是在專案根目錄下，mock資料夾中新建record.js檔案，用於存放mock資料

export default
, ,]}}

然後在src目錄下的services資料夾中新建乙個record.js檔案，用來建立請求資料的函式，框架已經為我們封裝好了request函式（可能需要我們對request.js檔案進行補充），我們可以直接進行使用

import request from '../utils/request';
export async 
function
getrecord (payload) )
.then(res =>
.catch(err =>console.log(err))
}

src目錄下的models資料夾是store資料夾，用來定義state

新建record.js檔案

引入我們在services資料夾中建立的請求資料的函式

import  from '../services/record';
export 
default
,　　effects: ) 
});}
},reducers: ) }}}

最後在page頁面中，通過this.props就可以得到我們想要的資料

import  from 'dva';
@connect(state=>()
componentdidmount() = this
.props;
dispatch()
}console.log(
this
.props)就可以得到結果
const = this.props

我的request.js檔案

import fetch from 'dva/fetch';
import from 'antd';
import from '@/utils/error';
const checkstatus = response =>
const errortext = error[response.status] ||response.statustext;
let islogin = response.url.search('/unsecure/login') != -1;
if (response.status === 401) : $`);
} else
} else
: $`);
}} 
return
response;
};export 
default
function
request(url, option) ,
};const newoptions = ;
if( newoptions.method === 'post' ||newoptions.method === 'put' ||newoptions.method === 'delete') ;
if (newoptions.datatype != 'string') 
} else
; }
} return
( fetch(url, newoptions)
.then(checkstatus)
.then(response =>
let type = typeof
response;
switch
(type) 
return
response.json();
}).then(res =>)
.catch(e =>)
);}error.js檔案
export 
default

qt中moc的作用

qt 將源交給標準 c 編譯器，如 gcc 之前，需要事先將這些擴充套件的語法去除掉。完成這一操作的就是 moc。moc 全稱是 meta object compiler，也就是元物件編譯器 qt 程式在交由標準編譯器編譯之前，先要使用 moc 分析 c 原始檔。如果它發現在乙個標頭檔案中包含了...

qt中moc的作用

2012 06 08 14 29 qt 將源交給標準 c 編譯器，如 gcc 之前，需要事先將這些擴充套件的語法去除掉。完成這一操作的就是 moc。moc 全稱是 meta object compiler，也就是元物件編譯器 qt 程式在交由標準編譯器編譯之前，先要使用 moc 分析 c 原始檔...

antd pro中如何使用mock資料以及呼叫介面

qt中moc的作用

qt中moc的作用

qt中moc的作用

相關推薦