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('修改失败')}