Promise в JavaScript

"I Promise a Result!"

"Producing code" (код производства) - это код, который требует времени

"Consuming code" (код потребления) - это код, который должен ждать результатов

Promise - это объект JavaScript, который связывает код генерации и код потребления

JavaScript-объект Promise

JavaScript-объект Promise содержит код производства и вызовы кода потребления:

Грамматика Promise

let myPromise = new Promise(function(myResolve, myReject) {
// "Producing Code" (может занять некоторое время)
  myResolve(); // при успешном выполнении
  myReject();  // при ошибке
});
// "Consuming Code" (должен ждать выполненного обещания)
myPromise.then(
  function(value) { /* Код при успешном выполнении */ },
  function(error) { /* Код при ошибке */ }
);

Когда выполняется код и получен результат, он должен вызвать один из двух回调:

Результат Вызов
Успех myResolve(значение результата)
Ошибка myReject(объект ошибки)

Свойства объекта Promise

JavaScript-объект Promise может быть:

  • Pending
  • Fulfilled
  • Rejected

Объект Promise поддерживает два свойства:state и result.

Когда объект Promise "pending" (работает), результат - undefined.

Когда объект Promise "fulfilled", результат - это значение.

Когда объект Promise "rejected", результат - это объект ошибки.

myPromise.state myPromise.result
"pending" undefined
"fulfilled" Значение результата
"rejected" Объект ошибки

Вы не можете получить доступ к свойствам Promise state и result.

Вы должны использовать метод Promise для обработки Promise.

Как использовать Promise

Ниже приведен метод использования Promise:

myPromise.then(
  function(value) { /* код, если успешное выполнение */ },
  function(error) { /* код, если произошла ошибка */ }
);

Promise.then() имеет два параметра: один для回调 при успешном выполнении, другой для回调 при ошибке.

Оба параметра являются опциональными, поэтому вы можете добавить回调 для успеха или ошибки.

Пример

function myDisplayer(some) {
  document.getElementById("demo").innerHTML = some;
}
let myPromise = new Promise(function(myResolve, myReject) {
  let x = 0;
// Генерация кода (это может занять некоторое время)
  if (x == 0) {
    myResolve("OK");
  } else {
    myReject("Ошибка");
  }
});
myPromise.then(
  function(value) {myDisplayer(value);},
  function(error) {myDisplayer(error);}
);

Попробуйте сами

Пример использования JavaScript Promise

Чтобы продемонстрировать использование Promise, мы будем использовать пример回调 из предыдущей главы:

  • Ожидание времениouts
  • Ожидание файла

Ожидание времениouts

Пример использования回调

setTimeout(function() { myFunction("Я люблю тебя !!!"); }, 3000);
function myFunction(value) {
  document.getElementById("demo").innerHTML = value;
}

Попробуйте сами

Пример использования Promise

let myPromise = new Promise(function(myResolve, myReject) {
  setTimeout(function() { myResolve("Я люблю тебя !!"); }, 3000);
});
myPromise.then(function(value) {
  document.getElementById("demo").innerHTML = value;
});

Попробуйте сами

Ожидание файла

Пример использования回调

function getFile(myCallback) {
  let req = new XMLHttpRequest();
  req.open('GET', "mycar.html");
  req.onload = function() {
    if (req.status == 200) {
      myCallback(req.responseText);
    } else {
      myCallback("Ошибка: " + req.status);
    }
  }
  req.send();
}
getFile(myDisplayer);

Попробуйте сами

Пример использования Promise

let myPromise = new Promise(function(myResolve, myReject) {
  let req = new XMLHttpRequest();
  req.open('GET', "mycar.htm");
  req.onload = function() {
    if (req.status == 200) {
      myResolve(req.response);
    } else {
      myReject("File not Found");
    }
  };
  req.send();
});
myPromise.then(
  function(value) {myDisplayer(value);},
  function(error) {myDisplayer(error);}
);

Попробуйте сами

Поддержка браузерами

ECMAScript 2015, также известный как ES6, ввел JavaScript Promise объект.

В следующей таблице указаны версии браузеров,首家完全支持 Promise объект:

Chrome IE Firefox Safari Opera
Chrome 33 Edge 12 Firefox 29 Safari 7.1 Opera 20
Февраль 2014 года Июль 2015 года Апрель 2014 года Сентябрь 2014 года Март 2014 года