react项目实战（权限模块开发七）通过ajax技术获取数据

最新推荐文章于 2024-09-10 05:58:51 发布

飞天代码

最新推荐文章于 2024-09-10 05:58:51 发布

阅读量2.3k

点赞数

分类专栏： react项目实战文章标签： react

本文链接：https://blog.csdn.net/weiyongliang_813/article/details/76285668

版权

react项目实战专栏收录该内容

9 篇文章 2 订阅

订阅专栏

react获取数据一般都是通过fetch加上promise的方式来获取，但由于本人对ajax毕竟感情深厚，怎么也的尝试下。

在构造函数中调用加载数据的ajax请求：

 constructor(...props){
    //构造函数 绑定事件
      super(...props);
      [
       '_loadDate'
      ].forEach(func=> {
        this[func] = this[func].bind(this);
      });
    this._loadData();
  }

定义_loadData来获取数据

  _loadData() {
    const { dispatch }=this.props;
    //将ajx请求封装到了QueryCommand 函数中，参数为url 以及请求类型，默认是异步查询
    var queryCommand = new QueryCommand('/go-framework/role/read_all', "post");
    //组装查询参数 并执行查询操作
    queryCommand.executeQuery(queryCommand.getQueryDs(fieldAry),
      function (list) {
        //调用成功后 调用redux的action 来改变state的值。
        dispatch({
          type: 'roleMd/changeData',
          list: list
        });
      });
  }

QueryCommand的代码大概如下：供参考，由于本人的后台数据格式并不是简单的json数据，所以进行了一定的转换。

export class QueryCommand {
  constructor(url, type, async = false) {
    this.url = url;
    this.async = async;
    this.type = type;
  }

  getQueryDs(fileAry) {
    var obj = new Object();
    obj["sessionId"] = 'a24621c7c9d14340bb9adbb3abba9181';
    //设置查询ds
    obj["dataset"] = GoingUtils.getQueryDs(fileAry);
    return obj;
  }

  executeQuery(data, scussfun) {
    console.log(data);
    console.log(this.type)
    $.ajax({
      type: this.type,
      url: this.url,
      async: this.async,
      contentType: "application/x-www-form-urlencoded;charset=UTF-8",
      dataType: "json",
      data: data,
      success: function (data, textStatus) {
        var code = data["code"];
        if (code != 1) {

        } else {
          var result = data["result"];
          var propNames = result["propNames"];
          var data = new Array();
          result["propValues"].map((itemAry, index)=> {
            var itemObj = new Object();
            propNames.forEach((itemEl, index)=> {
              if (itemEl === "id") {
                itemObj["key"] = itemAry[index];
              } else {
                itemObj[itemEl] = itemAry[index];
              }
            })
            data.push(itemObj);
          })
          scussfun(data);
        }

      }
    })
  }
}

reducers里的状态代码：

   changeData(state,action){
      return { ...state, list:action.list}
    },

view层代码就更简单了:

    const propsObjs = this.props;
    var dataSource=propsObjs.roleMd.roleMd.list;
.....
   <Table rowSelection={rowSelection} columns={columns} dataSource={dataSource}/>

界面效果如下：
这里写图片描述