关于本人ant design pro2.0项目与后端接口交互的一些问题

对于ant design pro2.0项目本人遇到的问题

我原来从来没有用过ant design pro做过项目，下面是我总结我遇到的最棘手的问题，这个问题我之前也上网找了好几天，也求助了网友，结果始终没有人回应，索性就自己研究起来，这个问题就是首次加载页面network里面没有发送请求，必须重新刷新一次页面才会有请求这就导致页面初次加载的时候不会渲染数据，身为一点都没接触过这个技术的小白我来说，头破发麻，但是最后还是解决了这个问题

来点干货！！

在models下的 rule.js中是这样写的

export default {
namespace: 'index',

  state: {
    data: {
      list: [],
      pagination: {},
    },
  },
  effects: {
    *fetch({ payload, callback }, { call, put }) {
    const response = yield call(fetch, payload);
    yield put({
      type: 'save',
      payload: response,
    });
    if (callback) callback(response);
    },
  }
  reducers: {
    save(state, action) {
    
    	// 这里是从接口返回的数据，并把它暴露出去，在页面中可以通过connect连接来获取(下面会提到)
    	
      return {
        ...state,
        data: action.payload, 
      };
    },
  },
}

在services下的 api.js 中是这样发送请求的

export async function fetch(params) {
  return request('这里是请求的地址', {
    method: 'POST',
    data: params,
  });
}

下面这个图就是我所遇到的问题的关键点（拿小本本记好！！！）
就是在models里的rule.js必须是唯一的，也就是说一个页面必须对应一个rule.js（这个文件名字随你）,比如你另一个页面也需要发送请求，这样的话就在models文件夹下新建一个xxx.js文件，按照上一个rule.js的书写形式来写就可以了，一定要把在我圈起来的字段改了，我说的唯一就是它，它必须是唯一的

在页面中

import React, { PureComponent } from 'react';
// 这里connect是用来引入请求接口的
import { connect } from 'dva';

// 这块是使用connt获取models下的rule里面的请求方法的应该
// 下面才可以用rule/fetch来发送请求 不知道理解对不对
@connect(({ rule }) => ({
  rule,
}))
class Test extends PureComponent {
	state = {
		info: '', // 这里用来初始化值
	}
		// 这个函数是在页面渲染之前调用
	  componentDidMount() {
	    const { dispatch } = this.props
	    dispatch({
	    
	     // 这个rule就是之前models下rule.js文件里面 namespace: 'index', 这个名字
	     // fetch的话还是models下rule.js文件里面发送请求的*fetch函数
	     
	      type: 'index/fetch',  
	      
	      // pauload是给后端同学的参数
	      
	      payload: {
	        pid: 100000,
	      },
	      callback: res => {
	        // console.log(res);
	        
	        // 这里将返回的数据重新赋值给info
	        this.setState({
	          info: res.data.info
	        })
	      }
	    })
	  }
	  
	  ...中间代码省略....
	  
	    render() {
	    
	    	// 这是把刚赋值完的info拿下来准备渲染，不明白的去看react生命周期，我也在学习中...
	    	const { info } = this.state  
	    	
			return(
				<div>
					<p>{info}</p>  // 这样就可以成功的渲染了
				</div>
			)
	}
}
  

这样就解决了页面首页加载不会渲染数据并且不会发送请求的问题

由于我这个人比较懒，我刚把项目关了，不想启动，所以大家就凑合看吧，如果有什么错误的话，希望大家提提意见

以后我会持续更新在开发中遇到的其他问题，今天就先到这儿吧，希望对遇到同样问题的小白有所帮助