异步promise机制
程序员文章站
2022-03-05 07:54:11
...
1. Promise链
const setDelay = (millisecond) => {
return new Promise((resolve, reject)=>{
if (typeof millisecond != 'number') reject(new Error('参数必须是number类型'));
setTimeout(()=> {
resolve(`我延迟了${millisecond}毫秒后输出的`)
}, millisecond)
})
}
const setDelaySecond = (seconds) => {
return new Promise((resolve, reject)=>{
if (typeof seconds != 'number' || seconds > 10) reject(new Error('参数必须是number类型,并且小于等于10'));
setTimeout(()=> {
console.log(`先是setDelaySeconds函数输出,延迟了${seconds}秒,一共需要延迟${seconds+2}秒`)
resolve(setDelay(2000)) // 这里依赖上一个Promise
}, seconds * 1000)
})
}
setDelay(2000)
.then((result)=>{
console.log(result)
console.log('我进行到第一步的');
return setDelaySecond(3)
})
.then((result)=>{
console.log('我进行到第二步的');
console.log(result);
}).catch((err)=>{
console.log(err);
})
2.then catch finally
then 返回两个参数 result (resolve)、error(reject)
catch 针对于整个链式写法的错误捕获的, 链式中的catch
并不是终点!!catch完如果还有then还会继续往下走
finally 表示在catch后必须肯定会默认执行的的操作
3. 如何跳出或停止Promise链式
3.1 reject跳出
setDelay(2000)
.then((result)=>{
console.log(result)
console.log('我进行到第一步的');
return setDelaySecond(1)
})
.then((result)=>{
console.log('我进行到第二步的');
console.log(result);
console.log('我主动跳出循环了');
return Promise.reject('跳出循环的信息') // 这里返回一个reject,主动跳出循环了
})
.then((result)=>{
console.log('我不执行');
})
.catch((mes)=>{
console.dir(mes)
console.log('我跳出了');
})
便于区分异常跳出和主动跳出,添加isNotErrorExpection参数
return Promise.reject({
isNotErrorExpection: true // 返回的地方加一个标志位,判断是否是错误类型,如果不是,那么说明可以是主动跳出循环的
})
3.2 一直pengding 相当于跳出了,可能会出现内存泄漏
return new Promise(()=>{console.log('后续的不会执行')})
这里返回的一个新的Promise,没有resolve和reject,那么会一直处于pending状态,因为没返回啊,那么这种状态就一直保持着,中断了这个Promise
4. Promise.all 并行执行
Promise.all([setDelay(1000), setDelaySecond(1)]).then(result=>{
console.log(result);
})
.catch(err=>{
console.log(err);
})
上一篇: Vue2 数据劫持原理
下一篇: axios使用