20170610-async、await與Promise

OnlyLing 發布于2019-08-21 11:42 / 1417人閱讀

摘要：所有函數都會隱式返回一個，而的完成值將是函數的返回值本例中是。意味著調用會一直等待，直到完成并打印出它的值。調試最后但是同樣重要的是，在使用時，一個殺手級優勢是調試更容易。引用資料的完勝的六個理由函數的含義和用法

async和await

async/await是一種編寫異步代碼的新方法，之前編寫異步代碼的方案是回調和promise

async/await實際上是建立在promise的基礎上，它不能與普通回調或者node回調一起用

async/await像promise一樣，也是非阻塞的

async/await讓異步代碼看起來、表現起來更像同步代碼，這正是其威力所在

語法(對比promise)

假設函數getJSON返回一個promise，而該promise的完成值是一個JSON對象，我們只想調用它，并輸出該JSON，然后返回“done”

promise的實現

const makeRequest = ()=>{
    getJSON().then(
        data => {
            console.log(data)
            return "done"
        }
    )
}

makeRequest()

async、await的實現

const makeRequest = async ()=>{
    console.log(await get.JSON())
    return "down"
}
makeRequest()

async、await與Promise的區別

函數前面有一個關鍵字 async。await 關鍵字只用在用 async 定義的函數內。所有 async 函數都會隱式返回一個 promise，而 promise 的完成值將是函數的返回值（本例中是 "done"）。

上面一點暗示我們不能在代碼的頂層用 await，因為這樣就不是在 async 函數內。

await getJSON() 意味著 console.log 調用會一直等待，直到 getJSON() promise 完成并打印出它的值。

async/await的優勢 簡潔干凈

我們不必寫 .then，創建一個匿名函數來處理響應，或者給不需要用的變量一個名稱 data。我們還避免了代碼嵌套。這些小小的優勢會快速累積起來，在后面的代碼中會變得更明顯。

錯誤處理

async/await 會最終讓我們用同樣的結構（ try/catch）處理同步和異步代碼變成可能。在下面使用 promise 的示例中，如果 JSON.parse 失敗的話，try/catch 就不會處理，因為它是發生在一個 prmoise 中。我們需要在 promise 上調用 .catch，并且重復錯誤處理代碼。這種錯誤處理代碼會比可用于生產的代碼中的 console.log 更復雜。

const makeRequest = () => {  
  try {  
    getJSON().then(
      result => {  
        // 這里發生錯誤
        const data = JSON.parse(result)  
        console.log(data)  
    }).catch((error)=>{
        console.log(error)
    })
  } catch (err) {  // 這里不會捕捉到err
    console.log(err)  
  } 
}

現在看看用 async/await 實現的代碼。現在 catch 塊會處理解析錯誤。

const makeRequest = async () => { 
  try { // 這個解析會失敗   
    const data = JSON.parse(await getJSON()) 
    console.log(data) 
  } 
  catch (err) { 
    console.log(err)
  }
}

條件語句

假設想做像下面的代碼一樣的事情，獲取一些數據，并決定是否應該返回該數據，或者根據數據中的某些值獲取更多的細節。

const makeRequest = () => {  
  return getJSON()  
        .then(data => {  
            if (data.needsAnotherRequest) {  
                return makeAnotherRequest(data)  
                       .then(moreData => {  
                           console.log(moreData)  
                            return moreData  
                        })  
            } else {  
                console.log(data)  
                return data  
            }  
         })  
}

這些代碼看著就讓人頭疼。它只需將最終結果傳播到主 promise，卻很容易讓我們迷失在嵌套（ 6 層）、大括號和返回語句中。

把這個示例用async / await 重寫，就變得更易于閱讀。

const makeRequest = async () => {  
  const data = await getJSON()  
  if (data.needsAnotherRequest) {  
    const moreData = await makeAnotherRequest(data);  
    console.log(moreData)  
    return moreData  
  } else {  
    console.log(data)  
    return data  
  }  
}

中間值

你可能發現自己處于一種狀態，即調用你 promise1，然后用它的返回值來調用promise2，然后使用這兩個 promise 的結果來調用 promise3。你的代碼很可能看起來像這樣：

const makeRequest = () => {  
  return promise1()  
    .then(value1 => {  
        // do something  
          return promise2(value1)  
            .then(value2 => {  
            // do something  
                return promise3(value1, value2)  
        })  
      })  
 }

不過用 async/await 的話，同樣的邏輯就變得超級簡單直觀了。

const makeRequest = async () => {  
    const value1 = await promise1()  
    const value2 = await promise2(value1)  
    return promise3(value1, value2)  
}

調試

最后但是同樣重要的是，在使用 async/await 時，一個殺手級優勢是調試更容易。調試 promise 一直是如此痛苦，有兩個原因：

沒法在返回表達式（無函數體）的箭頭函數中設置斷點。

const makeRequest = () =>{
    return callAllPromise()
        .then(()=> callAllPromise())
        .then(()=> callAllPromise())
        .then(()=> callAllPromise())
        .then(()=> callAllPromise())
}

如果在.then塊中設置斷點，并使用像單步調試這類調試快捷方式，調試器不會移動到后面的 .then ，因為它只單步調試同步代碼。

有了 async/await，我們就不再需要那么多箭頭函數，您可以像正常的同步調用一樣單步調試 await 調用。

const makeRequest = async ()=>{
    await callAllPromise()
    await callAllPromise()
    await callAllPromise()
    await callAllPromise()
}

引用資料

JavaScript 的 Async/Await 完勝 Promise 的六個理由
async 函數的含義和用法

GPU云服務器云服務器 await async await await-async async-await

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/87017.html

Promises與 async/await

摘要：是一種與協作的特殊的語法。換句話說，僅可以運行在中。所以將會進行等待，而之后拋出一個錯誤。同時這也將更為便利。允許在函數內部使用。關鍵詞確保運行時將會等待處理完畢，并且如果觸發了一個運行錯誤，運行中斷，并在改處類似觸發。 async/await是一種與promise協作的特殊的語法。它使得異步工作更加容易理解和使用。 Async函數我們從async關鍵詞開始，它可以被放置在任何函數的...

beita 2019-08-21 17:49 評論0 收藏0
重構：從Promise到Async/Await

摘要：一方面，這里替代的是異步代碼的編寫方式，并非完全拋棄大家心愛的，地球人都知道是基于的，不用太傷心另一方面，是基于回調函數實現的，那也沒有替代回調函數咯重構代碼之后，我仍然用到了庫。摘要：夸張點說，技術的發展與歷史一樣，順之者昌，逆之者亡。JS開發者們，趕緊擁抱Async/Await吧！ GitHub倉庫: Fundebug/promise-asyncawait 早在半年多之前，...

zhangfaliang 2019-08-22 13:47 評論0 收藏0
異步解決方案----Promise與Await

摘要：前言異步編程模式在前端開發過程中，顯得越來越重要。隨著新標準的到來，處理異步數據流又有了新的方案。接下來我們介紹這兩種處理異步編程的方案。仍在繼續執行，但執行結果將被丟棄。使得異步代碼看起來像同步代碼，再也沒有回調函數。前言異步編程模式在前端開發過程中，顯得越來越重要。從最開始的XHR到封裝后的Ajax都在試圖解決異步編程過程中的問題。隨著ES6新標準的到來，處理異步數據流又有了新...

Blackjun 2019-08-29 16:56 評論0 收藏0
異步解決方案----Promise與Await

摘要：前言異步編程模式在前端開發過程中，顯得越來越重要。隨著新標準的到來，處理異步數據流又有了新的方案。接下來我們介紹這兩種處理異步編程的方案。仍在繼續執行，但執行結果將被丟棄。使得異步代碼看起來像同步代碼，再也沒有回調函數。前言異步編程模式在前端開發過程中，顯得越來越重要。從最開始的XHR到封裝后的Ajax都在試圖解決異步編程過程中的問題。隨著ES6新標準的到來，處理異步數據流又有了新...

Neilyo 2019-08-02 11:43 評論0 收藏0
異步解決方案----Promise與Await

摘要：前言異步編程模式在前端開發過程中，顯得越來越重要。隨著新標準的到來，處理異步數據流又有了新的方案。接下來我們介紹這兩種處理異步編程的方案。仍在繼續執行，但執行結果將被丟棄。使得異步代碼看起來像同步代碼，再也沒有回調函數。前言異步編程模式在前端開發過程中，顯得越來越重要。從最開始的XHR到封裝后的Ajax都在試圖解決異步編程過程中的問題。隨著ES6新標準的到來，處理異步數據流又有了新...

entner 2019-08-23 12:20 評論0 收藏0