React中Ajax非同步解決小技巧
阿新 • • 發佈:2018-12-29
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('修改失敗')}