一、promise是什么呢
promise是异步编程的一种解决方案,比如在网络请求里面就有异步函数,但如果请求过于复杂时就会出现回调地狱,所以promise应运而生
二、链式编程解释与promise参数说明
链式编程
它的核心就是返回了this,也就是在调用方法完成之后会再执行return this
promise参数说明:
三、promise的基本使用
回调地狱
setTimeout(() => { /*第一层回调*/
console.log('hello 1');
setTimeout(() => { /*第二层回调*/
console.log('hello 2');
setTimeout(() => { /*第三次回调*/
console.log('hello 3');
}, 2000)
}, 1500)
}, 1000);
上面的回调太过生猛,不利于后期维护,也不利于阅读
优雅的promise
new Promise((resolve, reject) => { /*第一层*/
setTimeout(() => {
resolve() /*跳转到then*/
}, 1000)
}).then(() => {
console.log('hello 1');
/*因为它本身返回的就是void,而下面又会使用到链式编程,所以这里必须使用return new Promise()*/
return new Promise((resolve, reject) => { /*第二层*/
setTimeout(() => {
resolve()
}, 1500)
})
}).then(() => {
console.log('hello 2');
return new Promise((resolve, reject) => { /*第三层*/
setTimeout(() => {
resolve()
}, 2000)
})
}).then(() => {
console.log('hello 3');
})
使用了promise,虽然代码变长了,但更加有逻辑性,也利于后期维护
四、promise执行过程
new Promise() =》 执行promise里面的构造函数(1、保存一些状态信息2、执行传入的函数) =》 执行resolve()或者reject()函数 =》 执行then或者catch
五、promise的三种状态
pending:等待状态,比如正在网络请求
fulfill:满足状态,会调用resolve,且会回调.then()
reject:拒绝状态,会调用reject,且会回调.catch()
六、promise的另几种种写法
①
new Promise((resolve, reject) => {
setTimeout(() => {
resolve('success');
reject('fail')
}, 1000)
}).then(val => { /*再then里面传递两个参数(函数),分别是成功时与失败时*/
console.log(val);
}, err => {
console.log(err);
})
②
new Promise((resolve, reject) => {
setTimeout(() => {
resolve('123');
}, 1000)
}).then(val => {
console.log('resolve' + val);
return Promise.resolve(val + '456') /*简写*/
}).then(val => {
console.log(val);
return val + '789' /*是Promise.resolve的简写,在程序运行的时候会自动给它包装上Promise.resolve*/
}).then(val => {
console.log(val);
})
③
new Promise((resolve, reject) => {
setTimeout(() => {
reject('123');
}, 1000)
}).catch(val => {
console.log('reject' + val);
// throw 'errors';
return Promise.reject(val + '456') /*简写*/
}).catch(val => {
console.log(val);
})
七、Promise.all
Promise.all([ /*注意这里的参数是数组类型*/
new Promise((resolve, reject) => {
setTimeout(() => { /*模拟一次网络请求*/
resolve('123');
}, 1000)
}),
new Promise((resolve, reject) => {
setTimeout(() => { /*模拟一次网络请求*/
resolve('456');
}, 2000)
})
]).then(results => {
console.log(results); /*结果为数组类型*/
})
Promise.all的作用在于可以 把多个异步请求的结果统一处理而不需要判断异步请求返回的顺序,比如说,某一页面需要两次网络请求,然而并不知道这两次网络请求何时结束,而页面的处理又都需要这两次网络请求的数据,而Promise.all就是干这种事情的
本文只用于个人学习与记录