promise使用实例
1直接return链式操作
// 创建一个promise对象括号里应当存放一个回调函数,此回调函数里有两个参数(自定义1,自定义2)
//自定义1执行代表可以进行下一步操作,自定义2不会进行下一步操作,并且会在最后的catch中被抓取错误信息
//这里自定义1是open 自定义2是err
new Promise(function first(open, err) {
var num = 1.11;
if (num > 1) {
setTimeout(function () {
console.log(11);
// 满足条件 open被打开 并且进行下一步
open()
}, 1000)
} else {
// 如果不满足条件则 调用err 被catch抓取
err("失败1")
}
})
//这里是第二级
.then(function second() {
return new Promise(function (open, err) {
setTimeout(() => {
console.log(22);
// open依然被打开,open的参数可以为字符串,对象,函数等,打开后这个参数会在下一个then里被调用
open("这里可以传递方法&数据");
// 如果调用err 那么catch 会报错 内容是“失败2” err里也可以使用字符串,函数,对象等
// err("失败2")
}, 1000);
})
})
//这里是第三级,在then的函数里使用形参(这里使用的是op)
//可以接住上一个 open()里的参数,并且可以在内容里使用
.then(function third(op) {
return new Promise(function (open, err) {
setTimeout(() => {
console.log(op + "------------这个是接到的数据");
console.log(33);
// open();
// 这里调用err,catch 报错内容为“失败3”
err("失败3")
}, 1000);
})
})
.catch(function (error) {
console.error(error + "失败也可以传数据");
})
// 以上是promise的使用方法 注意必须使用
//return new promise(function(自定义1,自定义2){函数主体})
//的方式把函数包裹起来,但是外层还要嵌套一个函数才可以return new promise
执行结果
// 先等一秒
11
// 再等一秒
22
// 再等一秒
这里可以传递方法&数据------------这个是接到的数据
33
失败3失败也可以传数据
2 把已经定义好promise对象的函数做链式链接
// 这里先把有返回 promise的函数定义好
// 第一个 hua
function hua() {
return new Promise(function (open, err) {
console.log("文华起跑...");
setTimeout(function () {//等待
if (Math.random() > 0.3) {
console.log("文华到达终点!");
//打开下一个接口
open("传给下一个函数的数据");
} else err("文华摔倒了!"); //否则失败被catch抓住,内容为 文华摔倒了
}, 7000);
})
}//Promise .then(function)
// 第二个 yaner
function yaner(op) {
return new Promise(function (open, err) {
console.log("燕儿起跑...");
setTimeout(function () {//异步等待
if (Math.random() > 0.4) {
// 此处打印出:燕儿到达终点!传给下一个函数的数据
console.log("燕儿到达终点!"+op);
//继续打开下一个接口
open();
} else err("燕儿摔倒了!");
}, 3000);
})
}
// 第三个 dong
function dong() {
console.log("东东起跑...");
setTimeout(function () {//异步等待
console.log("东东到达终点!");
}, 5000);
}
// 最后在这里把定义好的函数进行串联调用
hua()
.then(yaner)
.then(dong)
.catch(function (errInfo) { console.error(errInfo) });
执行结果
文华起跑...
文华到达终点!
燕儿起跑...
燕儿到达终点!传给下一个函数的数据
东东起跑...
东东到达终点!
// 由于会有随机数的判断,执行结果不完全一样
// 如果觉得看不懂可以直接将代码复制下来,自行执行一次,改一改参数再执行,折腾来折腾去就能理解
// 实例中人名是笔者恩师,若有重名,不甚荣幸!