Как правильно делать промисы?

Question

[alekssamos]

Никак не могу разобраться с промисами.
Как надо правильно?
Я ожидаю, что каждый .then выполнится через последующие 5 секунд,
т.е. между каждым alert будет промежуток 5 сек.
Но он работает так: первый раз ждёт, а второй и третий выполняет сразу без ожидания.
Что не так?

let p = new Promise(function(resolve, reject){
	setTimeout(resolve, 5000);
});

p
	.then( () => { alert(1); } )
	.then( () => { alert(2); } )
	.then( () => { alert(3); } );

Answer 1

[0xD34F]

const wait = time => new Promise(r => setTimeout(r, time));

wait(1000)
  .then(() => { console.log(1); return wait(1000); })
  .then(() => { console.log(2); return wait(1000); })
  .then(() => { console.log(3); });

// или

[ 1, 2, 3 ].reduce((promise, n) => promise
  .then(() => wait(1000))
  .then(() => console.log(n))
, Promise.resolve());

Answer 2

[Дима Паутов]

p исполнится через 5 секунда, а then - это то, что будет после 5 секунд. Если вы хотите, что бы все then были через 5 секунд, то then должен возвращать также промис. А у вас then ничего не возвращает, а просто показывает alert. Оберните вызов alert в промисы с таймером и тогда будет счастье

Answer 3

[Владимир]

Внимательно почитайте. Ваш пример слишком синтетический, ну и я никак не могу понять вашу логику, почему вы ждете что каждый then будет с задержкой, Promise то у вас один и он уже зарезолвился через 5 секунд, в каком месте вашего кода вы ждете что задержка сработает еще раз ?
https://habr.com/ru/company/mailru/blog/269465/

Comments

[alekssamos]

Правильно ли я понимаю,
один then, один promise? resolve/reject для одного промиса выполняется только один раз?
Ну всё, кажется разобрался. Это я вручную написал, не копировал. Работает.
Если хотим продолжить .then цепочку, то нужно вернуть новый promise.

function httpget(url){
	return new Promise(function(resolve, reject){
		var xhr = new XMLHttpRequest();
		xhr.onload = function(){ (xhr.status>=200&&xhr.status<300) ? resolve(xhr.responseText) : reject(xhr); };
		xhr.onerror = function(){ reject(xhr) };
		xhr.open("GET", url, true);
		xhr.send();
	});
}

httpget('/getcurrentuserid')
	.then(data=>{ return httpget('getuserinfobyid?id='+encodeURIComponent(data)); })
	.then(data=>{ console.log(data); })
	.catch(xhr=>{console.log(xhr.readyState+" "+xhr.status+" "+xhr.statusText);});

Так правильно, да?

[Владимир]

alekssamos, нет

один then, один promise?

читайте второй раз статью, можно еще
https://developer.mozilla.org/en-US/docs/Web/JavaS...
Возвращать можно что угодно, но если вы вернете значение, то в следующем then получите значение и он сработает сразу
если возвращать promise то следующий then сработает как только этот promise зарезолвится
в вашем коде .then(data=>{ console.log(data); }) вернет undefined поэтому в следующем then xhr будет undefined
В статье куча примеров, откройте codepen, перепишите их туда и посмотрите на поведение