2 функции в цепочке Promise вызываются асинхронно

Question

Я учусь javascript Обещание. Я создал 2 независимые функции и объединяю их в функцию обещания. Однако вторая функция вызывается первой, даже если она находится во втором блоке then ().

Код указан ниже.

const one = document.getElementById('one');

function clkw(a){
    setTimeout(() => {
        one.innerHTML = a;
        return 2*a;
    }, 2000);
}

function clkw2(b){
    setTimeout(() => {
        one.innerHTML += ' '+b;
    }, 2000);
}

function trypromise(){
    const np = new Promise(resolve => {
        setTimeout(() => { 
            resolve(10)
        }, 2000);
    });

    np
        .then(function(data){
            return clkw(data);
        })
        .then(function(bata){
            clkw2(bata);
        });
}

Answer 1

Если вы хотите объединить и по-прежнему иметь возможность выполнять асинхронный код c в продолжении then, вы должны вернуть обещание, которое разрешается только тогда, когда результат готов.

В вашем фрагменте вы на самом деле не возвращаете никаких значений (или обещаний) из цепочки then s, которые могут быть использованы по конвейеру. По этой причине результат автоматически преобразуется в разрешенное обещание, которое не имеет никакого значения.

const one = document.getElementById('one');

function clkw(a){
    return new Promise(res => {
      setTimeout(() => {
          one.innerHTML = a;
          res(2*a);
      }, 2000);
    });
}
function clkw2(b){
    return new Promise(res => {
      setTimeout(() => {
          one.innerHTML += ' '+b;
          res();
      }, 2000);
    });
}
function trypromise(){
    const np = new Promise(resolve => {
        setTimeout(() => { 
            resolve(10)
        }, 2000);
    });

    np
    .then(function(data){
        return clkw(data);
    })
    .then(function(bata){
        clkw2(bata);
    });
}
trypromise();

<div id='one'></div>

Answer 2

Однако вторая функция вызывается первой, даже если она находится во втором блоке then ().

Все работает, как и ожидалось, в предоставленном вами коде. Как вы наблюдали странное поведение?

const one = document.getElementById('one');

function clkw(a) {
  console.log("clkw");
  setTimeout(() => {
    one.innerHTML = a;
    return 2 * a;
  }, 2000);
}

function clkw2(b) {
  console.log("clkw2");
  setTimeout(() => {
    one.innerHTML += ' ' + b;
  }, 2000);
}

function trypromise() {
  const np = new Promise(resolve => {
    setTimeout(() => {
      resolve(10)
    }, 2000);
  });
  np
    .then(function(data) {
      return clkw(data);
    })
    .then(function(bata) {
      clkw2(bata);
    });
}

trypromise()

<div id="one"></div>