一、写在前面
众所周知javascript是单线程工作，也就是只有一个脚本执行完成后才能执行到下一个脚本，两个脚本不能同时执行，如果某一个脚本耗时比较长，后面的脚本就得排队等待，会拖延整个程序的执行。如何让程序像人一样可以多线程工作呢？一下为几种异步编程方式总结。
异步编程传统的解决方案是：回调函数和事件监听
二、异步编程总结
异步编程的方式主要存在以下几种：回调函数，事件监听，发布订阅模式,Promise,Generator(ES6)，async(ES7)。
2.1、回调函数

function f1() {
  setTimeout(function () {
    console.log('执行f1')
  },1000)
  f2()
}

function f2() {
  console.log("执行f2")
}

f1()

//执行f2
//执行f1

这里的匿名函数就是回调函数，当定时器的时间到的时候，此时就会进行函数的回调，并且f2是同步函数。
2.2、事件监听
脚本的执行，不取决与代码的执行顺序，而取决于某一个事件是否发生。

<body>

  <button>点击</button>

  <script>
    let btn = document.querySelector('button')
    btn.addEventListener('click', () => {
      console.log('触发click事件')
    })

  </script>
  
</body>

2.3、发布订阅模式

//订阅done事件
$('#app').on('done',function(data){
  console.log(data)
})
//发布事件
$('#app').trigger('done,'haha')

2.4、Promise
Promise实际就是一个对象，从他可以获得异步操作的信息，Promise对象存在三种状态,pending,fulfilled,rejected。Promise的状态一旦改变之后，就不会发生任何改变，将回调函数编程链式调用。
2.5、Generator
使用generator的方式，他可以在函数的执行过程中，将函数的执行权转移出去，在函数外部我们还可以将执行权转移回来。当我们遇到异步函数执行的时候，将函数的执行权转移出去，当异步函数执行完毕的时候我们再将执行权给转移回来。因此我们可以在generator内部对于异步操作的方式，可以以同步的方式进行书写。使用这种方式我们需要考虑的问题是何时将函数的控制权转移回来，因此我们需要有一个自动执行generator的机制，比如说co模块等方式来实现generator的自动执行。
2.6、async
async函数返回的是一个Promise对象，可以使用then方法添加回调函数，async函数内部return语句的值，会成为then方法回调函数的参数。当函数执行的时候，一旦遇到await就会先返回，等到异步操作完成，再接着执行函数体内部的语句。
还需要注意的是，await命令后面返回的是Promise对象，运行结果可能是rejected,所以最好把await命令放到try...catch中。

async function demo() {
 try {
  await new Promise(function (resolve, reject) {
   // something
  });
 } catch (err) {
  console.log(err);
 }
}
 
demo().then(data => {
  console.log(data) // 
})

三、总结*
总结一下上面的六种异步编程的方式，首先最古老的是回调函数和事件监听，还有就是订阅发布模式，然后就是ES6中的Promise和Generator，最后是ES7的async。

javascript异步编程总结

相关文章

热门标签

最新文章