javascript异步编程总结

x33g5p2x  于2022-03-18 转载在 Java  
字(1.6k)|赞(0)|评价(0)|浏览(241)

一、写在前面
众所周知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,rejectedPromise的状态一旦改变之后,就不会发生任何改变,将回调函数编程链式调用。
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中的PromiseGenerator,最后是ES7的async。

相关文章

微信公众号

最新文章

更多