IgorKulishov commented 6 years ago

Promise (Обещания):

Итак что такое Promise и для чего он нам нужен?

Promise - изначально была библиотека Promises для того, что бы было удобно работать с асинхронными вызовами (https://www.promisejs.org/). Позже она вошла в JavaScript и на сегодня является встроенным классом Promise.

Как говориться в книге (https://habrahabr.ru/post/245145/): "Предпринималось множество попыток решить эту проблему дополнительными абстракциями". "Абстракция" - в данном случае это применение библиотек для того что бы c их использованием код имел более легко читаемый вид. К таким примерам можно отнести: jQuery, Angular, ReactJS и т.д. В нешем случае это библиотека Promise.

Promise помогает работать с обработкой асинхронных вызовов (о которым мы разговорвали в предыдущем задании).

Повтор ассинхронности: Еще раз напомню что когда система/среда/браузер выполняет асинхронную ф-цию, к примеру обращение на удаленный сервер, то ответ сервера не приходит сразу, при этом браузер переходит к выполнению следующей ф-ции (асинхронный вызов не блокирует браузер) и когда приходит ответ с сервера , то браузер возвращается к асинхронной ф-ции и продолжает выполнение прописанного внутри кода, завершая её выполнение. Как мы уже видели код получается немного громозким (с различными if/else условиями для определения статуса полученого ответа). Мы видели что мы можем использовать callback для того что бы передавать полученный ответ из ассинхронной ф-ции. Для того что бы сделать передачу результата асинхронной ф-ции более читаемой и кроме того передавать статус выполнения ф-ции была разработана библиотека Promise с его особым синтаксисом и методом "then" для передачи ответа от Promise.

Promise теория: 1) объяснение: Promise представляет собой некий новый синтакс и правила которые сводятся к 3-ем основным моментам: А) "Promise"- это JavaScript класс*, который позволяет вставить внутри себя нашу ассинхронную ф-цию (callback), которую мы должна определить (к примеру логика обращения к удаленному серверу). Эта ф-ция имеет два аргумента внутри (две ф-ции / два метода), которые мы используем внутри Promise для передачи результата: а) первый аргумент (метод) для передачи информации от положительного разрешения осинхронной ф-ции б) второй аргумент (метод) для передачи информации об ошибке внутри ассинхронной ф-ции (на случай возникновения ошибки при выполнении асинх ф-ции, когда нам надо передать сообщение об ошибке). Принципиальный вид: var my_promise_fu = new Promise(function(success, fail){..})

прим: для вызова класса мы ставим перед классом слово "new" : new Promise(callbackFu), мы будем проходить классы подробнее.

Б) Метод ".then()" для получения и обработки ответа асинхронной ф-ции (ф-ции нутри Promise) или ошибки выполнения ф-ии (ф-ции нутри Promise, описанной в пред пункте) Метод ".then()" присоединяется к Promise и позволяет нам вынести логику обработки ответа асинхронной ф-ции за её пределы. Метод "then" имеет два аргумента (два метода/два callback) один для получения и обработки успешных ответов (асинх ф-ции внутри Promise), второй для обработки ошибок полученных от ф-ции содержащейся внутри Promise (пред пункт). Пояснение: информация полученная от успешного выполнения асинхронной ф-ции попадает и обрабатывается внутри первого ф-ции метода "then"; информация с сообщением ошибки попадается и соответственно обрабатывается внутри второй ф-ции метода "then". Пример: а) "заварачиваем" нашу асинхронную ф-цию в Promise: var my_promise_fu = new Promise(function(success, fail){..}) б) слушаем и обрабатываем ответы асинхронной ф-ции изнутри Promise:

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

В) Почему же все-таки Promise Дело в том что кроме двух важных моментов о которых я уже рассказал в 1 А) и Б) есть еще один - то что при выполнении Promise он сразу же возвращает слушающему его методу "then" свое состояние : "pending" статус - сообщающий о том что асинх ф-ция выполняется с "обещающанием" о том что по завершению асинх ф-ции будет дополнительно сообщено с приложеной соответственно информацией или сообщением об ошибке. Т.е. как говориться в документации на официальном сайте https://www.promisejs.org/ Promise имеет три статуса: а) "pending" - начальный статус Promise, который приходит сразу же, после начала выполнения Promise, его можно растолковать так: "асинхронная ф-ция выполняет запрос, пока ответа нет, но "обещаю" что обещаю что отвечу по завершению запроса" б) "fulfilled" - асинхронная ф-ция завершилась успешно , при этом ответ приходит внутрь первого callback находящегося внутри then метода в) "rejected" - при выполнении асинхронной ф-ции возникла ошибки (к примеру удаленный сервер отклонил запрос), при этом ответ с сообщением ошибки приходит внутрь второго callback, находящегося внутри then метода

Для получения предстваления предлагаю проделать упражнения в консоли браузера: Задание №1 : "pending" и "fulfilled"

var promise_success =  new Promise(
function(resolve, reject){

  setTimeout(function(){

    resolve('Success: promise resolved');

  },
 3000);

});

promise_success.then(
  function(res){
    console.log(res);

 }
);

SetTimeout - это асинхронная ф-ция и позволяет показать в консоле сначала "pending" статус и через 3 сек получить ответ определенный внутри Promise: resolve('promised resolved') Задание №2: : "pending" и "rejected"

var promise_reject =  new Promise(
function(resolve, reject){

  setTimeout(function(){

    reject('Error: promise rejected by function');

  },
 3000);

});

promise_reject.then(
  function(res){
    console.log(res);
 },
 function(rej){
    console.log(rej);
 }
);

Задание №3 : два сценария завершения асинх ф-ции

var prom_funct =  function(password){
 return new Promise(
  function(resolve, reject){

   setTimeout(function(){

     if(password && password.length>3)
        resolve('Success: password was processed');
     else 
    reject('Error: password should be at least 3 letters long');
  },
  3000);
})
};
//A. scenario for 'rejected'
prom_funct('ab').then(
  function(res){
    console.log(res);

 },
function(rej){
    console.log(rej);

 }
);
//B. scenario for 'success'
prom_funct('abcd').then(
  function(res){
    console.log(res);

 },
function(rej){
    console.log(rej);

 }
);

IgorKulishov commented 6 years ago

Три задания надо просто скопировать с Console браузера и разобрать работу. Обрати внимание на статус pending который покзывается в консоли до получения ответа (это как раз и есть Promise).

g1er commented 6 years ago

В принципе, логика мне ясна. Вопросы есть по синтаксису. Например, аргументы, которые ты указываешь в функциях (success, fail или text, error, также как и resolve/reject) - это какие-то константы, или название им ты сам определяешь? Если я вместо них укажу, например approve/deny, будет ли это ошибкой или я волен называть их как угодно? А так я все 3 упражнения в консоли дебагера сделал, pending заметил.

IgorKulishov commented 6 years ago

название им ты сам определяешь: "можно approve/deny", это ошибкой не будет, волен называть их как угодно.

IgorKulishov commented 6 years ago

Если есть вопросы - отпиши. Если все понятно можешь закрыть задание. Мы еще раз проделаем тоже самое на закрепление в следующем открытом задании.

g1er / Andrew

Promise #3

Promise (Обещания):