ant-design-pro开发说明 --数据请求

最新推荐文章于 2025-10-12 11:06:59 发布

原创

最新推荐文章于 2025-10-12 11:06:59 发布 · 4.0k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #react #dva #ant-design-pro

ant-design-pro开发中，数据请求通常在src/page/list/basiclist.js文件中通过dispatch发起model的action。请求处理位于src/models/list.js的effects方法，这里可以调用services进行异步操作。fetch已经被封装，只需传参调用对应API。异步数据更新state后，会触发已连接的容器组件重新渲染，数据通过this.props.namespace.data获取。

ant-design-pro开发说明 --数据请求

数据请求：

我们由src/page/list/basiclist.js文件为例：
由dispatch发起model的里action请求：

handleSubmit = e => {
    e.preventDefault();
    const { dispatch, form } = this.props;
    const { current } = this.state;
    const id = current ? current.id : '';

    setTimeout(() => this.addBtn.blur(), 0);
    form.validateFields((err, fieldsValue) => {
      if (err) return;
      this.setState({
        done: true,
      });
      //触发action的相关model层的state初始化
      dispatch({
        type: 'list/submit',
        //携带参数传递给后端
        payload: { id, ...fieldsValue },
      });
    });
  };

  deleteItem = id => {
    const { dispatch } = this.props;
    dispatch({
      type: 'list/submit',
      payload: { id },
    });
  };

进入src/models/list.js文件中调用model的effects方法(相当于redux的middleware)，在effects里面可以调用services方法进行异步请求；
effects 用于处理异步操作，不能直接修改 state，由 action 触发，也可触发 act