Принудительное асинхронное задание печати с обратными вызовами

Question

Я создаю учебный модуль для своих учеников, где я пытаюсь продемонстрировать силу обещаний против обратных вызовов. К сожалению, я родом из Python, поэтому мне не приходилось иметь дело с адом обратного вызова.

Задача состоит в том, чтобы я хотел преобразовать пример, который я использовал для демонстрации того, как асинхронный режим может давать неожиданные результаты, в тот, который дает ожидаемые результаты с помощью обратных вызовов.

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, но сначала я хочу показать, насколько неприятно это с обратными вызовами. Я пришел в JavaScript после того, как были представлены Promises, поэтому у меня мало опыта с адбэком обратного вызова.

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>

А вот код, если мы удалим обратные вызовы и используем обещания:

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>

Кроме того, вы можете проверить эту ссылку , где код преобразуется из кода стиля обратного вызова в обещания в асинхронное / ожидание.