在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);
<span class="token punctuation">.<span class="token punctuation">.<span class="token punctuation">.
}
在調用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){
<span class="token keyword"><span class="hljs-keyword">await</span> <span class="token keyword"><span class="hljs-keyword">this</span><span class="token punctuation">.<span class="token function">getSheduleInfoFn<span class="token punctuation">(<span class="token punctuation">)<span class="token punctuation">;
<span class="token comment"><span class="hljs-comment">// 執行其它操作</span>
}
這樣我們可以等待數據返回成功後，執行其它操作了
總結
本文簡單的介紹瞭如何使用ES7的異步特性async / await來實現axios進行同步請求了。
轉載於：https://www.jianshu.com/p/93f011981a47