React中Ajax异步解决小技巧

1.设置 setTimeout定时器，通过延迟下一操作的执行时间，来解决ajax网络请求和下一操作异步的冲突（注意：时长的设置要大于等于网络请求的执行时间），代码如下

// 定义状态机    constructor(props, context) {        super(props, context);        this.state = {            content:null        }    }//网络请求方法Add = () => {      var formData = new FormData($("#userForm")[0]);  // 定位到userForm表单，并将表单定位转为FormData对象      $.ajax({        url: '/add',   //网络请求url地址        type: 'POST',        data: formData, //表单数据        cache: false,        contentType: false,  //或者 contentType:multipart/form-data均可以，multipart/form-data表示可以上传下载文件（既可以发送文本数据，也支持二进制数据上载），表明传输的数据要用到多媒体传输协议，由于多媒体传输的都是大量的数据，所以规定上传文件必须是post方法；contentType默认为application/x-www-form-urlencoded不能上传文件        processData: false,        success: function (data) {          console.log('成功'); this.setState({content:'修改成功'})       }.bind(this),        error: function (xhr, status, err) {        }.bind(this)      });    }  //执行操作this.add();setTimeout(() => {               if(this.state.content=='修改成功'){alert('修改成功')}else{alert('修改失败')}            }, 1000);//如果不加1秒定时延迟，会直接进行判断，即未等网络请求结束便进行了判断

2.设置 ajax中参数async的属性

• async：要求为Boolean类型的参数，默认设置为true，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为false。注意，同步请求将锁住浏览器，用户其他操作必须等待请求完成才可以执行。
  
• 通过该方式解决1中的异步问题，加上async:false, 代码如下

/ 定义状态机    constructor(props, context) {        super(props, context);        this.state = {            content:null        }    }//网络请求方法Add = () => {      var formData = new FormData($("#userForm")[0]);  // 定位到userForm表单，并将表单定位转为FormData对象      $.ajax({        url: '/add',   //网络请求url地址        type: 'POST',        data: formData, //表单数据   async:false,       cache: false,        contentType: false,  //或者 contentType:multipart/form-data均可以，multipart/form-data表示可以上传下载文件（既可以发送文本数据，也支持二进制数据上载），表明传输的数据要用到多媒体传输协议，由于多媒体传输的都是大量的数据，所以规定上传文件必须是post方法；contentType默认为application/x-www-form-urlencoded不能上传文件        processData: false,        success: function (data) {          console.log('成功'); this.setState({content:'修改成功'})       }.bind(this),        error: function (xhr, status, err) {        }.bind(this)      });    }  //执行操作this.add();if(this.state.content=='修改成功'){alert('修改成功')}else{alert('修改失败')}