promise和生成器函数的区别

Question

promise和生成器函数都可以解决回掉地狱，他们有什么区别吗？（没在项目中做过）

Answer 1

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 = "......";
    }
}