[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 }; }, }, }; ~~~