js单线程和js异步操作的几种方法

Posted 2020-11-02 鱼樱、、

一、为什么javascript是单线程？
JavaScript语言的一大特点就是单线程，也就是说，同一个时间只能做一件事。
JavaScript的单线程，与它的用途有关。作为浏览器脚本语言，JavaScript的主要用途是与用户互动，以及操作DOM。
这决定了它只能是单线程，否则会带来很复杂的同步问题。比如，假定JavaScript同时有两个线程，一个线程在某个DOM节点上添加内容，另一个线程删除了这个节点，这时浏览器应该以哪个线程为准？
单线程就意味着，所有任务需要排队，前一个任务结束，才会执行后一个任务。如果前一个任务耗时很长，后一个任务就不得不一直等着。
一种是同步任务（synchronous），另一种是异步任务（asynchronous）。
同步任务指的是，在主线程上排队执行的任务，只有前一个任务执行完毕，才能执行后一个任务；
异步任务指的是，不进入主线程、而进入”任务队列”（task queue）的任务，只有”任务队列”通知主线程，某个异步任务可以执行了，该任务才会进入主线程执行。
-------------------------------------------------------------------------
js的异步操作的几种方法：
1.回调函数
function fn1 () {
  console.log(‘方法一‘)
}

function fn2 () {
  setTimeout(() => {
    console.log(‘方法二‘)
  }, 1000)
}

function fn3 () {
  console.log(‘方法三‘)
}

现在我希望可以依次执行fn1，fn2，fn3。为了保证fn3在最后执行，我们可以把它作为fn2的回调函数：
function fn2 (f) {
  setTimeout(() => {
    console.log(‘方法二‘)
    f()
  }, 1000)
}

fn2(fn3)
由此可以看出fn2和fn3完全耦合在一起，如果多了就耦合度很高；
-----------------------------------------------------------------------------
2.事件发布/订阅（可以在es5下相当优雅地处理异步操作）
fn1，fn2，fn3都可以视作一个事件的发布者，只要执行它，就会发布一个事件。这个时候，我们可以通过一个事件的订阅者去批量订阅并处理这些事件，包括它们的先后顺序。
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(‘方法一‘)
  asyncFunArr.next()
}

function fn2 () {
  setTimeout(() => {
    console.log(‘方法二‘)
    asyncFunArr.next()
  }, 500)
}

function fn3 () {
  console.log(‘方法三‘)
  asyncFunArr.next()
}

//依次输出方法一、方法二、方法三
---------------------------------------------------------------------------------
3.Promise
function fn1 () {
  console.log(‘方法一‘)
}

function fn2 () {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log(‘方法二‘)
      resolve()
    }, 500)
  })
}

function fn3 () {
  console.log(‘方法三‘)
}

其中fn2是一个返回Promise的异步函数，现在按顺序执行它们；

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

//依次输出方法一、方法二、方法三
---------------------------------------------------------------------------------
4.generator（这种方式还是不够优雅）
function fn1 () {
  console.log(‘方法一‘)
}

function fn2 () {
  setTimeout(() => {
    console.log(‘方法二‘)
    af.next()
  }, 500)
}

function fn3 () {
  console.log(‘方法三‘)
}

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

const af = asyncFunArr(fn1, fn2, fn3)

af.next()

//依次输出方法一、方法二、方法三

如果有多个异步函数，那么这个generator函数肯定得改写，而且在语义化的程度来说也有一点不太直观。
------------------------------------------------------------------------------------
5.优雅的async/await（最新版本的Node已经可以原生支持async/await写法了，通过各种pollyfill也能在旧的浏览器使用。）
function fn1 () {
  console.log(‘方法一‘)
}

function fn2 () {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log(‘方法二‘)
      resolve()
    }, 500)
  })
}

function fn3 () {
  console.log(‘方法三‘)
}

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

asyncFunArr()

//依次输出方法一、方法二、方法三

异步的操作都返回Promise，需要顺序执行时只需要await相应的函数即可，这种方式在语义化方面非常友好;