async函數解析

来源:https://www.cnblogs.com/unclekeith/archive/2018/01/28/8372126.html
-Advertisement-
Play Games

轉載請註明出處： "async函數解析" async函數是基於Generator函數實現的,也就是說是Generator函數的語法糖。在之前的文章有介紹過Generator函數語法和非同步應用，如果對其不瞭解的，可以先看看關於Generator函數的文章，這樣學習async函數的難度就不會太大。 傳送 ...


轉載請註明出處：async函數解析

async函數是基於Generator函數實現的,也就是說是Generator函數的語法糖。在之前的文章有介紹過Generator函數語法和非同步應用，如果對其不瞭解的，可以先看看關於Generator函數的文章，這樣學習async函數的難度就不會太大。

傳送門: Generator語法解析 Generator函數非同步應用

接下來會用一些篇幅說明一下async函數，文末會給出async函數的參考學習文章。

文章目錄

  1. 含義
  2. 基本語法
  3. 錯誤處理
  4. 非同步應用

含義

我們知道，調用Generator函數不會立即執行，而是返回遍歷器對象。疲於手動執行遍歷器對象，因此就有了thunk(thunkify)函數結合run函數來實現自動流程管理。或者，使用co模塊來實現自動流程管理，使Generator函數的使用更加方便。

而async函數ES2017標準引入的語法，是Generator函數的語法糖，因此其相對於Generator函數，具有以下基本特點。

內置執行器：使用async函數可以像使用普通函數一樣，直接調用即可執行。不用像Generator函數一樣使用co模塊來實現流程式控制制。

語義化更強：async關鍵字表示是一個非同步的函數，await表示需要等待執行。相對於yield表達式，語義化更強。

返回值是Promise：async函數返回值是Promise對象，這比Generator函數的返回值是Iterator對象方便多了，可以使用then方法來指定下一步的操作。

基本語法

使用async關鍵字表明函數是一個async函數，內部使用await關鍵字表明需要等待非同步任務結束後才繼續往下執行。

async function as () {
  return 123
}
as().then(data => {
  console.log(data)
})

從上面代碼可以看出，調用async函數會返回Promise對象，返回值可以作為then方法成功處理函數的參數值。

如果在async內部如果拋出錯誤或者出現異常，會被then方法的錯誤處理函數捕獲或者catch方法捕獲。

async function as () {
  throw new Error('出錯拉！')
}
as().then(data => {
  console.log(data)
}).catch(err => {
  console.log(err)
})  // Error: xixi, catch方法捕獲到錯誤

另外，async函數內部可以使用await關鍵字，表示後面的表達式是非同步任務。await關鍵字後邊的表達式可以是一個Promise對象，或者簡單(複雜)數據類型(Number, String, RegExp, Boolean, Array, Objext)。如果是簡單(複雜)數據類型，async函數會隱式調用Promise.resolve方法將其轉換為Pormise對象。

function foo () {
  return new Promise((resolve, reject) => {
    window.setTimeout(() => {
      resolve('async')
    }, 1000)
  })
}
async function as () {
  const data = await foo()  //foo函數使用setTimeout來模擬非同步。
  console.log(data)
}
as()  // async

async function as () {
  return await 123   //如果是其他數據類型，也是如此。
}
as().then(data => {
  console.log(data)
})  // 123

如果await關鍵字後面的表達式是非Promise、非thenable的普通的值，則會隱式調用Promise.resolve方法將其轉換為Promise對象，await關鍵字會在內部調用then方法將resolve的值返回。

await內部實現大致如下
function await (data) {
  return new Promise((resolve, reject) => {
    resolve(data)
  }).then(data => {
    return data
  })
}

總之，await關鍵字是then方法的語法糖，會將resolve的值傳遞出來。

另外，如果在await關鍵字後的表達式拋出了錯誤，會使async函數返回的Promise對象從pending狀態轉變為reject狀態，進而被catch方法捕獲到錯誤。

function foo () {
  throw new Error('err')
}
async function as () {
  await foo()
}
as().then(data => {})
    .catch(err => {
      console.log(err);
    })  // as函數返回的Promise對象從pending狀態變為reject狀態。

如果某個await關鍵字後面的表達式拋出錯誤，async函數的狀態就會變為reject，那麼函數就會暫停執行，後面的表達式就不會在繼續執行。因為Promise函數有一個特點是，一旦狀態改變，就不會再變，之後在調用也是保持同一個狀態。

function foo () {
  throw new Error('err')
}
async function as () {
  await foo()
  return Promise.resolve('succ') // 不會執行到這裡，因為Promise對象的狀態一旦改變就不會在變了，因此不執行。
}
as().then(data => {})
    .catch(err => {
      console.log(err);
    })

因為async函數預設情況下返回的是Promise對象，因此可以將async函數作為await關鍵字後面的表達式。async函數調用另一個async函數會更加方便，不會像Generator函數需要使用yield*表達式來調用。

async function foo () {
  return Promise.resolve('async')
}
async function as () {
  return await foo()   // 調用foo函數會返回Promise對象
}
as().then(data => {
  console.log(data)
})

另外，如果async函數內部沒有拋出錯誤，函數正常執行。那麼每一個await關鍵字後面的非同步任務會繼發執行。也就是說，一個非同步任務結束之後才會執行另外一個非同步任務，而不是併發執行。

async function foo () {
  return new Promise((resolve, reject) => {
    window.setTimeout(() => {
      resolve(10)
    }, 1000)
  })
}
async function bar () {
  return new Promise((resolve, reject) => {
    window.setTimeout(() => {
      resolve(20)
    }, 2000)
  })
}
async function as () {
  let t1 = Date.now()
  const a = await foo()
  const b = await bar()
  let t2 = Date.now()
  console.log(t2 - t1)  // 有誤差，大概3004ms
  return a + b
}
as().then(data => {
  console.log(data)   // 大概3s後輸入30
})

如果兩個非同步任務互不依賴，如果按照上面的代碼，兩個非同步任務繼發執行，這樣做的缺點是時間浪費了。本來200ms可以完成的兩個非同步任務，卻用了400ms。因此可以讓兩個互不依賴的非同步任務同時觸發。有兩種方法：

// 方法一：
async function as () {
  const t1 = Date.now()
  const [fo, ba] = [foo(), bar()]
  // 以上兩個函數同時執行，並將結果作為await關鍵字的表達式
  const a = await fo
  const b = await ba
  const t2 = Date.now()
  console.log(t2 - t1)
  return a + b
}

// 寫法二：結合使用Promise.all等待所有非同步任務完成後才會返回
async function as () {
  const t1 = Date.now()
  const arr = await Promise.all([foo(), bar()])
  const t2 = Date.now()
  console.log(t2 - t1)
  return arr[0] + arr[1]
}
as().then(data => {
  console.log(data)  // 30
})

錯誤處理

由於async函數內部的非同步任務一旦出現錯誤，那麼就等同於async函數返回的Promise對象被reject。因此，為了防止非同步任務出現錯誤，可以使用try...catch來捕獲錯誤，使async函數內部可以正常執行。

async function as () {
  let a = 0
  let b = 0
  try {
    a = await foo()
    b = await bar()
  } catch (e) {}
  return a + b
}
as().then(data => {
  console.log(data) // 30
})

我們知道，try...catch只能用於處理同步的操作，對於非同步任務無法捕獲到錯誤。而await關鍵字能夠暫停函數處理，等待非同步任務結束之後返回。因此在async函數中使用try...catch結合await關鍵字捕獲非同步錯誤是一個不錯的方法。

非同步應用

我們來看看使用Promise、Generator、async來實現非同步應用的差別。接下來會使用setTimeout來模擬非同步。

先來看兩個基礎函數

function foo (obj) {
  return new Promise((resolve, reject) => {
    window.setTimeout(() => {
      let data = {
        height: 180
      }
      data = Object.assign({}, obj, data)
      resolve(data)
    }, 1000)
  })
}
function bar (obj) {
  return new Promise((resolve, reject) => {
    window.setTimeout(() => {
      let data = {
        talk () {
          console.log(this.name, this.height);
        }
      }
      data = Object.assign({}, obj, data)
      resolve(data)
    }, 1500)
  })
}

兩個函數內部都返回了Promise實例對象，通過Object.assign來合併傳遞過來的參數。

首先看看純Promise對象的實現。

function main () {
  return new Promise((resolve, reject) => {
    const data = {
      name: 'keith'
    }
    resolve(data)
  })
}
main().then(data => {
  foo(data).then(res => {
    bar(res).then(data => {
      return data.talk()   // keith 180
    })
  })
})

調用過程中就是在不斷使用then方法，不夠直觀，操作本身的語義不太容易看出來。而且有可能出現回調地獄的風險。

接下來看看Generator函數的實現。由於Generator函數的調用需要手動執行，因此寫了run函數來實現流程自動控制。

function *gen () {
  const data = {
    name: 'keith'
  }
  const fooData = yield foo(data)
  const barData = yield bar(fooData)
  return barData.talk()
}
function run (gen) {
  const g = gen()
  const next = data => {
    let result = g.next(data)
    if (result.done) return result.value
    result.value.then(data => {
      next(data)
    })
  }
  next()
}
run(gen)

使用run函數來實現自動流程式控制制，Generator函數的好處相對於Promise對象來說，使得非同步的過程同步化，同時少了回調地獄的風險。但是缺點是需要使用像run函數或者co模塊來實現流程式控制制。

接下來使用async函數來實現看看。

async function main () {
  const data = {
    name: 'keith'
  }
  const fooData = await foo(data)
  const barData = await bar(fooData)
  return barData
}
main().then(data => {
  data.talk()
})

從上面代碼中，可以看出，使用async函數的代碼量最少，而且使得非同步過程同步化，更進一步，async函數內置執行器。調用的方法更加簡潔。

ok，差不多就這樣了，稍微總結一下。

  1. async函數是基於Generator函數實現的，是Generator函數的語法糖。其內置執行器，調用後返回Promise對象，因此可以像普通韓式一樣使用。
  2. async函數內部拋出錯誤或者await關鍵字後面的表達式拋出錯誤，會使async函數返回的Promise對象從pending狀態變為reject狀態，從而可以被catch方法捕獲錯誤。而且，Promise對象的狀態一旦改變就不會再變，之後的非同步任務就不會執行了。
  3. await關鍵字後面的表達式可以是Promise對象，也可以是其他數據類型。如果是其他數據類型，則會通過Promise.resolve將其轉換為Promise對象
  4. async函數內部如果有多個await關鍵字，其後的非同步任務會繼發執行。如果每一個非同步任務不相互依賴，則可以使用Promise.all讓其併發執行，這樣可以在同樣的時間里完成多個非同步任務，提高函數執行效率。
  5. 對於async內部拋出的錯誤，可以使用try...catch來捕獲異常。雖然try...catch只能用於捕獲同步任務，但是await關鍵字可以使得非同步任務同步化,因此可以結合try...catch和await關鍵字捕獲非同步任務。

參考資料：

  1. async 函數
  2. async 函數的含義和用法

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • JS應用實例3：定時彈出廣告
    在觀看視頻時候總會發現有廣告彈出 這裡就做一個類似這樣的定時彈出廣告的實例： 前面的JS代碼和HTML寫在同一個文件，實際開發中總是分開來寫 用的時候引入即可 HTML代碼： JS代碼： BOM對象： window: history: location: ...
  • [Web][高中同學畢業分佈去向網站+伺服器上掛載]二、敲定思路與方向(HTML5+JS(JQuery+ECharts))
    高中同學畢業分佈網站：敲定思路 一、背景 第一集：http://www.cnblogs.com/Twobox/p/8368121.html 中大體確定了自己的 大體目標、大體思路。 但是 、 在今天的發現中，模仿“地圖慧”中的同學畢業去向模塊去 倒騰 好像 可行性與價值性 不高(低)。(說地是因為自 ...
  • 小劉同學的第三十六篇博文
    回到家的第一天。。。 心靜不下來，代碼自然寫不好。。。。。。 可能是太久沒回家了，在寢室收拾東西的時候居然把鑰匙落下了…… 決定以後要把沒寫完的作業也公佈出來，之前一直都是給自己拖延的藉口和懶惰的理由，現在連一天一個小小的homework都完不成，還寫什麼程式，這樣的開發速度找得到工作？(〝▼皿▼) ...
  • JS應用實例2：輪播圖
    在學習輪播圖之前，要先會切換圖片： 找三張圖片，命名1.jpg,2.jpg,3.jpg 示例： 上面代碼是通過按鈕切換圖片 輪播圖自動切換圖片，用到onload事件 JS代碼： HTML代碼： 這裡要註意：onload寫在body標簽中 每一秒自動切換一張圖片 ...
  • H5移動端項目案例、web手機微商城實戰開發
    自微信生態圈一步步強大後，關於移動端購物的趨勢，逐漸成為大眾關心的內容，目前市場上關於移動商城的制定就有大量版本，比如、微商城、移動商城、移動webAPP、微信商城各等各種定義層出不窮，這就對於移動端電商的發展起到個很好的催化劑。之前對於H5移動端的開發也做過一些項目，這段時間就整理之前的知識，做了 ...
  • JS應用實例1：註冊頁面表單校驗
    這裡是簡單的前端校驗，後邊還會介紹後臺的校驗。 多重校驗保證獲取安全數據 步驟： 1.確定事件onsubmit，並綁定函數 2.編寫函數，作用是獲取輸入數據 3.判斷數據是否合法，合法則提交，否則表單不提交 HTML代碼： <!DOCTYPE html> <html> <head> <meta ch ...
  • javascript中的符號 == 和 === 的區別
    == 表示相等 即僅僅比較兩邊變數的數值是否相等。 相等運算符隱藏的類型轉換，會帶來一些違反直覺的結果。 這就是為什麼建議儘量不要使用相等運算符。至於使用相等運算符會不會對後續代碼造成意外影響，答案是有可能會。 表示恆等， 首先比較兩邊的變數數據類型是否相等， 其次比較兩邊的變數的數值是否相等。 ...
  • 讀Lodash源碼——chunk.js
    The time is out of joint: O cursed spite, That ever I was born to set it right. 莎士比亞 最艱難的第一步 最近學習遇到了些障礙，浮躁浮躁又浮躁。很難靜下心來做一件事，北京的寒風也難以讓我冷靜下來. 之前一直很想找個源碼讀 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類