談一談幾種處理JavaScript異步操作的辦法

曹金海發布于2019-08-20 14:35 / 2961人閱讀

摘要：問題是處理完了，卻也引發了自己的一些思考處理的異步操作，都有一些什么方法呢一回調函數傳說中的就是來自回調函數。而回調函數也是最基礎最常用的處理異步操作的辦法。

引言

js的異步操作，已經是一個老生常談的話題，關于這個話題的文章隨便google一下都可以看到一大堆。那么為什么我還要寫這篇東西呢？在最近的工作中，為了編寫一套相對比較復雜的插件，需要處理各種各樣的異步操作。但是為了體積和兼容性，不打算引入任何的pollyfill，甚至連babel也不允許使用，這也意味著只能以es5的方式去處理。使用回調的方式對于解耦非常不利，于是找了別的方法去處理這個問題。問題是處理完了，卻也引發了自己的一些思考：處理js的異步操作，都有一些什么方法呢？

一、回調函數

傳說中的“callback hell”就是來自回調函數。而回調函數也是最基礎最常用的處理js異步操作的辦法。我們來看一個簡單的例子：

首先定義三個函數：

function fn1 () {
  console.log("Function 1")
}

function fn2 () {
  setTimeout(() => {
    console.log("Function 2")
  }, 500)
}

function fn3 () {
  console.log("Function 3")
}

其中fn2可以視作一個延遲了500毫秒執行的異步函數。現在我希望可以依次執行fn1，fn2，fn3。為了保證fn3在最后執行，我們可以把它作為fn2的回調函數：

function fn2 (f) {
  setTimeout(() => {
    console.log("Function 2")
    f()
  }, 500)
}

fn2(fn3)

可以看到，fn2和fn3完全耦合在一起，如果有多個類似的函數，很有可能會出現fn1(fn2(fn3(fn4(...))))這樣的情況。回調地獄的壞處我就不贅述了，相信各位讀者一定有自己的體會。

二、事件發布/訂閱

發布/訂閱模式也是諸多設計模式當中的一種，恰好這種方式可以在es5下相當優雅地處理異步操作。什么是發布/訂閱呢？以上一節的例子來說，fn1，fn2，fn3都可以視作一個事件的發布者，只要執行它，就會發布一個事件。這個時候，我們可以通過一個事件的訂閱者去批量訂閱并處理這些事件，包括它們的先后順序。下面我們基于上一章節的例子，增加一個消息訂閱者的方法（為了簡單起見，代碼使用了es6的寫法）：

class AsyncFunArr {
  constructor (...arr) {
    this.funcArr = [...arr]
  }

  next () {
    const fn = this.funcArr.shift()
    if (typeof fn === "function") fn()
  }

  run () {
    this.next()
  }
}

const asyncFunArr = new AsyncFunArr(fn1, fn2, fn3)

然后在fn1，fn2，fn3內調用其next()方法：

function fn1 () {
  console.log("Function 1")
  asyncFunArr.next()
}

function fn2 () {
  setTimeout(() => {
    console.log("Function 2")
    asyncFunArr.next()
  }, 500)
}

function fn3 () {
  console.log("Function 3")
  asyncFunArr.next()
}

// output =>
// Function 1
// Function 2
// Function 3

可以看到，函數的處理順序等于傳入AsyncFunArr的參數順序。AsyncFunArr在內部維護一個數組，每一次調用next()方法都會按順序推出數組所保存的一個對象并執行，這也是我在實際的工作中比較常用的方法。

三、Promise

使用Promise的方式，就不需要額外地編寫一個消息訂閱者函數了，只需要異步函數返回一個Promise即可。且看例子：

function fn1 () {
  console.log("Function 1")
}

function fn2 () {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log("Function 2")
      resolve()
    }, 500)
  })
}

function fn3 () {
  console.log("Function 3")
}

同樣的，我們定義了三個函數，其中fn2是一個返回Promise的異步函數，現在我們希望按順序執行它們，只需要按以下方式即可：

fn1()
fn2().then(() => { fn3() })

// output =>
// Function 1
// Function 2
// Function 3

使用Promise與回調有兩個最大的不同，第一個是fn2與fn3得以解耦；第二是把函數嵌套改為了鏈式調用，無論從語義還是寫法上都對開發者更加友好。

四、generator

如果說Promise的使用能夠化回調為鏈式，那么generator的辦法則可以消滅那一大堆的Promise特征方法，比如一大堆的then()。

function fn1 () {
  console.log("Function 1")
}

function fn2 () {
  setTimeout(() => {
    console.log("Function 2")
    af.next()
  }, 500)
}

function fn3 () {
  console.log("Function 3")
}

function* asyncFunArr (...fn) {
  fn[0]()
  yield fn[1]()
  fn[2]()
}

const af = asyncFunArr(fn1, fn2, fn3)

af.next()

// output =>
// Function 1
// Function 2
// Function 3

在這個例子中，generator函數asyncFunArr()接受一個待執行函數列表fn，異步函數將會通過yield來執行。在異步函數內，通過af.next()激活generator函數的下一步操作。

這么粗略的看起來，其實和發布/訂閱模式非常相似，都是通過在異步函數內部主動調用方法，告訴訂閱者去執行下一步操作。但是這種方式還是不夠優雅，比如說如果有多個異步函數，那么這個generator函數肯定得改寫，而且在語義化的程度來說也有一點不太直觀。

五、優雅的async/await

使用最新版本的Node已經可以原生支持async/await寫法了，通過各種pollyfill也能在舊的瀏覽器使用。那么為什么說async/await方法是最優雅的呢？且看代碼：

function fn1 () {
  console.log("Function 1")
}

function fn2 () {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log("Function 2")
      resolve()
    }, 500)
  })
}

function fn3 () {
  console.log("Function 3")
}

async function asyncFunArr () {
  fn1()
  await fn2()
  fn3()
}

asyncFunArr()

// output =>
// Function 1
// Function 2
// Function 3

有沒有發現，在定義異步函數fn2的時候，其內容和前文使用Promise的時候一模一樣？再看執行函數asyncFunArr()，其執行的方式和使用generator的時候也非常類似。

異步的操作都返回Promise，需要順序執行時只需要await相應的函數即可，這種方式在語義化方面非常友好，對于代碼的維護也很簡單——只需要返回Promise并await它就好，無需像generator那般需要自己去維護內部yield的執行。

六、尾聲

作為一個歸納和總結，本文內容的諸多知識點也是來自于他人的經驗，不過加入了一些自己的理解和體會。不求科普于他人，但求作為個人的積累。希望讀者可以提出訂正的意見，共同學習進步！

云服務器 GPU云服務器攻擊服務器幾種辦法 js中的異步操作數據統計處理辦法服務器來處理辦法

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

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

js技術 - 收藏集 - 掘金

摘要：還記得剛開始學習的時候，內存管理前端掘金作為一門高級語言，并不像低級語言那樣擁有對內存的完全掌控。第三方庫的行代碼內實現一個前端掘金前言本文會教你如何在行代碼內，不依賴任何第三方的庫，用純實現一個。 (譯) 如何使用 JavaScript 構建響應式引擎 —— Part 1：可觀察的對象 - 掘金原文地址：How to build a reactive engine in JavaSc...

Guakin_Huang 2019-08-21 11:48 評論0 收藏0
js技術 - 收藏集 - 掘金

摘要：還記得剛開始學習的時候，內存管理前端掘金作為一門高級語言，并不像低級語言那樣擁有對內存的完全掌控。第三方庫的行代碼內實現一個前端掘金前言本文會教你如何在行代碼內，不依賴任何第三方的庫，用純實現一個。 (譯) 如何使用 JavaScript 構建響應式引擎 —— Part 1：可觀察的對象 - 掘金原文地址：How to build a reactive engine in JavaSc...

zhou_you 2019-08-20 17:47 評論0 收藏0
談一談javascript異步

摘要：從今天開始研究一下的異步相關內容，感興趣的請關注同期異步系列文章推薦異步中的回調異步與異步之異步之異步之和異步之一異步之二異步實戰異步總結歸檔什么是異步我們知道的單線程的，這與它的用途有關。從今天開始研究一下javascript的異步相關內容，感興趣的請關注同期異步系列文章推薦javascript異步中的回調javascript異步與promisejavascript異步之Prom...

Sourcelink 2019-08-23 14:37 評論0 收藏0
談一談創建React Component的幾種方式

摘要：用這種方式創建組件時，并沒有對內部的函數，進行綁定，所以如果你想讓函數在回調中保持正確的，就要手動對需要的函數進行綁定，如上面的，在構造函數中對進行了綁定。當我們談起React的時候，多半會將注意力集中在組件之上，思考如何將頁面劃分成一個個組件，以及如何編寫可復用的組件。但對于接觸React不久，還沒有真正用它做一個完整項目的人來說，理解如何創建一個組件也并不那么簡單。在最開始的時候...

mylxsw 2019-08-20 14:24 評論0 收藏0
談一談Vuex

摘要：是什么官方文檔說道是一個專為應用程序開發的狀態管理模式。觸發之別名篇觸發之對象展開運算符篇觸發之對象展開運算符別名篇先引用官方文檔的說法類似于，不同在于提交的是，而不是直接變更狀態。 Vuex是什么官方文檔說道：Vuex 是一個專為 Vue.js 應用程序開發的狀態管理模式。它采用集中式存儲管理應用的所有組件的狀態，并以相應的規則保證狀態以一種可預測的方式發生變化什么是狀態管理模式...

nifhlheimr 2019-08-23 18:01 評論0 收藏0