promise介绍
- promise主要是为了解决嵌套回调的问题，使代码更加简洁，promise将嵌套的回调函数改成.then()的连缀使用
promise 的使用
-
方法：
- 首先通过new Promise（function）创建一个promise对象，接收一个函数参数，并且在函数中传入resolve以及reject两个参数；
var p = new Promise(function(resolve, reject){
//做一些异步操作
setTimeout(function(){
console.log('这是一个异步操作');
resolve('异步操作成功并且结束');
}, 1000);
});
API
- then() 接收两个函数，分别是对promise的resolve及reject状态处理的函数，并且处理结束之后返回promise对象
function fn1() {
console.log("第一个函数开始执行");
var p = new Promise(function (resolve, reject) {
setTimeout(function () {
console.log('第一个函数执行完毕');
resolve('接下来进入第二个函数');
}, 1000);
});
return p;
}
function fn2(data) {
console.log(data);
console.log('第二个函数开始执行');
var p = new Promise(function (resolve, reject) {
setTimeout(function () {
var num = Math.ceil(Math.random() * 10); // 生成随机数
console.log(num);
//num = 0；设置num=0
if (num === 0) {
console.log('第二个函数执行完毕');
resolve('所有函数执行完毕');
}
else{
reject("执行函数2失败");
}
}, 2000);
});
return p;
}
fn1()
.then(function (data) {
return fn2(data);
})
.then(function (data) {
console.log(data);
})
调用reject（）
设置num =0 调用resolve（）
- all() 接收一个函数数组，进行并发操作，并将每个函数的结果以数组的形式返回
function fn1() {
console.log("第一个函数开始执行");
var p = new Promise(function (resolve, reject) {
setTimeout(function () {
console.log('第一个函数执行完毕');
resolve('接下来进入第二个函数');
}, 1000);
});
return p;
}
function fn2() {
console.log('第二个函数开始执行');
var p = new Promise(function (resolve, reject) {
setTimeout(function () {
console.log('第二个函数执行完毕');
resolve('所有函数执行完毕');
}, 2000);
});
return p;
}
Promise.all([fn1(), fn2()])
.then(function (resut) {
console.log(resut);
})
执行结果
- race()接收函数数组，函数先执行完成之后先进入下一个回调函数中
function fn1() {
console.log("第一个函数开始执行");
var p = new Promise(function (resolve, reject) {
setTimeout(function () {
console.log('第一个函数执行完毕');
resolve('接下来进入第二个函数');
}, 5000);
});
return p;
}
function fn2() {
console.log('第二个函数开始执行');
var p = new Promise(function (resolve, reject) {
setTimeout(function () {
console.log('第二个函数执行完毕');
resolve('所有函数执行完毕');
}, 1000);
});
return p;
}
Promise.race([fn1(), fn2()])
.then(function (resut) {
console.log(resut);
})
image.png
- catch() 当then中出现错误时不会中止整个函数，catch能够获取到错误并进行提示
function fn1() {
console.log("第一个函数开始执行");
var p = new Promise(function (resolve, reject) {
setTimeout(function () {
console.log('第一个函数执行完毕');
resolve('接下来进入第二个函数');
}, 1000);
});
return p;
}
function fn2() {
console.log('第二个函数开始执行');
var p = new Promise(function (resolve, reject) {
setTimeout(function () {
console.log('第二个函数执行完毕');
resolve('所有函数执行完毕');
}, 1000);
});
return p;
}
fn1()
.then(function(data){
console.log(errPart); //errPart没有定义
return fn2(data);
})
.then(function (data) {
console.log(data);
})
.catch(function (err) {
console.log(err);
})
执行结果
参考链接：
https://segmentfault.com/a/1190000009478377
https://www.cnblogs.com/whybxy/p/7645578.html
https://yangbo5207.github.io/wutongluo/ji-chu-jin-jie-xi-lie/shi-san-3001-promise.html
网友评论