在vue項目中我們經常會使用axios來與后台進行數據傳輸，異步請求可以改善用戶體驗。但是在某些特殊情況，我們依然需要使用同步請求來實現交互。本文將講解如何在vue項目中使用axios實現同步問題分析我們知道，在傳統的ajax方法中，我們可以使用參數async設置為false來表示同步請求
$.ajax({ type : "POST", //請求方式 async: false, // fasle表示同步請求，true表示異步請求 contentType: "application/json;charset=UTF-8", //請求的媒體類型 url : "http://127.0.0.1/admin/list/",//請求地址 data : JSON.stringify(list), //數據，json字符串 success : function(result) { //請求成功 console.log(result); }, error : function(e){ //請求失敗，包含具體的錯誤信息 console.log(e.status); console.log(e.responseText); } }); 但是在axios的文檔中，並沒有找到類似的參數。因此單純的通過axios是實現不了同步數據交互。
在瀏覽了其它博客后，了解到ES7的異步特性async / await，async修飾的異步方法，需要等待await修飾的語句執行完畢。這跟我們想要的同步請求效果一樣，在執行完A事件，並成功返回后，才會去執行B事件。
還有一種方法就是在vue項目中安裝jquery,使用jquery的async屬性，但是不太推薦。
ES7的異步特性async / await
async用於申明一個函數是異步的，await等待異步請求完成，await只能在async方法中使用。
var fun1 = async function(){ await axios.get(url,params); ... } 在調用fun1的方法中我們需要修飾為async異步方法，並且await修飾fun1方法。
var fun2 = async function(){ await fun1(); } 在Vue項目中實現
getInfoFn: async function(){ var that = this; await that.$api.scheduleApi.queryScheduleInfoFn( {caseNo: that.basicInfo.caseNo}).then(function (response) { if(response.data.code == '200') { var result = response.data.result; } }); }, // 調用getInfoFn()也需要修飾為異步 changeConfigFn: async function(config){ await this.getSheduleInfoFn(); // 執行其它操作 } 這樣我們可以等待數據返回成功后，執行其它操作了
總結
本文簡單的介紹了如何使用ES7的異步特性async / await來實現axios進行同步請求了。