使用回调强制执行异步打印顺序

Question

我正在为我的学生创建一个学习模块，我试图展示承诺与回调的力量。不幸的是，我来自Python背景，所以回调地狱不是我必须处理的事情。

手头的任务是我想转换一个示例，我用它来演示async如何产生意外的结果，使用回调产生预期的结果。

function print1() {
    mimicAsync(1);
}

function print2() {
    mimicAsync(2);
}

function print3() {
    mimicAsync(3);
}

print1();
print2();
print3();

<script>
function mimicAsync(num) {
	setTimeout(function() {
  	document.getElementById("output").innerHTML += num;
  }, Math.floor(Math.random() * 1000));
}
</script>
<span id="output"></span>

我知道如何用Promises做到这一点，但我想先说明回调是多么令人不快。在Promises推出后我进入了JavaScript，因此对回调地狱几乎没有经验。

Answer 1

function print1(cb) {
  mimicAsync(1, cb);
}

function print2(cb) {
  mimicAsync(2, cb);
}

function print3(cb) {
  mimicAsync(3, cb);
}

function print4() {
  mimicSync(4);
}

function print5(cb) {
  mimicAsync(5, cb);
}

print1(function(err1, data1) {
  if (!err1) {
    print2(function(err2, data2) {
      if (!err2) {
        print3(function(err3, data3) {
          if (!err3) {
            print4();
            print5(function(err5, data5) {
              if (!err5) {
                //do next
              }
            })
          }
        })
      }
    })
  }
});

<script>
  function mimicAsync(num, cb) {
    setTimeout(function() {
      document.getElementById("output").innerHTML += num;
      cb(null, 'success'); //return data in callback
    }, Math.floor(Math.random() * 1000));
  }

  function mimicSync(num) {
    document.getElementById("output").innerHTML += num;
  }
</script>
<span id="output"></span>

如果我们删除回调并使用Promises，这是代码：

function print1() {
  return mimicAsync(1);
}

function print2() {
  return mimicAsync(2);
}

function print3() {
  return mimicAsync(3);
}

function print4() {
  mimicSync(4);
}

function print5() {
  return mimicAsync(5);
}

print1().then(data1 => {
    return print2();
  }).then(data2 => {
    return print3();
  }).then(data3 => {
    print4();
    print5();
  }).then(data5 => { /*do next*/ })
  .catch(err => console.log(err));

<script>
  function mimicAsync(num) {
    return new Promise((res, rej) => {
      setTimeout(function() {
        document.getElementById("output").innerHTML += num;
        res('success'); //resolve the promise
        //rej('error) to reject the promise
      }, Math.floor(Math.random() * 1000));
    });
  }

  function mimicSync(num) {
    document.getElementById("output").innerHTML += num;
  }
</script>
<span id="output"></span>

此外，您可以检查此link，其中代码从回调样式代码转换为promise到async / await。