谈一谈几种处置惩罚JavaScript异步操纵的方法

2024年1月18日 142次阅读 来源: jrainlau

弁言

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的实行。

六、尾声

作为一个归结和总结，本文内容的诸多知识点也是来自于别人的履历，不过加入了一些本身的明白和体味。不求科普于别人，但求作为个人的积聚。愿望读者可以提出修订的看法，配合进修提高！

    原文作者：jrainlau
    原文地址: https://segmentfault.com/a/1190000008489550
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞