promise的作用
为什么要用promise、它的作用是什么、解决了什么问题?
1、Promise对象可以理解为一次执行的异步操作,使用promise对象之后可以使用一种链式调用的方式来组织代码;让代码更加的直观。
2、有了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的作用所在了。