promise
- ES6中一个十分好用和重要的个性
- Promise是异步编程的一种计划
什么时候用？
- 个别状况下是有异步操作时，应用Promise对这个异步操作进行封装
Promise需传入俩个参数，resolve（胜利时调用），reject（失败时调用）
new Promise((resolve, reject) => { setTimeout(() => { // 胜利的时候调用resolve // resolve('hello world') // 失败的时候调用reject reject('error message') }, 1000) }).then((data) => { // 1.100行解决的代码 console.log(data); console.log(data); console.log(data); console.log(data); console.log(data); console.log(data); }).catch((err) => { console.log(err) }) //输入 error message
Promise三种状态
- 当开发中有异步操作时，就能够给异步操作包装一个Promise
异步操作之后会有三种状态
- pending：期待状态，比方正在进行网络申请，或者定时器没有到工夫
- fulfill：满足状态，当咱们被动回调了resolve时，就处于该状态，并且会回调.then()
reject：回绝状态，当咱们被动回调了reject时，就处于该状态，并且会回调.catch()
new Promise((resolve,reject)=>{ setTimeout(()=>{ resolve('hlwd') reject('error') },1000) }).then(data => { console.log(data); },err => { console.log(err) })
Promise的链式调用
new Promise((resolve, reject) => { // 第一次网络申请的代码 setTimeout(() => { resolve() }, 1000) }).then(() => { // 第一次拿到后果的解决代码 console.log('hellowd') console.log('hellowd') console.log('hellowd') console.log('hellowd') console.log('hellowd') console.log('hellowd') return new Promise((resolve, reject) => { // 第二次网络申请的代码 setTimeout(() => { resolve() }, 1000) }) }).then(() => { // 第二次拿到后果的代码 console.log('hellow') console.log('hellow') console.log('hellow') console.log('hellow') console.log('hellow') console.log('hellow') return new Promise((resolve, reject) => { // 第三次网络申请的代码 setTimeout(() => { resolve() }) },1000) }).then(() => { // 第三次拿到后果的代码 console.log('hellowd') console.log('hello') console.log('hello') console.log('hello') console.log('hello') console.log('hello') })简化代码形式：
// 网络申请：aaa -> 本人解决（十行） // 解决：aaa111 -> 本人解决（十行） // 解决：aaa111222 -> 本人解决 new Promise((resolve, reject) => { setTimeout(() => { resolve('aaa') }, 1000) }).then((res) => { // 1.本人解决10行代码 console.log(res, '第一次的十行解决代码'); //2.对后果进行第一次解决 return new Promise((resolve) => { resolve(res + '111') }) }).then((res) => { console.log(res, '第二次的十行解决代码'); return new Promise((resolve) => { resolve(res + '222') }) }).then((res) => { console.log(res, '第三次的10行解决代码'); })
// SIMPLE WRITTEN new Promise((resolve, reject) => { setTimeout(() => { resolve('aaa') }, 1000) }).then((res) => { // 1.本人解决10行代码 console.log(res, '第一次的十行解决代码'); //2.对后果进行第一次解决 return Promise.resolve(res + '111') }).then((res) => { console.log(res, '第二次的十行解决代码'); return Promise.resolve(res + '222') }).then((res) => { console.log(res, '第三次的10行解决代码'); }) // SIMPLE WRITTEN 2 new Promise((resolve, reject) => { setTimeout(() => { resolve('aaa') }, 1000) }).then((res) => { // 1.本人解决10行代码 console.log(res, '第一次的十行解决代码'); //2.对后果进行第一次解决 return res + '111' }).then((res) => { console.log(res, '第二次的十行解决代码'); return res + '222' }).then((res) => { console.log(res, '第三次的10行解决代码'); }) //报错 new Promise((resolve, reject) => { setTimeout(() => { resolve('aaa') }, 1000) }).then((res) => { // 1.本人解决10行代码 console.log(res, '第一次的十行解决代码'); //2.对后果进行第一次解决 return Promise.reject('报错') //or //throw '报错' }).then((res) => { console.log(res, '第二次的十行解决代码'); return Promise.resolve(res + '222') }).then((res) => { console.log(res, '第三次的10行解决代码'); }).catch((eerr) => { console.log(eerr); }) Promise的all办法
退出某一需要要发送两次申请能力实现
Promise.all([ new Promise((resolve, reject) => { setTimeout(() => { resolve('result') }, 2000) }), new Promise((resolve, reject) => { setTimeout(() => { resolve('result2') }, 1000) }) ]).then(results => { console.log(results); })