Как добавить ограничение по времени для разрешения JS обещания (отклонить обещание по таймауту)?

Question

В настоящее время пытаюсь научиться работать с обещаниями в JavaScript.

Итак, я хочу создать обещание, в котором я выполняю сложные вычисления. Если это вычисление завершится успешно вовремя, я хочу, чтобы обещание разрешилось, но если вычисление занимает слишком много времени, обещание должно отклониться с ошибкой тайм-аута. Доступное время предопределено, например, 1000 мс.

Мой пример кода выглядит так:

new Promise((resolve, reject) => {
  const result = complexCalculation();
  return resolve(result);  //this should be called when complexCalculation completed in under 1000ms
  return reject('timeout error');  //and this if 1000ms have passed without getting a result
})
.then(result => {
  console.log(result);
})
.catch(err => {
  console.log(err);
});

Я уже пробовал разные вещи, такие как функция asyn c и setTimeout, но ничего из этого работал так, как я пытался его реализовать. Я все еще новичок в JS в целом, так что терпите меня.

Answer 1

Вот пример того, как настроить обещание с отклонением тайм-аута:

function calcWithTimeout(timeout) {

  return new Promise((resolve, reject) => {
  
    // start timeout
    const timeoutID = setTimeout(
      () => reject('longCalculation took too long'),
      timeout
    );
    
    // start calculation
    longCalculation().then(result => {
      clearTimeout(timeoutID);
      resolve(result);
    });
  });
  
}

// a fake calculation that takes 1 second
function longCalculation() {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve('your calculation completed');
    }, 1000);
  });
}

const pre = document.getElementById('result');

const myFn = (timeout) => {
  pre.innerHTML = 'calling calcWithTimeout with timeout = ' +
    timeout + '\n';
  
  calcWithTimeout(timeout)
  .then(result => {
    console.log('mFn result:', result);
    pre.innerHTML += 'result: ' + result;
  })
  .catch(err => {
    pre.innerHTML += 'error: ' + err;
  });
}

  
  

#result {
  background-color: #eee;
  padding: 0.5rem;
}

Long Timeout
Short Timeout