vue中使用async和await處理異步

寫項目經常碰到先進性一個axios請求，然後在進行下一個axios請求，但是此次的請求需要，用到上一次請求返回來的參數，因爲axios是異步的，所以可以axios請求嵌套獲取，但當數據多的時候，頁面會非常的亂，此時就需要用到async和await的使用，使上述情況就好像寫同步代碼一樣，請看例子
這是兩個axios請求的函數

//第一個
function axiosOne(){
returen axios.get(url)
};
var dataOne = {  //這裏dataOne假如是 axiosOne請求回來的數據
        msg:"成功"
        code：0
 }
//第二個
function axiosTwo(params){
returen axios.get(url,{params})
 }
var dataTwo = [    //這裏dataTwo 假如是 axiosTwo請求回來的數據
 {  
     name:"朱康宇"
     age：23 
 }
]

我們第二個請求獲取列表的時候需要使用第一個請求得到的code值，當做參數傳進去，那麼我們看一下常規的做法吧

function data() {
	dataOne().then(res => {
		//這裏是成功請求了axiosOne返回一個dataOne 的JSON對象
		//在這之後再去請求axiosTwo
		let params = res.code
		axiosTwo(params).then(res => {
		//這裏返回的就是axiosTwo返回一個dataTwo 的JSON對象
		//這是最原生的寫法 ，一旦數據過多，代碼就變得不清晰
		})
	})
}
data();

下面我們用es6中新的特性 asyns和await來寫，注意：await的使用需要在asyns的函數內部去使用否則會報錯

async function data() {
	let codes = await axiosOne(); //這裏的codes 就是請求axiosOne的返回JSON對象也就是dataOne
	let params = codes.code
	let lists = await axiosTwo(); //這裏的lists 就是請求axiosTwo的返回JSON對象也就是dataTwo
}
data()  
//這樣寫是不是就簡單多了，即使數據多，代碼也很清晰

當然還剩最後一點，處理異常，可以加上try catch

async function data() {
   try{
	let codes = await axiosOne(); //這裏的codes 就是請求axiosOne的返回JSON對象也就是dataOne
	let params = codes.code
	let lists = await axiosTwo(); //這裏的lists 就是請求axiosTwo的返回JSON對象也就是dataTwo
	}catch(err){
	console.log(err);
   }
}

做vue項目的時候，如果對於異常沒有特殊處理，可以不加try catch
在這裏簡單解釋一下爲什麼這樣寫，異步的請求，變成了同步的代碼

• 首先在函數面前聲明一個async 說明這個函數是一個異步函數
• 帶async關鍵字的函數，它使得你函數的返回值必定是promise對象
• 當走到函數前邊帶有聲明的await函數時 ，await會等待右側表達式的結果，也就是說，右側如果是函數，name函數的return值就是—表達式的結果；右側如果是一個’hello’或者什麼值，那表達式的結果就是’hello’
• 這裏注意，一般await關鍵字要在async關鍵字函數的內部，await寫在外面會報錯。文章開始也提到了