非同步問題

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預設屬性是true，表示非同步執行， 如果需要同步請求，則修改成false

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

提高使用者體驗-beforeSend&complete

場      景：在ajax傳送網路請求的時候，使用者重複點選提交按鈕，造成後臺儲存了重複的資料

解決方案：在提交ajax的時候，有全域性事件和區域性事件在執行，詳情檢視ajax-全域性事件，

                beforeSend和complete函式屬於區域性事件。

非同步與同步操作下beforeSend和complete的區別：

        var obj=0;
        $.ajax({
            url:"../data/test.txt",
            contentType:"application/json",
            type:"POST",
            cache:false,
            async:true,
            beforeSend:function(){
                $('#queryForm').hide();
            },
            success:function(result){
                obj=result;
            },
            complete:function(){
            }

        });
        console.log(obj);
    });
}  
 

async：true  這種情況是非同步方式，當ajax傳送請求前，會先執行ajax塊中beforeSend裡面的程式碼，如果beforeSend裡面有Dom的操作，就可以立即對Dom進行渲染，當ajax傳送請求後，在等待server端返回資料的過程中，程式會繼續執行ajax外面的程式碼塊，知道伺服器返回正確的結果才會去執行success方法，因此，在執行success前，Dom隱藏，obj為0

async：flase 這時候ajax請求是同步的，這樣的話，當ajax傳送請求前，回西安之行ajax塊中beforeSend路面的程式碼，如果beforeSend裡面的程式碼有Dom操作，不會立即對Dom渲染，而是等到complete執行完成之後，才會渲染Dom，當ajax傳送請求成功之後，才會執行ajax塊外面的程式碼，因此，在執行完成complete之後，Dom才隱藏，obj=result

可以解決的場景：

1 防止重複資料

// 提交表單資料到後臺處理
$.ajax({
    type: "post",
    data: studentInfo,
    contentType: "application/json",
    url: "/Home/Submit",
    beforeSend: function () {
        // 禁用按鈕防止重複提交
        $("#submit").attr({ disabled: "disabled" });
    },
    success: function (data) {
        if (data == "Success") {
            //清空輸入框
            clearBox();
        }
    },
    complete: function () {
        $("#submit").removeAttr("disabled");
    },
    error: function (data) {
        console.info("error: " + data.responseText);
    }
});

2 模擬Toast效果

ajax請求伺服器載入資料列表的時候顯示loading('載入中，請稍後......')

$.ajax({
    type: "post",
    contentType: "application/json",
    url: "/Home/GetList",
    beforeSend: function () {
        $("loading").show();
    },
    success: function (data) {
        if (data == "Success") {
            // ...
        }
    },
    complete: function () {
        $("loading").hide();
    },
    error: function (data) {
        console.info("error: " + data.responseText);
    }
});