vue的組件化非常方便,可以將一個 頁面分解成多個小組件,每個組件都有自己的狀態和生命周期。使用ajax請求數據也是必不可少的一項技能。在vue中,可以使用axios、fetch等插件進行ajax請求。但是在實際使用中,可能會遇到嵌套ajax請求的情況。
例如,我們需要先請求一個數據,在這個數據的基礎上再請求另一個數據。在普通的代碼編寫中,我們可能會使用callback、promise等方式來解決嵌套請求的問題。但是在vue中,可以使用async/await語法糖來簡化代碼。
async getData() { try { let res1 = await axios.get('/api/data1'); let res2 = await axios.get('/api/data2', { params: { id: res1.id } }); this.data2 = res2; } catch (err) { console.log(err); } }
此處我們定義了一個getData方法,使用async關鍵字來表示這是一個異步方法。在方法中,我們先使用await關鍵字來等待第一個數據的返回結果,再將這個結果中的id作為參數去請求第二個數據。最后將第二個數據賦值給組件的data2屬性。
整個過程非常簡潔,使用async/await的方式可以將嵌套請求的代碼變的清晰易懂。同時也避免了過多的回調、promise等代碼的冗余。但是需要注意的是,在使用async/await時,需要將代碼放到try...catch語句中捕獲錯誤,否則可能會出現未處理的異常。