async await 初步學習

最近項目涉及到一個需求，兩個異步請求，第二個請求須要等到第一個異步請求裏的數據返回後才能發送，因而這裏初步用到了async / await 。如今記錄下

async/await 語法能夠更溫馨的與promise協同工做。

async 被放置在一個函數的前面（函數前面的async一詞意味着這個函數老是返回一個promise，若是代碼中有return <非promise>語句，JavaScript會自動把返回的這個value值包裝成promise的resolved值。）

 

async function f() {
　　return 1

}

console.log(32,f()) // 返回的是一個Promise對象

 關鍵詞await可讓JavaScript進行等待，直到一個promise執行並返回它的結果，JavaScript纔會繼續往下執行。

 

// 只能在async函數內部使用
let value = await promise

async function f() { let promise = new Promise((resolve, reject) => { setTimeout(() => resolve('done!'), 1000) }) let result = await promise // 直到promise返回一個resolve值（*） alert(result) // 'done!' } f()

 

await 字面上使得JavaScript等待，直到promise處理完成，

這裏再加入一個新用上的知識點  try / catch 

若是一個promise正常resolve，那麼 await 返回這個結果，可是在reject的狀況下會拋出一個錯誤，就好像在那一行有一個throw語句同樣。

在真實的使用場景中，promise在reject拋出錯誤以前可能須要一段時間，因此 await 將會等待，而後才拋出一個錯誤。
咱們可使用try-catch語句捕獲錯誤，就像在正常拋出中處理異常同樣：

async function f() {
    try {
        let response = await fetch('http://no-such-url')
    } catch (err) {
        alet(err) // TypeError: failed to fetch
    }
}
f()

 

若是咱們不使用try-catch，而後async函數f()的調用產生的promise變成reject狀態的話，咱們能夠添加.catch去處理它：

 

async function f() {
    let response = await fetch('http://no-such-url')
}
// f()變成了一個rejected的promise
f().catch(alert) // TypeError: failed to fetch

 

 

 

放在一個函數前的async有兩個做用：
1.使函數老是返回一個promise
2.容許在這其中使用await

promise前面的await關鍵字可以使JavaScript等待，直到promise處理結束。而後：

1.若是它是一個錯誤，異常就產生了，就像在那個地方調用了throw error同樣。
2.不然，它會返回一個結果，咱們能夠將它分配給一個值

 

該資源來自於https://segmentfault.com/a/1190000013292562?utm_source=channel-newest