1. 程式人生 > >React中Ajax非同步解決小技巧

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