promise和生成器函数都可以解决回掉地狱,他们有什么区别吗?(没在项目中做过)
Promise概念:是异步编程的一种解决方案:从语法上讲,promise是一个对象,从它可以获取异步操作的消息;从本意上讲,它是承诺,承诺它过一段时间会给你一个结果。promise有三种状态: pending(等待态),fulfiled(成功态),rejected(失败态);状态一旦改变,就不会再变。创造promise实例后,它会立即执行。
//es6解决异步代码
<script>
console.log("开始");
console.log("进行");
//resolve :异步操作执行成功后的回调函数
//resolve :异步操作执行成功后的回调函数
let promise = new Promise((resolve, reject) => {
console.log("异步执行的代码");
// resolve();
reject();
});
promise.then(() => {
console.log("执行成功的异步代码");
}, () => {
console.log("执行失败的异步代码");
});
console.log("结束");
</script>
//Promise es6实现异步操作
function timeOut(time){
return new Promise((resolve,reject)=>{
setTimeout(()=>{
resolve();
},time)
})
}
console.log("开始");
let promise = timeOut(1000);
promise.then(()=>{
console.log("吃饭");
return timeOut(1000);
}).then(()=>{
console.log("睡觉");
return timeOut(1000);
}).then(()=>{
console.log("打豆豆");
});
//Promise es7实现异步操作
//- async:加在function前面
//- await:加载函数里面
function timeOut(time){
return new Promise((resolve,reject)=>{
setTimeout(()=>{
resolve();
},time)
})
}
console.log("开始");
async function delay(){
await timeOut(1000);
console.log("吃饭");
await timeOut(1000);
console.log("睡觉");
await timeOut(1000);
console.log("打豆豆");
}
delay();
console.log("结束");
生成器(generator):function*
生成器返回的是一个迭代器
yield
:挂起代码,在想用的地方调用就行Generator
的迭代器。yield
关键字。<p>我说 <span id="content"></span></p>
<input type="button" value="点击" id="btn">
let content = document.getElementById("content");
let btn = document.getElementById("btn");
function* say() {
yield "嗨";
yield "你在干啥呢";
yield "我在吃饭呢,等会找你玩哈";
yield "看到消息请回复,拜拜";
}
//生成器返回的是一个迭代器
let iterator = say();
btn.onclick = function () {
// console.log(iterator.next());
let aa = iterator.next();
if (!aa.done) {
// console.log(aa.done);
content.innerHTML = aa.value;
}
else{
content.innerHTML = "......";
}
}
生成器是一种特殊类型的函数。当从头到尾运行标准函数时,它最多只生成一个值。然而生成器函数会在几次运行请求中暂停,因此每次运行都可能会生成一个值。
创建异步对象,当异步对象中的异步操作执行完成之后,再执行想要执行的东西。