promise和生成器函数的区别

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的迭代器。
  • 通过调用生成器的下一个方法消耗值时,Generator函数将执行,直到遇到yield关键字。
  • 可以根据需要多次调用该函数,并且每次都返回一个新的Generator,但每个Generator只能迭代一次。
<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 = "......";
    }
}

生成器是一种特殊类型的函数。当从头到尾运行标准函数时,它最多只生成一个值。然而生成器函数会在几次运行请求中暂停,因此每次运行都可能会生成一个值。
 创建异步对象,当异步对象中的异步操作执行完成之后,再执行想要执行的东西。