vue中使用async和await處理非同步

2021-10-06 13:28:23 字數 956 閱讀 9837

寫專案經常碰到先進性乙個axios請求,然後在進行下乙個axios請求,但是此次的請求需要,用到上一次請求返回來的引數,因為axios是非同步的,所以可以axios請求巢狀獲取,但當資料多的時候,頁面會非常的亂,此時就需要用到async和await的使用,使上述情況就好像寫同步**一樣,請看例子

這是兩個axios請求的函式

//第乙個

function

axiosone()

;var dataone =

//第二個

function

axiostwo

(params))}

var datatwo =

[//這裡datatwo 假如是 axiostwo請求回來的資料

]

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

function

data()

)})}

data()

;

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

async

function

data()

data()

//這樣寫是不是就簡單多了,即使資料多,**也很清晰

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

async

function

data()

catch

(err)

}

做vue專案的時候,如果對於異常沒有特殊處理,可以不加try catch

在這裡簡單解釋一下為什麼這樣寫,非同步的請求,變成了同步的**

ES7中的非同步async和非同步等待await

非同步async和非同步等待await是什麼?非同步async做為乙個程式猿大家一般都接觸過,知道是什麼意思。而在這裡async主要是用於申請乙個function函式是非同步的!非同步等待await是 async wait 的簡寫,await 只能出現在 async 函式中,一定要注意不能直接呼叫。...

Spring中使用 Async非同步呼叫方法

非同步方法呼叫使用場景 處理日誌 傳送郵件 簡訊.spring中提供了 async來實現非同步方法。async修飾類,則該類所有方法都是非同步的,async修飾方法,則該方法是非同步的。被修飾的方法在被呼叫時,會在乙個新的執行緒中執行。asynctask類 component public clas...

async和await的使用

async其實是es7的才有的,是非同步操作的進化,其實就是封裝乙個promise的物件返回 async function test console.log test promiseasync方法在普通的函式前加上 async 關鍵字即可。執行這個函式,發現並沒有返回1111,而是通過promise...