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

2022-02-26 09:43:10 字數 2880 閱讀 3047

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 原始檔...

qt中moc的作用

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