Promise example

[IgorKulishov]

Пример на Promise взятый из книги

Теперь тоже самое только с примером обращения на сервер помещенного в Promise (из книги: https://habrahabr.ru/post/245145/)

// определение ф-ции:
function get(url) {
  return new Promise(function(succeed, fail) {
    var req = new XMLHttpRequest();
    req.open("GET", url, true);
    req.addEventListener("load", function() {
      if (req.status < 400)
        succeed(req.responseText);
      else
        fail(new Error("Request failed: " + req.statusText));
    });
    req.addEventListener("error", function() {
      fail(new Error("Network error"));
    });
    req.send(null);
  });
}
// получение и обработки ответа
get("example/data.txt").then(function(text) {
  console.log("data.txt: " + text);
}, function(error) {
  console.log("Failed to fetch data.txt: " + error);
}); 

[IgorKulishov]

Этот пример мы применим в проекте. Задание посмотреть и разобрать логику, задать вопросы если есть.

[IgorKulishov]

Обращаю внимание что "req.addEventListener" - это JavaScript встроенный метод для слушания событий (event listener). Event listener (слушатель событий) имеет два аргумента: а) string (строка) - определяет событие, которые мы собираемся слушать. Существует ограниченный перечень типов событий (events) которые "addEventListener" может слушать. К примеру события могут быть: "click" - нажатие кнопки мышки "mousemove" - мышкой провести над опредленным элементом "load" - окончание загрузки определенного файла Примеры применения на сайте: https://www.w3schools.com/js/js_htmldom_eventlistener.asp Более полный перечень возможных событий есть на сайте https://www.w3schools.com/jsref/dom_obj_event.asp Если обратил внимание некоторые начинаются с приставки "on": "onclick", "onload" и т.д.
б) функция (callback) которая выполняется когда наступает событие в первом аргументе (event). Мы не можем обычно придумывать свои называния events (они встроены в библиотеку JavaScript) но можем модифицировать функцию (callback).

[g1er]

Как я понял этот пример: создаем функцию, внутри которой создаем новый класс Promise, внутри котрого создаем новый XML запрос. Этот запрос мы открываем, определяем ему метод GET и определяем, что это будет асинхронный запрос. Добавляем слушатель событий на событие загрузка, который выведет нам либо что все нормально, либо что есть ошибка. Также добавляем слушатель на событие ошибка, который в случае ошибки выведет нам информацию о ней. И отправляем запрос. Ну и получение ответа, который выведется в консоли, либо ответ, либо данные об ошибке. Как-то так />

[IgorKulishov]

Да правильно в целом, только надо добавить несколько моментов.

1. Для завершения промис внутри ф-ции get - мы имеем два аргумента (они же "методы" для завершения) Promise: success и fail: Promise(function(**succeed**, **fail**){..}) При этом: A) В случае получения ответа от сервера, внутри слушателя req.addEventListener("load"..), мы благополучно завершаем промис используем первый метод Promise ( в данном случае "succeed" ) помещая внутрь метода succeed результаты полученные от сервера слушателем (то что мы получили от сервера), для передачи ответа сервера дальше методу слушающему ответ нашей ф-ции get при помощи метода then (см. след п.2): succeed(req.responseText);

Б) В случае, если сервер принес обратно ошибку (сервер не ответил или ответил с ошибкой) внутри второго слушателя: req.addEventListener("error"..) , , то мы используем второй аргемент (он же метод) промиса fail для отправки кода ошибки полученного с сервера дальше методу слушающему ответ нашей ф-ции get при помощи метода then (см. след п.2).

2. Для слушания ответа ф-ции get мы используем метод then (он слушает/получает/обрабатывает ответы в формате Promise) . Метод .then() слушает ответы промисов, и имеет два аргумента: А) первый это callback ц-ия в которую приходит благополучно завершенный ответ промиса (случай когда сервер ответил на запрос и мы завершили промис при помощи succeed в сценарии описанным в 1.А):

   .then(function(text) {
   console.log("data.txt: " + text);
   }

   аргумент callback ф-ции (в данном случае text) несет ответ благополучно завершенного промиса в 1.А).

Б) второй аргумент это callback ф-ция в которую приходит сообщение об ошибке.

, function(error) {
  console.log("Failed to fetch data.txt: " + error);
}

аргумент callback -функции (в данном случае error) несет сообщение об ошибке изнутри второго метода Promise (fail) описанного в 1.Б).