一、认识Promise
1.Promise是一种异步编程的解决方案,主要用来解决回调地狱的问题,那么什么是回调地狱呢!那就是在实际开发当中,我们经常会遇到这样的业务场景,我们通过异步任务拿到了数据A,但是下一个数据B必须等到数据A拿到之后才能执行异步任务获取,数据C才需要等到数据B拿到之后再获取,下面我用定时器模拟异步任务来展示一下!我们来看一看:
//案例一
//发送ajax请求获取data
function ajax(data){
setTimeout(()=>{
console.log(data) //获得到data数据
},1000)
}
ajax(1024)
以上便拿到了数据data,但我们的需求是继续传递数据,所以继续
//案例二
function ajax(data){
setTimeout(()=>{
//继续发送请求传递data
setTimeout(()=>{
//继续传递数据
setTimeout(()=>{
console.log(data) //执行程序后你会发现是1000+2000+2000 5秒后输出data
},2000)
},2000)
},1000)
}
ajax(1024)
观察代码你会发现:
1.只有异步任务嵌套才能实现异步任务一个等一个的效果,但这种写法及其不美观,维护性和阅读起来都比较的吃力。
2.这样的代码,你会发现只能先定义回调,再执行回调,否则就会报错,当然这样也很正常
总结:如果有一种既美观,可读性也强,并且定义时间不受执行的限制的方案,那该多好啊。
于是。。。。。。。
Promise就来了
Promise是ES6为我们提供的一种方案,他可以解决以上我所提出的所有痛点。话不多说,我们来看一下上面同样的代码我们用promise怎么实现
//案例三
function ajax(data){
return new Promise((resolve,reject)=>{
setTimeout(()=>{
resolve(data)
},1000)
})
}
ajax(1024).then(
value=>{
return new Promise((resolve,reject)=>{
setTimeout(()=>{
resolve(value)
},2000)
})
}
).then(
value=>{
return new Promise((resolve,reject)=>{
setTimeout(()=>{
console.log(value) //经过一番折腾终于拿到了value 就是我们之前传入的data
},2000)
})
}
)
1.虽然看起来多了些代码,但是在结构上明朗了许多,而且在可维护性和阅读性上更为的美观了,这样我们就摆脱了异步嵌套的魔咒,书写更为美观的代码了。
2.而且细心的同学可能会发现,此时我们回调函数是可以在执行回调的后再进行定义的,不信可以把ajax函数定义中的定时器去掉,你会发现也不会报错的,原理在我后续的文章会进行讲到,暂时大家先记住这一点。
总结:所以我们可以总结了,其实promise是一种ES6为我们提供的异步编程的解决方案,他可以让我们摆脱类似于像案例一当中那种层层嵌套时像地狱般的写法(回调地狱),在实际开发当中我们会经常性的用到promise,其次promise也更为的灵活,其中.then() .catch() .race() .all() 等api都可以帮助我们去处理很多的业务场景。因此是一个很重要的知识点。
====> 下一篇文章我们认识一些promise的api