[技術翻譯]在現代JavaScript中編寫非同步任務

来源:https://www.cnblogs.com/yzsunlei/archive/2020/01/13/12189960.html
-Advertisement-
Play Games

本周再來翻譯一些技術文章，本次預計翻譯三篇文章如下： "04.[譯]使用Nuxt生成靜態網站" ( "Generate Static Websites with Nuxt" ) "05.[譯]Web網頁內容是如何影響電池功耗的" ( "How Web Content Can Affect Power ...


本周再來翻譯一些技術文章，本次預計翻譯三篇文章如下：

我翻譯的技術文章都放在一個github倉庫中，如果覺得有用請點擊star收藏。我為什麼要創建這個git倉庫？目的是通過翻譯國外的web相關的技術文章來學習和跟進web發展的新思想和新技術。git倉庫地址：https://github.com/yzsunlei/javascript-article-translate

在本文中，我們將探討過去圍繞非同步執行的JavaScript的演變以及它如何改變我們編寫和讀取代碼的方式。我們將從Web開發的開始，一直到現代非同步模式示例。
JavaScript作為編程語言具有兩個主要特征，這兩個特征對於理解我們的代碼是如何工作的都很重要。首先是它的同步特性，這意味著代碼將幾乎在您閱讀時逐行運行，其次，它是單線程的，任何時候都只執行一個命令。

隨著語言的發展，新的模塊出現在場景中以允許非同步執行。開發人員在解決更複雜的演算法和數據流時嘗試了不同的方法，從而導致圍繞它們的新介面和模式的出現。

同步執行和觀察者模式

如引言中所述，JavaScript通常會逐行運行您編寫的代碼。即使在最初的幾年中，該語言也有例外，儘管它們很少，您可能已經知道它們：HTTP請求，DOM事件和時間間隔。

const button = document.querySelector('button');

// observe for user interaction
button.addEventListener('click', function(e) {
  console.log('user click just happened!');
})

如果添加事件偵聽器（例如，單擊元素並觸發用戶交互），則JavaScript引擎會將事件偵聽器回調的任務放入隊列，但將繼續執行其當前堆棧中的內容。完成那裡的調用之後，它現在將運行偵聽器的回調。

此行為類似於網路請求和計時器發生的情況，它們是Web開發人員訪問非同步執行的第一個模塊。

儘管這些是JavaScript中常見的同步執行例外的，但至關重要的是要瞭解該語言仍然是單線程的，並且儘管它可以將Task排隊，非同步運行它們然後返回主線程，但它只能一次執行一段代碼。

我們的工具手冊，其中Alla Kholmatova探索瞭如何創建有效且可維護的設計系統來設計出色的數字產品。認識Design Systems，瞭解常見的陷阱，陷阱和Alla多年來汲取的經驗教訓。

例如，讓我們發送一個網路請求。

var request = new XMLHttpRequest();
request.open('GET', '//some.api.at/server', true);

// observe for server response
request.onreadystatechange = function() {
  if (request.readyState === 4 && xhr.status === 200) {
    console.log(request.responseText);
  }
}

request.send();

伺服器返回時，分配給該方法的任務將onreadystatechange放入隊列（代碼在主線程中繼續執行）。

註意：解釋JavaScript引擎如何將任務排隊和處理執行線程是一個很複雜的主題，可能值得一讀。不過，我還是建議您查看“事件迴圈到底是什麼？”菲利普·羅伯茨（Phillip Roberts）提供的幫助，以幫助您更好地理解。

在上述每種情況下，我們都在響應外部事件。達到一定的時間間隔，用戶操作或伺服器響應。我們本身無法創建非同步任務，我們始終觀察到發生的事件超出了我們的範圍。

這就是為什麼將這種模板式的代碼稱為“觀察者模式”，addEventListener在這種情況下，可以更好地由介面表示。很快，暴露這種模式的事件庫或框架蓬勃發展。

NODE.JS和事件觸發器

一個很好的例子是Node.js，該頁面將自己描述為“非同步事件驅動的JavaScript運行時”，因此事件觸發器和回調是一等公民。它甚至用EventEmitter已經實現了一個構造函數。

const EventEmitter = require('events');
const emitter = new EventEmitter();

// respond to events
emitter.on('greeting', (message) => console.log(message));

// send events
emitter.emit('greeting', 'Hi there!');

這不僅是非同步執行的通用方法，而且是其生態系統的核心模式和慣例。Node.js開闢了一個在不同環境中甚至在網路之外編寫JavaScript的新時代。結果，其他非同步情況也是可能的，例如創建新目錄或寫入文件。

const { mkdir, writeFile } = require('fs');

const styles = 'body { background: #ffdead; }';

mkdir('./assets/', (error) => {
  if (!error) {
    writeFile('assets/main.css', styles, 'utf-8', (error) => {
      if (!error) console.log('stylesheet created');
    })
  }
})

您可能會註意到，回調error函數的第一個參數為，如果需要響應數據，則將其作為第二個參數。這被稱為“錯誤優先回調模式”，它成為作者和貢獻者為其自己的程式包和庫所採用的約定。

Promise和無盡的回調鏈

隨著Web開發麵臨更複雜的問題需要解決，對更好的非同步工件的需求出現了。如果我們查看最後一個代碼片段，我們會看到重覆的回調鏈，隨著任務數量的增加，回調鏈的擴展效果就很差。

例如，讓我們僅添加兩個步驟，即文件讀取和樣式預處理。

const { mkdir, writeFile, readFile } = require('fs');
const less = require('less')

readFile('./main.less', 'utf-8', (error, data) => {
  if (error) throw error
  less.render(data, (lessError, output) => {
    if (lessError) throw lessError
    mkdir('./assets/', (dirError) => {
      if (dirError) throw dirError
      writeFile('assets/main.css', output.css, 'utf-8', (writeError) => {
        if (writeError) throw writeError
        console.log('stylesheet created');
      })
    })
  })
})

我們可以看到，由於多個回調鏈和重覆的錯誤處理，隨著正在編寫的程式變得越來越複雜，代碼變得更加難以為人所知。

Promise，包裝和連鎖模式

Promises最初宣佈它們是JavaScript語言的新功能時，並沒有引起太多關註，它們並不是一個新概念，因為其他語言在幾十年前就已經實現了類似的功能。事實是，自從出現以來，他們發現我所做的大多數項目的語義和結構都發生了很大變化。

Promises不僅引入了供開發人員編寫非同步代碼的內置解決方案，而且還為Web開發（如Web規範）的新功能的構建基礎打開了Web開發的新階段fetch。

從回調方法遷移到基於Promise的方法在項目（例如庫和瀏覽器）中變得越來越普遍，甚至Node.js也開始緩慢地遷移到它們。

例如，包裝一下Node的readFile方法：

const { readFile } = require('fs');

const asyncReadFile = (path, options) => {
  return new Promise((resolve, reject) => {
    readFile(path, options, (error, data) => {
      if (error) reject(error);
      else resolve(data);
    })
  });
}

在這裡，我們通過在Promise構造函數中執行，resolve在方法結果成功時以及reject在定義錯誤對象時調用，來掩蓋回調。

當一個方法返回一個Promise對象時，我們可以通過將一個函數傳遞給來遵循其成功的解析then，其參數是Promise被解析的值，在這種情況下為data。

如果在方法期間引發錯誤catch，則將調用該函數（如果存在）。

註意：如果您需要更深入地瞭解Promises的工作方式，我建議Jake Archibald 在Google的Web開發博客上寫的“JavaScript Promises：Introduction”一文。

現在我們可以使用這些新方法並避免回調鏈。

asyncRead('./main.less', 'utf-8')
  .then(data => console.log('file content', data))
  .catch(error => console.error('something went wrong', error))

具有創建非同步任務的方法和清晰的界面以跟蹤其可能的結果，使該行業擺脫了觀察者模式。基於Promise的代碼似乎可以解決不可讀且容易出錯的代碼。

隨著更好的語法或更清晰的錯誤消息在編碼時突出顯示有所幫助，對於開發人員來說，更易於推理的代碼變得更具可預測性，並且執行路徑的情況更好，更容易捕捉可能的代碼陷阱。

Promises由於在社區中的普及程度很高，Node.js迅速發佈了其I/O方法的內置版本以返回Promise對象，例如從中導入文件操作fs.promises。

它甚至提供了一個promisify實用工具，用於包裝遵循錯誤優先回調模式的所有函數，並將其轉換為基於Promise的函數。

但是，Promises在所有情況下都能提供幫助嗎？

讓我們重新想象一下用Promises編寫的樣式預處理任務。

const { mkdir, writeFile, readFile } = require('fs').promises;
const less = require('less')

readFile('./main.less', 'utf-8')
  .then(less.render)
  .then(result =>
    mkdir('./assets')
      .then(writeFile('assets/main.css', result.css, 'utf-8'))
  )
  .catch(error => console.error(error))

代碼中的冗餘明顯減少了，尤其是在我們現在所依賴的錯誤處理方面catch，但是Promises某種程度上未能提供與操作串聯直接相關的清晰代碼縮進。

這實際上是在調用then之後的第一個語句上實現的readFile。這些行之後發生的事情是需要創建一個新的作用域，我們可以在該作用域中首先創建目錄，然後將結果寫入文件中。這就導致了縮進節奏的中斷，乍看之下很難確定指令序列。

解決此問題的一種方法是預先處理該問題的自定義方法，並允許該方法正確連接，但是我們將向似乎已經具有實現任務所需功能的代碼引入更多的複雜性。

註意：這是一個示常式序，我們可以控制某些方法，它們都遵循行業慣例，但並非總是如此。通過更複雜的串聯或引入具有不同類型的庫，我們可以輕鬆破壞代碼風格。

令人高興的是，JavaScript社區再次從其他語言語法中學到了東西，並添加了一種表示法，可以在很多情況下幫助非同步任務串聯而不是像同步代碼那樣令人愉悅或直截了當。

async和await

A Promise在執行時被定義為一個未解析的值，創建a的實例Promise是對該模塊的顯式調用。

const { mkdir, writeFile, readFile } = require('fs').promises;
const less = require('less')

readFile('./main.less', 'utf-8')
  .then(less.render)
  .then(result =>
    mkdir('./assets')
      .then(writeFile('assets/main.css', result.css, 'utf-8'))
  )
  .catch(error => console.error(error))

在async方法內部，我們可以使用await保留字來確定a的解析度，Promise然後繼續執行。

讓我們使用此語法重新訪問或編寫代碼段。

const { mkdir, writeFile, readFile } = require('fs').promises;
const less = require('less')

async function processLess() {
  const content = await readFile('./main.less', 'utf-8')
  const result = await less.render(content)
  await mkdir('./assets')
  await writeFile('assets/main.css', result.css, 'utf-8')
}

processLess()

註意：請註意，由於我們今天不能在非同步函數的範圍之外使用，因此需要將所有代碼移至方法await。

每次async方法找到一條await語句時，它將停止執行，直到處理中的值或Promise被解析為止。

儘管非同步執行，但使用async/await表示法會有明顯的後果，代碼看起來好像是async，這是我們開發人員更習慣查看和推理的。

錯誤處理呢？為此，我們使用在該語言中已經存在很長時間的語句，try和catch。

const { mkdir, writeFile, readFile } = require('fs').promises;
const less = require('less');

async function processLess() {
  try {
    const content = await readFile('./main.less', 'utf-8')
    const result = await less.render(content)
    await mkdir('./assets')
    await writeFile('assets/main.css', result.css, 'utf-8')
  } catch(e) {
    console.error(e)
  }
}

processLess()

放心，在該過程中引發的任何錯誤將由該catch語句內的代碼處理。我們在中心位置負責錯誤處理，但是現在我們有了一個易於閱讀和遵循的代碼。

具有返回值的後續操作不需要存儲在mkdir不會破壞代碼節奏的變數中；也無需在以後的步驟中創建新的作用域來訪問result的值。

可以肯定地說，Promises是該語言中引入的一個基本模塊，對於在JavaScript中啟用async/await表示法是必需的，您可以在現代瀏覽器和最新版本的Node.js中使用它。

註意：最近在JSConf中，Node的創建者和第一貢獻者Ryan Dahl很遺憾沒有堅持Promises的早期開發，主要是因為Node的目標是創建事件驅動的伺服器和文件管理，而Observer模式更適合於此。

結論

將Promises引入Web開發世界的目的是改變我們在代碼中排隊操作的方式，並改變了我們對代碼執行進行推理的方式以及我們編寫庫和包的方式。

但是擺脫回調鏈很難解決，我認為then在多年習慣於觀察者模式和主要提供商採用的方法之後，不得不通過一種方法並不能幫助我們擺脫思路。像Node.js這樣的社區。

正如諾蘭·勞森（Nolan Lawson）在其有關Promise串聯中錯誤使用的出色文章中所說，舊的回調習慣會死掉！稍後，他解釋瞭如何避免這些陷阱。

我認為Promises是中間步驟，它允許以自然的方式生成非同步任務，但並沒有幫助我們進一步改進更好的代碼模式，有時您實際上需要更適應和改進的語言語法。

當我們嘗試使用JavaScript解決更複雜的難題時，我們看到了對更成熟語言的需求，並嘗試了以前不曾在網路上看到過的架構和模式。

我們仍然不知道ECMAScript規範的表現如何，因為我們一直將JavaScript治理擴展到網路之外，並嘗試解決更複雜的難題。

現在很難說我們需要從語言中真正地將這些難題轉變成更簡單的程式所需要的東西，但是我對Web和JavaScript本身如何推動事物，試圖適應挑戰和新環境感到滿意。與十年前開始在瀏覽器中編寫代碼相比，現在我覺得JavaScript是一個更加非同步的友好的地方。

原文鏈接：https://www.smashingmagazine.com/2019/10/asynchronous-tasks-modern-javascript/


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

-Advertisement-
Play Games
更多相關文章
  • shell 一鍵配置單實例oracle基礎環境變數（linux7）
    #!/bin/bash echo "修改主機名" hostnamectl set-hostname wangxfa hostname sleep 1 echo "查看並關閉防火牆" systemctl status firewalld systemctl stop firewalld systemc ...
  • mysql常見問題解決方案
    屬性順序錯誤 一般情況下欄位類型要放在前面，限制參數放在後面，UNSIGNEDZEROFILL 之間沒有先後順序，主鍵 KEY 和 auto_increment 要放在UNSIGNED ZEROFILL 後面 否則報錯 。設置為主鍵的欄位沒有 deafault參數，not null 一般放在最後面。 ...
  • mysql基礎（附具體操作代碼）
    # 註釋內容 -- 註釋內容 -- 創建資料庫 king CREATE DATABASE king; -- 查看當前伺服器下有哪些資料庫 SHOW DATABASES; SHOW SCHEMAS; -- 查看king資料庫的詳細信息 SHOW CREATE DATABASE king; -- 創建數 ...
  • Redis系列(一)：Redis簡介及環境安裝
    提到Redis，大家肯定都聽過，並且應該都在項目中或多或少的使用過，也許你覺得Redis用起來挺簡單的呀，但如果有人問你下麵的幾個問題(比如同事或者面試官)，你能回答的上來嗎？ 1. 什麼是Redis？ 2. Redis能存儲哪幾種數據結構？ 3. Redis有幾種持久化機制？它們的優缺點分別是什麼 ...
  • MySQL資料庫(三)簡介
    前提要述：參考書籍《MySQL必知必會》 2.1 MySQL簡介 2.1.1 什麼是MySQL MySQL是一種關係資料庫管理系統。負責資料庫中數據的存儲，檢索，管理和處理。 2.1.2 MySQL的優點 成本低——MySQL是開源的，一般可以免費使用。 性能——MySQL執行快。 可信賴，體積小。 ...
  • AOP之AspectJ的簡單使用
    個人博客 "http://www.milovetingting.cn" AOP之AspectJ的簡單使用 AOP的定義 AOP為Aspect Oriented Programming的縮寫，意為:面向切麵編程，通過預編譯方式和運行期間動態代理實現程式功能的統一維護的一種技術。 以上關於AOP的定義引 ...
  • Android/Unity大亂鬥-完整雙方集成交互指南
    這是一個很長很長的story！-芝麻粒兒創作 開篇 源碼地址：GitHub 本文目的，將Unity集成到Android端，學完本文後你可以做到 Android任意佈局載入Unity 3D場景 任意操作佈局中的按鈕/3D物品(縮放旋轉等) 互相消息通信（你叼我，我叼你） 自由切換Unity中的場景 動 ...
  • vue實現網路圖片瀑布流 + 下拉刷新 + 上拉載入更多
    一、思路分析和效果圖 用vue來實現一個瀑布流效果，載入網路圖片，同時有下拉刷新和上拉載入更多功能效果。然後針對這幾個效果的實現，捋下思路： 先看個效果動圖： 靜態截圖： 二、具體實現步驟 2.1、頁面結構設計，測試數據準備。 本地準備一個json文件數據，放在項目public文件夾下。註意，本地測 ...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類