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

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}/>

界面效果如下：