从一脸懵逼到掌握Promise
Promise的中文意思就是承诺,承诺的意思就是我等会会给你一个结果。 这也就是大家经常用来描述Promise的话:“它是用来解决异步编程的方案”
那JS中的异步又是什么呢?
什么是异步?
同步:一定要等任务执行完毕,得到结果,才会接着执行下一个任务。
function work1 = function(){
return '同步任务的返回值'
}
var result = work1() //work1就是同步任务的结果
work2() //然后执行下一个任务
异步:不等任务执行完,直接执行下一个任务
function work1 = function(){
var result = setTimeout(function(){
console.log('异步任务的结果')
},3000)
return result
}
var result = work1 //result 不是异步任务的结果,而是一个 timer id
work2() //立即执行其他任务,不等异步任务结束。
这时候我们发现,我们拿到的这个result 不是异步执行的结果,而是一个timer id,我们想要拿到这个异步任务的结果,就要使用回调。
function work1 = function(callback){
var result = setTimeout(function(){
callback('异步任务结果')
},3000)
return result
}
work1(function callback(result){
console.log(result) //3秒钟后,这个callback 函数会被执行
})
work2() //立即执行其他任务,不等异步任务结束。
回调」经常用于获取「异步任务」的结果。
Promise出现的原因
我们在看完上面的异步之后,接着来按照上面的思路处理一个网络请求。
// request:一个异步网络请求
// response:网络请求的响应
requset1(function(response1){
处理response1
})
如果这个时候,我们需要根据第一个请求的结果,再去执行第二个请求。
requset1(function(response1){
request2(function(response2){
处理response2
})
})
如果我们后面还有更多的需求呢? 这时候就出现了大家经常提的「回调地狱」。
result1(function(response1){
result2(function(response2){
result3(function(response3){
result4(function(response4){
result5(function(response5){
result6(function(response3){
...
})
})
})
})
})
})
我们发现根据以往的方案,这种异步会让我们的代码越来越长,难以维护。甚至都有点看不明白。 这时候Promise就出现了。
啥是promise啊?
Promise 是异步编程的一种解决方案,比传统的异步解决方案「回调函数」和「事件」更合理、更强大。现已被 ES6 纳入进规范中。
我们来改写一下上面臃肿的代码:
new Promise(request1)
.then(request2(response1))
.then(requset3(response2))
.then(requset4(response3))
.then(requset5(response4))
.then(requset6(response5))
.catch(处理异常(异常信息))
Promise在处理异步的时候,不但写法更优雅,也更容易让人明白,并且能够在外层捕获异步函数的异常信息。
关于promise面试
1.promise的三种状态:
promise
有三种状态:pending(等待态)
,fulfiled(成功态)
,rejected(失败态)
。
2.手写一个promise
function fn(){
return new Promise((resolve,reject)=>{
成功时调用 resolve(数据)
失败时调用 reject(错误)
})
}
fn().then(success,fail).then(success2,fail2)
3.promise.all怎么用?
Promise.all()
方法用于将多个 Promise
实例,包装成一个新的 Promise
实例。
Promise.all([promise1, promise2]).then(success1, fail1)
promise1
和promise2
都成功才会调用success1
。
4.promise.rece怎么用?
Promise.race()
方法同样是将多个 Promise
实例,包装成一个新的 Promise
实例。
Promise.race([promise1, promise2]).then(success1, fail1)
promise1
和promise2
只要有一个成功就会调用success1
。
如果对你有帮助的话,请点个👍吧!我们继续分享更多文章的~
本文使用 mdnice 排版