Как понять Promise?

Question

[Александр Дегтярев]

Доброго времени, помогите разобраться с Promise? Изучаю по материалу Ильи Контора - https://learn.javascript.ru/promise и не могу понять, вначале создается экземпляр промиса, где таймер стоит, там есть два действие при положительном и отрицательном. Далее идет привзчик функции - зачем, если я могу обработать в экземпляре промиса, или я что - то не так понимаю?

Comments

[Александр Дегтярев]

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

[Дмитрий Беляев]

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

[Александр Дегтярев]

Дмитрий Беляев: Более понятно, благодарю

[Александр Дегтярев]

Дмитрий Беляев: а еще подскажите, пишут что чаще используют генераторы вместо/ вместе с происами, есть в таком подходе преимущества?

[Дмитрий Беляев]

Александр Дегтярев: на генераторах эмитируют поведение async function которые скорее всего войдут в стандарт летом/осенью этого года, но уже доступны с babel
генераторы могут временно прерывать свое выполнение, возвращая промежуточные результаты с помощью оператора yield, а так же принимать через него дополнительные данные
async function работает подобным образом, но более узко: внутри можно использовать оператор await передав ему промис, async function при этом дождется пока промис зарезолвится (при этом await вернет результат) или зарежектится (внутрь будет брошено исключение). Так же важно знать, что async function всегда возвращает промис, даже если внутри не производилось никаких асинхронных действий. Пример:

//данная функция вернет промис, который зарезолвится со значением 'test' через 1 секунду
function test() {
  return new Promise(resolve => {
    setTimeout(resolve, 1000, 'test');
  });
}

async function test2() {
  var t = await test(); //ждем завершения test не блокируя поток, результат сохраняем в t
  t = t.split('').join('.'); //этот код выполнится только после того как await вернет свое значение и сохранит его в t
  return t; //хоть и возвращаем строку, но функция вернет промис
}

//тестим
test2().then(result => {
  console.log(result); // 't.e.s.t'
});

Замечу что данный код можно запустить только прогнав через babel с пресетом stage-3

[Александр Дегтярев]

Дмитрий Беляев: благодарю, просто и понятно)

[Дмитрий Беляев]

Александр Дегтярев: добавлю, что данный код можно реализовать на генераторах (там где они поддерживаются babel уже не потребуется), но понадобится обертка для генераторов реализующая данное поведение, например из библиотеки co или более оптимизированый вариант из моей библиотеки x-promise
Пример:

require('x-promise'); //расширяем стандартные промисы

/данная функция вернет промис, который зарезолвится со значением 'test' через 1 секунду
function test() {
  return new Promise(resolve => {
    setTimeout(resolve, 1000, 'test');
  });
}

var test2 = Promise.coroutine(function*() {
  var t = yield test(); //ждем завершения test не блокируя поток, результат сохраняем в t
  t = t.split('').join('.'); //этот код выполнится только после того как await вернет свое значение и сохранит его в t
  return t; //хоть и возвращаем строку, но функция вернет промис
});

//тестим
test2().then(result => {
  console.log(result); // 't.e.s.t'
});

[Александр Дегтярев]

Дмитрий Беляев: Благодарю, будем изучать)

Answer 1

[Максим]

Что есть "привязчик функции"?
Вы на resolve и reject должны указать именно функции. Так как таким образом в аргументах у них будут необходимые данные. А таймер - хороший вариант "сфабриковать" асинхронное действие.

Материал выбран хороший, прочитайте, поиграйтесь с примерами, потом посмотрите эту статью с хабра.

Промисы нужно пощупать на практике, причем обязательно попробовать обработать ошибки:
а) когда нет интернета
б) когда ваше api ответило не "200"

Затем попробуйте выполнить цепочки промисов (последовательно, параллельно).
Смотрите в дебаггере по шагам, что за чем идет.

Таким образом рано или поздно точно получится разобраться) Я сам, почитал Кантора уже после того, как "потыкался" с промис-библиотеками. Поэтому не могу точно вспомнить, откуда начал, но его статья хорошая на мой взгляд.

Comments

[Александр Дегтярев]

До изучения JS я работал на ASP.NET MVC5 (C#) там все это сделано очень прост ои лаконично, здесь же создавать простые вещи хитровы***ми способами. Но придется изучать и как - то это все понимать, благодарю за советы)

Answer 2

[Super User]

Вот более жизненный пример, может так будет понятнее:

function fetch(url) {
  return new Promise(function(resolve, reject) {
    $.getJSON(url, function(response) {
      if(response){
        resolve(response); 
      } else {
        reject(new Error('No response'));
      }
    });
  });
}

fetch('http://jsonplaceholder.typicode.com/users').then(function(users){
  var output = '';
  users.forEach(function(user) {
    output += '<p>' + user.name + '</p>';
  });
  $('body').html(output);
}).catch(function(err) {
  console.trace(err.message);
});

JSBIN

Comments

[Александр Дегтярев]

Благодарю, постараюсь хоть как то разобраться. Похоже это я тупой такой чт оу меня в голове более простые методы решения возникают нежели двухсвязные подходы...

[Александр Дегтярев]

Артём Петренков: все через это проходили)) Ладно хоть сообщество помогает в лице вас как хороших разработчиков))