JS promise
1 目的: 为了解决回调地狱
setTimeout(() => {
console.log('买菜');
}, 1000);
setTimeout(() => {
console.log('洗菜');
}, 1000);
setTimeout(() => {
console.log('炒菜');
}, 1000);
setTimeout(() => {
console.log("买菜");
setTimeout(() => {
console.log("洗菜");
setTimeout(() => {
console.log("炒菜");
}, 1000);
}, 1000);
}, 1000);
2 promise结构
new Promise(function (resolve, reject) {
// resolve("赢取白富美");
reject("凉快去吧");
}).then(
(value) => { console.log(value); },
(value) => { console.log(value); }
);
如果成功 resolve(value) 执行then里的第一个函数并传递value值
如果失败 reject(error) 执行then里的第二个函数并传递error值
如果function里失败了reject(), then里必须写全两个函数,若只写第一个,会找不到reject对应的第二个函数,
--程序报错❌ Uncaught (in promise) step2失败--
但可以写成then(null,()=>{})
3 链式调用then
通常都是: 成功则继续,失败停止
完整写法
let p = new Promise((resolve, reject) => {
resolve("step1");//第1步
});
p.then(
() => {
if (1) return "step2成功";//第2步
else return Promise.reject("step2失败");
},
(error) => {
return Promise.reject(error);
}
)
.then(
() => {
if (1) return "step3成功";//第3步
else return Promise.reject("step3失败");
},
(error) => {
return Promise.reject(error);
}
)
.then(
(data) => {
console.log(data);//第4步
},
(error) => {
console.log(error);
}
);
/*完整写法有个缺点,比如下面这个例子 */
p.then(
() => {
if (0) return "step2成功";
else return Promise.reject("step2失败");//第2步
},
(error) => {
return Promise.reject(error);
}
)
.then(
() => {
if (0) return "step3成功";
else return Promise.reject("step3失败");
},
(error) => {
return Promise.reject(error);//第3步
}
)
.then(
(data) => {
console.log(data);
},
(error) => {
console.log(error);//第4步
}
);
简单写法,推荐
let p = new Promise((resolve, reject) => {
resolve("step1");//第1步
});
p.then(() => {
if (0) return "step2成功";
else return Promise.reject("step2失败");//第2步
})
.then(() => {
if (0) return "step3成功";
else return Promise.reject("step3失败");
})
.then(
(data) => {
console.log(data);
},
(error) => {
console.log(error);//第3步
}
);
如果想实现这样的流程: step1 => step2失败 => step3成功, 同样可以简单写法
let p = new Promise((resolve, reject) => {
resolve("step1");//第1步
});
p.then(() => {
if (0) return "step2成功";
else return Promise.reject("step2失败");//第2步
})
.then(
null,
() => {
if (1) return "step3成功";//第3步
else return Promise.reject("step3失败");
})
.then(
(data) => {
console.log(data);//第4步
},
(error) => {
console.log(error);
}
);
4 链式调用的中断
在上面链式调用的简单写法实际用到了链式调用的中断
let p = new Promise((resolve, reject) => {
resolve("step1");//第1步
});
p.then((data) => {
console.log(data);
if(0)
return "step2成功"
else
//中断下面的Promise的链式调用,利用了下一个then没有对于()=>{}造成中断
return Promise.reject("step2失败");//第2步
})
.then(() => {
console.log("step3");
})
.then(
(data) => {
console.log(data);
},
(error) => {
console.log(error);//第3步
}
);
在Promise中使用throw抛出异常，也会改变此Promise的状态，将其PromiseState改变为rejected，PromiseResult改变为抛出的异常。
即: throw "step2失败" === return Promise.reject("step2失败");
p.then((data) => {
console.log(data);
if(0)
return "step2成功"
else
throw "step2失败"
})
...
5 catch与finally
我们写链式调用.then的时候,最后必须写处理函数
.then(
(data) => {
console.log(data);
},
(error) => {
console.log(error);//第3步
}
);
如果没有,即最后的then是(()=>return Promise.reject("step2失败");),会报
Uncaught (in promise) step2失败
catch(callback)是then(null,callback)的别名,指定Promise失败时的回调
例如:
.then(
null,
(error) => {
console.log(error);//第3步
}
);
等价于
.catch(
(error) => {
console.log(error);//第3步
}
)
finally( 操作语句 )不管成功还是失败都会执行操纵语句,与error回调无关
.finally(
console.log("结束")
)
6 Promise静态方法
then catch finally是实例方法
Promise静态方法:
1 Promise.resolve 将对象转化成成功态Promise
例如:
Promise.resolve('成功了')
等价于
new Promise((resolve)=>{ resolve('成功了') })
2 Promise.reject 将对象转化成成功态Promise
例如:
Promise.reject('失败了')
等价于
new Promise((resolve,reject)=>{ reject('失败了') })
3 Promise.all 将多个Promise实例包装成一个新的Promise
var p = Promise.all([p1,p2,p3])
如果p1不是Promise,内部会调用Promise.resolve 进行转换
p.then()
如果[p1,p2,p3]都成功,执行then的第一个回调,否则执行then的第二个回调
then((valueall)=>{})中valueall=[value1,value2,value3]
4 Promise.race 返回最先完成的那个Promise
var p = Promise.all([p1,p2,p3])
7 then的返回值是promise对象
具体只看then里你写的return是什么
1.回调函数结果为非promise时, 状态为成功fulfilled(就是resolved),返回值为该值
//req.status == 200
myPromise.then(
function(value) {return 'sss'},
function(error) {}
);
或
//req.status ! 200
myPromise.then(
function(value) {},
function(error) {return 'sss'}
);
结果都是:
1. [[PromiseState]]: "fulfilled"
2. [[PromiseResult]]: "sss"
2.回调结果为promise,看这个promise
//req.status == 200
let p = myPromise.then(
function (value) { return Promise.resolve('cheng') },
function (error) { return Promise.reject('shibai') }
)
p.catch(error=>{})
结果:
1. [[PromiseState]]: "fulfilled"
2. [[PromiseResult]]: "cheng"
//req.status != 200
let p = myPromise.then(
function (value) { return Promise.resolve('cheng') },
function (error) { return Promise.reject('shibai') }
)
p.catch(error=>{})
结果:
1. [[PromiseState]]: "reject"
2. [[PromiseResult]]: "shibai"
//req.status == 200
let p = myPromise.then(
function (value) { return Promise.reject('cheng') },
function (error) { return Promise.reject('shibai') }
)
p.catch(error=>{})
结果:
1. [[PromiseState]]: "reject"
2. [[PromiseResult]]: "cheng"
