这篇文章是为看了却看不懂Promise的同学准备的,如果还未接触过Promise,应先尝试学习,再回来讨论
先梳理下Promise到底解决了什么痛点:我们不知道异步操作(它是一个黑盒)什么时候执行结束,而Promise可以通知我们。
接下来从0开始理解:比如我们想要延迟1秒执行一段代码,于是就把这段代码写到一个定时器里,这个定时器里的回调函数就是一个异步操作。
setTimeout(()=>{
console.log('我想在1秒后执行这行代码')
},1000)
但我们还想要等这段代码执行完时执行别的代码,可我们不知道这段代码什么时候执行完,那怎么办?凭直觉讲,那就直接把别的代码写到那段代码后面就行了呗,像这样:
setTimeout(()=>{
console.log('我想在1秒后执行这行代码')
console.log('我想在前面的执行完之后执行')
},1000)
看似轻松地解决了问题,但如果别的代码还是一个异步操作呢
setTimeout(()=>{
console.log('我想在1秒后执行这行代码')
setTimeout(()=>{
console.log('我想在前面的执行完后2秒执行')
},2000)
},1000)
显而易见,会一层套一层。之前写socket编程时,会有很多的异步网络请求,就这样各种嵌套回调,代码变得很复杂,也更难维护。同时,每一个异步函数的执行上下文(作用域)就被限制在这个setTimout的回调里面了,多个回调之间就难以建立联系。
那Promise是怎么通知我们异步操作结束了的呢?来实践一下。
先把我们的异步操作放到Promise对象里面去:
let p = new Promise(
(resolve, reject)=>{
setTimeout(()=>{
console.log('我想在1秒后执行这行代码')
},1000)
}
)
在new这个Promise时,构建器函数(就是(resolve,reject)=>{})也会立即开始执行,我们的异步操作也就在其中执行了。不过这看起来好像和之前的方式没什么区别呀,就是放到了一个对象里面嘛。不着急,来看构造器函数的参数:resolve和reject函数(由JavaScript引擎定义好的),这就是Promise的用处所在,这两个函数就是一个“通知”,来告诉我们异步操作的状态,我们在上述代码中做出修改:
let p = new Promise(
(resolve, reject)=>{
setTimeout(()=>{
console.log('我想在1秒后执行这行代码')
resolve()
},1000)
}
)
这里在第5行增加了一个resolve(),一旦执行了resolve(),就相当于发出了一个通知说“这个异步操作完成啦”,这个通知写在哪里是由你来定的,不过当然是要在异步操作执行结束后进行通知啦(这里不展开讲reject()了,同理)。那么,虽然通知发出去了,别的代码(console.log('我想在前面的执行完之后执行'))怎么知道上一个异步操作执行结束了呢?这就需要接收到那个通知,then()就是负责接收通知的,一旦resolve()了,就会进入then()里面,把别的代码写到then()里面就可以啦!(关于then的参数以及与catch的异同不展开了)
let p = new Promise(
(resolve, reject)=>{
setTimeout(()=>{
console.log('我想在1秒后执行这行代码')
resolve()
},1000)
}
).then(
()=>{console.log('我想在前面的执行完之后执行')}
)
而回调嵌套回调的代码也解开了嵌套,变成了:
let p = new Promise(
(resolve, reject)=>{
setTimeout(()=>{
console.log('我想在1秒后执行这行代码')
resolve()
},1000)
}
).then(
()=>{
setTimeout(()=>{
console.log('我想在前面的执行完后2秒执行')
},2000)
}
)
这就是Promise的作用所在了。
第一次写教程文章,欢迎一起讨论,疏漏之处,望不吝指出,后面将结合事件循环再挖一锹,涉及概念:Event Loop(事件循环)、Macrotask(宏任务)、Microtask(微任务)、Task Queue(任务队列)、Job Queue(工作队列)