Как работает promises в JavaScript?

Я только что реализовал свою первую функцию, которая возвращает обещание, основанное на другом обещании в AngularJS, и это сработало. Но прежде чем я решил это сделать, я потратил 2 часа на чтение и попытался понять концепции, стоящие за promises. Я подумал, что если бы я мог написать простой фрагмент кода, который бы имитировал работу promises, я бы тогда смог концептуально понять это, вместо того, чтобы использовать его, не зная, как он работает. Я не мог написать этот код.

Итак, может ли кто-нибудь проиллюстрировать в ванильном JavaScript, как работает promises?

Ответы

Ответ 1

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

var promise = {
  isDone: false,
  doneHandler: null,
  done: function(f) {
    if (this.isDone) {
        f();
    } else {
        this.doneHandler = f;
    }
  },
  callDone: function() {
    if (this.doneHandler != null) {
        this.doneHandler();
    } else {
        this.isDone = true;
    }
  }
};

Сначала вы можете определить действие, затем запустить его:

promise.done(function(){ alert('done'); });
promise.callDone();

Сначала вы можете инициировать действие, а затем определить его:

promise.callDone();
promise.done(function(){ alert('done'); });

Демо: http://jsfiddle.net/EvN9P/

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

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

Ответ 2

Вероятно, самый простой пример использования promises выглядит следующим образом:

var method1 = (addings = '') => {
  return new Promise(resolve => {
    console.log('method1' + addings)
    resolve(addings + '_adding1');
  });
}
var method2 = (addings = '') => {
  return new Promise(resolve => {
    console.log('method2' + addings)
    resolve(addings + '_adding2');
  });
}

method1().then(method2).then(method1).then(method2);
// result:
// method1            
// method2_adding1    
// method1_adding1_adding2
// method2_adding1_adding2_adding1

Это основа основ. Имея это, вы можете поэкспериментировать с отклонениями:

var method1 = (addings = '*') => {
  return new Promise((resolve, reject) => {
    console.log('method1' + addings)
    resolve(addings + '_adding1');
  });
}
var method2 = (addings = '*') => {
  return new Promise((resolve, reject) => {
    console.log('method2' + addings)
    reject();
  });
}
var errorMethod = () => {
  console.log('errorMethod')
}
method1()
.then(method2, errorMethod)
.then(method1, errorMethod)
.then(method2, errorMethod)
.then(method1, errorMethod)
.then(method2, errorMethod);
// result:
// method1*           
// method2*_adding1
// errorMethod
// method2*
// errorMethod
// method2*

Как мы видим, в случае возникновения ошибки функция ошибки (которая всегда является вторым аргументом then), а затем следующая функция в цепочке запускается без заданного аргумента.

Для расширенных знаний я приглашаю вас здесь.

Ответ 3

Для простоты понять о promises в Javascript. Вы можете привести пример ниже. Просто скопируйте вставку в новый файл php/html и запустите.

<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">

function test(n){
    alert('input:'+n);

    var promise = new Promise(function(fulfill, reject) {         
      /*put your condition here */
      if(n) {
        fulfill("Inside If! match found");
      }
      else {
        reject(Error("It broke"));
      }
    });
    promise.then(function(result) {
      alert(result); // "Inside If! match found"
    }, function(err) {
      alert(err); // Error: "It broke"
    });
}

</script>

</head>
<body>
<input type="button" onclick="test(1);" value="Test"/>

</body>
</html>

Нажмите кнопку Проверить,
Это создаст новое обещание,
Если условие будет истинным, оно выполнит ответ,
после этого prom.then, вызываемого и на основе выполнения, он выведет результат .
В случае отклонения prom.then возвращает сообщение об ошибке.