脚本宝典收集整理的这篇文章主要介绍了es6基础0x023:Promise,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
0x000 概述
Promise
是一个异步编程的解决方案,他经常和ajax
一起出现,导致很多人以为Promise
是一种新的网络请求技术,其实不然。Promise
是一种思考方式、编程方式。
0x000 栗子
先写一个栗子
setTimeout(()=>{
console.log('here')
},3000)
很简单,3s之后将会打印出here
,现在换成Promise
:
new Promise((resolve, reject)=>{
setTimeout(()=>{
resolve()
}, 3000)
}).then(()=>{
console.log('here')
})
执行结果也是一样,3s之后将会输出here
,还可以这么写
let PRoxy=new Promise((resolve, reject)=>{
setTimeout(()=>{
resolve()
}, 3000)
})
setTimeout(()=>{
proxy.then(()=>{
console.log('here')
})
}, 10000)
13s后才输出here
0x002 初始化
-
语法
new Promise(executor)
-
参数:
- executor:处理器函数,函数的完整签名是
(resolve, reject)=>{}
- 返回值:一个
Promise
实例
-
栗子
let promise=new Promise((resolve, reject)=>{
setTimeout(()=>{
resolve()
}, 3000)
})
console.log(promise) // Promise {<PEnding>}
-
说明:
使用new Promise
实例化一个Promise
之后,将它输出出来,可以看到他有一个pending
,这是说明这个promise
的状态,称为Promisestatus
,promise
一共有3种状态,一个promise
必定处于下面三个状态之一:
-
pending
:初始状态
-
fulfilled
:操作成功
-
rejected
:操作失败
0x003 then
-
语法:
promise.then(onFulfilled, onRejected)
-
onFulfilled
:操作成功的回调
-
onRejected
:操作失败的回调
-
栗子1:
let promise=new Promise((resolve, reject)=>{
setTimeout(()=>{
resolve()
}, 3000)
})
console.log(promise) // Promise {<pending>}
promise.then(()=>{
console.log(promise) // Promise {<resolved>: undefined}
})
-
说明1:
当调用resolve
之后,then
函数执行了,同时promise
的PromiseStatus
变成了resolved
。onFulfilled
同时接受一个变量,称之为PromiseValue
:
let promise=new Promise((resolve, reject)=>{
setTimeout(()=>{
resolve(1)
}, 3000)
})
promise.then((value)=>{
console.log(value) // 1
})
-
栗子2:
let promise=new Promise((resolve, reject)=>{
setTimeout(()=>{
reject()
}, 3000)
})
console.log(promise) // Promise {<pending>}
promise.then(()=>{},()=>{
console.log(promise) // Promise {<rejected>: undefined}
})
当调用reject
之后,then
执行了,此时promise
的PromiseStatus
变成了rejected
,同时,onRejected
回调接受一个reason
,作为操作失败的原因说明:
let promise=new Promise((resolve, reject)=>{
setTimeout(()=>{
reject('nothing')
}, 3000)
})
promise.then(()=>{},(reason)=>{
console.log(reason) // nothing
})
0x004 catch
-
语法:
promise.catch(onRejected)
-
onRejected
:回调
-
栗子:
let promise=new Promise((resolve, reject)=>{
setTimeout(()=>{
resolve()
}, 3000)
}).then(()=>{
throw 'error'
}).catch((e)=>{
console.log(`i catch you: ${e}`) // i catch you error
})
-
注意1:在异中的错误不会执行catch
let promise=new Promise((resolve, reject)=>{
setTimeout(()=>{
throw 'error'
}, 3000)
}).catch((e)=>{
console.log(`i catch you: ${e}`) // Uncaught error
})
-
注意2:resolve
之后会被忽略
let promise=new Promise((resolve, reject)=>{
resolve()
throw 'error'
}).catch((e)=>{
console.log(`i catch you: ${e}`) // 不会输出
})
0x005 finally
-
语法:
p.finally(onFinally)
-
栗子:
let promise=new Promise((resolve, reject)=>{
setTimeout(()=>{
resolve()
}, 3000)
}).then(()=>{
console.log('resolve')
throw 'error'
}).catch((e)=>{
console.log(`i catch you: ${e}`)
}).finally(()=>{
console.log('finally')
})
// resolve
// i catch you error
// finally
以上是脚本宝典为你收集整理的es6基础0x023:Promise全部内容,希望文章能够帮你解决es6基础0x023:Promise所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。