[TOC] 說明： ~~~ 1. dva已將請求封裝過直接調用即可,封裝的為不跨域請求，如需跨域需改造 ~~~ ### 1. 頁面中使用 ~~~ //src>routes>indexpages.js import React from 'react'; import { connect } from 'dva'; import styles from './IndexPage.css'; function IndexPage(props) { console.log(props.list) return ( <div className={styles.normal}> hello </div> ); } //connect用于連接models和組件 export default connect(({ example }) => { return { //接收models的state中的數據 list: example.list, } })(IndexPage); ~~~ ### 2. 創建相應的數據請求 ~~~ //src>services>example.js import request from '../utils/request'; export function query() { return request('https://www.easy-mock.com/mock/5bac6e450132334db716717d/test/test'); //get 不跨域的情況 /* return request(`接口地址`,{ method: 'post', headers: { 'Content-Type': 'application/json; charset=utf-8' }, body: JSON.stringify({ 參數名：參數 }) }) */ } ~~~ ### 3. 將創建的請求引入到models下的文件中（重點） ~~~ //引入并給services>example.js中要返回的函數取個別名， import * as querys from '../services/example'; export default { namespace: 'example', state: { list: '', }, //第一步 subscriptions: { setup({ dispatch, history }) { //監聽路由變化，根據不同的路由調用不同的effects中的事件，再通過put調用reducers中的事件，從而更新state return history.listen(({ pathname }) => { if (pathname === '/') { dispatch({ type: 'fetch' }); } }); }, }, //第二步 effects: { *fetch({ payload }, { call, put }) { // eslint-disable-line //調用引入的數據請求函數 const result = yield call(querys.query);//如果使用 {參數} ，則是一個對象 yield put({ type: 'save' , payload:{ list: result.data //網絡返回的要保留的數據 }}); }, }, //第三步 reducers: { save(state, action) { console.log('save') return { ...state, ...action.payload }; }, }, }; ~~~