這篇文章主要講解了JavaScript異步操作的幾種常見處理方法，內(nèi)容清晰明了，對此有興趣的小伙伴可以學(xué)習(xí)一下，相信大家閱讀完之后會有幫助。

十年的柘榮網(wǎng)站建設(shè)經(jīng)驗，針對設(shè)計、前端、開發(fā)、售后、文案、推廣等六對一服務(wù)，響應(yīng)快，48小時及時工作處理。營銷型網(wǎng)站的優(yōu)勢是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同，自動調(diào)整柘榮建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計，從而大程度地提升瀏覽體驗。創(chuàng)新互聯(lián)公司從事“柘榮網(wǎng)站設(shè)計”,“柘榮網(wǎng)站推廣”以來，每個客戶項目都認(rèn)真落實執(zhí)行。

引言

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

一、回調(diào)函數(shù)

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

首先定義三個函數(shù)：

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

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

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

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

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

fn2(fn3)

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

二、事件發(fā)布/訂閱

發(fā)布/訂閱模式也是諸多設(shè)計模式當(dāng)中的一種，恰好這種方式可以在es5下相當(dāng)優(yōu)雅地處理異步操作。什么是發(fā)布/訂閱呢？以上一節(jié)的例子來說，fn1，fn2，fn3都可以視作一個事件的發(fā)布者，只要執(zhí)行它，就會發(fā)布一個事件。這個時候，我們可以通過一個事件的訂閱者去批量訂閱并處理這些事件，包括它們的先后順序。下面我們基于上一章節(jié)的例子，增加一個消息訂閱者的方法（為了簡單起見，代碼使用了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內(nèi)調(diào)用其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

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

三、Promise

使用Promise的方式，就不需要額外地編寫一個消息訂閱者函數(shù)了，只需要異步函數(shù)返回一個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')
}

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

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

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

使用Promise與回調(diào)有兩個最大的不同，第一個是fn2與fn3得以解耦；第二是把函數(shù)嵌套改為了鏈?zhǔn)秸{(diào)用，無論從語義還是寫法上都對開發(fā)者更加友好。

四、generator

如果說Promise的使用能夠化回調(diào)為鏈?zhǔn)剑敲磄enerator的辦法則可以消滅那一大堆的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函數(shù)asyncFunArr()接受一個待執(zhí)行函數(shù)列表fn，異步函數(shù)將會通過yield來執(zhí)行。在異步函數(shù)內(nèi)，通過af.next()激活generator函數(shù)的下一步操作。

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

五、優(yōu)雅的async/await

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

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

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

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

看完上述內(nèi)容，是不是對JavaScript異步操作的幾種常見處理方法有進(jìn)一步的了解，如果還想學(xué)習(xí)更多內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

新聞名稱：JavaScript異步操作的幾種常見處理方法
本文網(wǎng)址：http://www.chinadenli.net/article46/pgidhg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供移動網(wǎng)站建設(shè)、品牌網(wǎng)站制作、搜索引擎優(yōu)化、外貿(mào)建站、、全網(wǎng)營銷推廣

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)