ES6—promise
一:
如果产生需求:多个异步函数必须顺序执行,可以两步来解决:
1、定义前一项任务时,就要定义回调函数参数,并在自己的任务执行完之后自动调用回调函数。
2、调用时,将要做的下一件事,包裹在一个匿名函数中作为参数传入前一个函数中
如下面代码所示:使用callback来完成这个功能:
执行aa->bb->cc->console.log(“end”)
<script>
function aa(callback) {
console.log("go...");
setTimeout(function () {
console.log("finish");
//写在这里的代码一定会在亮到达终点后才执行
callback();
},6000)
}
function bb(callback) {
console.log("go to...");
setTimeout(function () {
console.log("finished");
callback();
},4000)
}
function cc(callback){
console.log("go to to...");
setTimeout(function () {
console.log("finisheed");
callback();
},3000)
}
aa(
//在aa开始调用时,就把下一项任务提前托付给aa,任务中就一句话:"bb();"
function () {//弊端:产生回调地狱
bb(
function () {
cc(
function () {
console.log("end");
}
);
}
);
}
);
//最后输出end
</script>
输出结果如下图:
这种实现方法弊端是会产生**“回调地狱”**
二:
使用promise来解决这个问题
promise基本的原理:把函数内容包成一块一块的,然后开一个口open()传给下一个执行的函数
使用方法为.then()
用return new Promise(function(open){
//内容
open (add)//add为要传下去的参数值
})
代码:
<script>
function aa() {
return new Promise(function (open) {
var add="oil";//生产oil,接力传下去
console.log(`${add}`);
console.log("go...");
setTimeout(function () {
console.log("finish");
open(add);//open,告诉下面可以执行了,下传
},6000)
})
}
function bb(addd) {//addd接收从上面传下来的add值
return new Promise(function (open) {
console.log(`${addd}`);
console.log("go to...");
setTimeout(function () {
console.log("finished");
open(addd);
},4000)
})
}
function cc(adddd){
return new Promise(function (open) {
console.log(`${adddd}`);
console.log("go to to...");
setTimeout(function () {
console.log("finisheed");
open(adddd);
},3000)
})
}
aa()
.then(bb)//aa完事后执行bb
.then(cc)//bb完事后执行cc
.then(function (addddd) {//接收上面传下来的adddd
console.log(`${addddd}`);
console.log("over");
})
</script>
执行结果如下所示: