20170610-async、await與Promise

OnlyLing 發(fā)布于2019-08-21 11:42 / 1422人閱讀

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

async和await

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

async/await實(shí)際上是建立在promise的基礎(chǔ)上，它不能與普通回調(diào)或者node回調(diào)一起用

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

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

語法(對(duì)比promise)

假設(shè)函數(shù)getJSON返回一個(gè)promise，而該promise的完成值是一個(gè)JSON對(duì)象，我們只想調(diào)用它，并輸出該JSON，然后返回“done”

promise的實(shí)現(xiàn)

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

makeRequest()

async、await的實(shí)現(xiàn)

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

async、await與Promise的區(qū)別

函數(shù)前面有一個(gè)關(guān)鍵字 async。await 關(guān)鍵字只用在用 async 定義的函數(shù)內(nèi)。所有 async 函數(shù)都會(huì)隱式返回一個(gè) promise，而 promise 的完成值將是函數(shù)的返回值（本例中是 "done"）。

上面一點(diǎn)暗示我們不能在代碼的頂層用 await，因?yàn)檫@樣就不是在 async 函數(shù)內(nèi)。

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

async/await的優(yōu)勢(shì) 簡潔干凈

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

錯(cuò)誤處理

async/await 會(huì)最終讓我們用同樣的結(jié)構(gòu)（ try/catch）處理同步和異步代碼變成可能。在下面使用 promise 的示例中，如果 JSON.parse 失敗的話，try/catch 就不會(huì)處理，因?yàn)樗前l(fā)生在一個(gè) prmoise 中。我們需要在 promise 上調(diào)用 .catch，并且重復(fù)錯(cuò)誤處理代碼。這種錯(cuò)誤處理代碼會(huì)比可用于生產(chǎn)的代碼中的 console.log 更復(fù)雜。

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

現(xiàn)在看看用 async/await 實(shí)現(xiàn)的代碼?，F(xiàn)在 catch 塊會(huì)處理解析錯(cuò)誤。

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

條件語句

假設(shè)想做像下面的代碼一樣的事情，獲取一些數(shù)據(jù)，并決定是否應(yīng)該返回該數(shù)據(jù)，或者根據(jù)數(shù)據(jù)中的某些值獲取更多的細(xì)節(jié)。

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  
            }  
         })  
}

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

把這個(gè)示例用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  
  }  
}

中間值

你可能發(fā)現(xiàn)自己處于一種狀態(tài)，即調(diào)用你 promise1，然后用它的返回值來調(diào)用promise2，然后使用這兩個(gè) promise 的結(jié)果來調(diào)用 promise3。你的代碼很可能看起來像這樣：

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

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

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

調(diào)試

最后但是同樣重要的是，在使用 async/await 時(shí)，一個(gè)殺手級(jí)優(yōu)勢(shì)是調(diào)試更容易。調(diào)試 promise 一直是如此痛苦，有兩個(gè)原因：

沒法在返回表達(dá)式（無函數(shù)體）的箭頭函數(shù)中設(shè)置斷點(diǎn)。

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

如果在.then塊中設(shè)置斷點(diǎn)，并使用像單步調(diào)試這類調(diào)試快捷方式，調(diào)試器不會(huì)移動(dòng)到后面的 .then ，因?yàn)樗粏尾秸{(diào)試同步代碼。

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

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

引用資料

JavaScript 的 Async/Await 完勝 Promise 的六個(gè)理由
async 函數(shù)的含義和用法

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/87017.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

OnlyLing

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

tensorflow.org

閱讀 2552·2023-04-25 19:47
前端每日實(shí)戰(zhàn)：162# 視頻演示如何用原生 JS 創(chuàng)作一個(gè)查詢 github 用戶的應(yīng)用（內(nèi)含 2

閱讀 3397·2019-08-29 17:18
vue配置多頁面

閱讀 861·2019-08-29 15:26
微信小程序?qū)崿F(xiàn)連接藍(lán)牙設(shè)備跑步APP

閱讀 3368·2019-08-29 14:17
使用FormData對(duì)象上傳文件

閱讀 1145·2019-08-26 13:49
styled-components 中文文檔翻譯及不完全指北

閱讀 3346·2019-08-26 13:22
JS語句后加不加分號(hào)

閱讀 3034·2019-08-26 10:44
angular2 NgModel` 模塊

閱讀 2702·2019-08-23 16:51

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！

20170610-async、await與Promise

相關(guān)文章

***Promises與 async/await***

重構(gòu)：從Promise到Async/Await

異步解決方案----Promise與Await

異步解決方案----Promise與Await

異步解決方案----Promise與Await

發(fā)表評(píng)論

0條評(píng)論

OnlyLing

男|高級(jí)講師

TA的文章

tensorflow.org

前端每日實(shí)戰(zhàn)：162# 視頻演示如何用原生 JS 創(chuàng)作一個(gè)查詢 github 用戶的應(yīng)用（內(nèi)含 2

vue配置多頁面

微信小程序?qū)崿F(xiàn)連接藍(lán)牙設(shè)備跑步APP

使用FormData對(duì)象上傳文件

styled-components 中文文檔翻譯及不完全指北

JS語句后加不加分號(hào)

angular2 NgModel` 模塊

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！

20170610-async、await與Promise

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！

20170610-async、await與Promise