Каким образом обработчики добавляются в Promise?

Question

[AlexNew22]

Каким образом обработчики добавляются в промис?
Например

const p = new Promise(...).then(...).then(...).catch()
const p2 = new Promise(...).catch().then(...).then(...)

В данном примере получается, что нам не важно, где добавлять catch, в начале или в конце, каким образом этот catch попадает в промис и что из себя представляет этот промис, что может таким образом в объект собирать "методы как я понял"
Как вообще промис собирается при его создании и почему не важна очередность расположения для catch()?

Answer 1

[Rsa97]

Это не добавление обработчиков в один и тот же промис, это цепочка промисов.
.then(onResolve, onReject) возвращает новый промис
.catch(onReject) - синтаксический сахар для .then(undefined, onReject)

const p = new Promise(...).then(...).then(...).catch();

можно записать как

const p1 = new Promise(...);
const p2 = p1.then(...);
const p3 = p2.then(...);
const p4 = p3.catch(...);

Comments

[AlexNew22]

Где вообще можно детально про промис понятными словами почитать?
Я не могу найти статьи, где описано, как у нас срабатывает наша цепочка then, если произошла ошибка и каким образом все это дело перескакивает через в остальные then, чтобы добраться до catch
При вызове метода then мы получается как бы создаем опять new Promise?

[Rsa97]

AlexNew22, Если хотите детально понять, что происходит под капотом, в движке JS, то читайте спецификацию.
https://tc39.es/ecma262/multipage/control-abstract...
Если вам достаточно общего представления, то
https://developer.mozilla.org/en-US/docs/Web/JavaS...

Answer 2

[zkrvndm]

.catch(...) это все равно что .then(null, ...) а у метода .then есть особенность: если колбек-функция для запуска отсутствует, то созданный этим методом промис возвращает результат промиса на котором вызван.

А так конечно новый промис должен генерироваться колбек-функцией в этом то и вся фишка таких цепочек.

Comments

[AlexNew22]

Тут больше вопрос про очередность, что где бы мы не указали catch, он сработает для всех
Как это происходит?

[zkrvndm]

AlexNew22, если колбек-функция для запуска отсутствует, то созданный методом then промис возвращает результат промиса на котором вызван.

Если что то не понятно, приведи конкретный пример. Выше в вопросе у тебя нихрена не пример, там нет колбеков. Давай с аргументами пример, чтобы работал.

[Rsa97]

AlexNew22, Очерёдность очень даже важна. Каждый следующий .then/.catch относится к предыдущему промису, а не к родительскому.

new Promise((resolve, reject) => { console.log('main'); resolve('main 1'); })
  .catch((d) => { console.log('catch 1'); return `${d}, catch 1`; })
  .then((d) => { console.log('then'); throw Error(d); })
  .catch((d) => { console.log('catch 2'); return `${d}, catch 2`; })
  .then(
    (d) => { console.log('then 2 resolve'); return `${d}, then 2 resolve`; },
    (d) => { console.log('then 2 reject'); return `${d}, then 2 reject`; },
  );
// main
// then
// catch 2
// then 2
// Promise { <state>: "fulfilled", <value>: "Error: main 1, catch 2, then 2 resolve" }

Как видите, первый .catch не сработал, поскольку ошибки на тот момент не было. onReject во втором .then тоже не сработал, поскольку ошибка была обработана во втором .catch.

[zkrvndm]

Rsa97, мне кажется автор вопроса не понимает, что then возвращает НОВЫЙ промис - он не будет равен тому промису на котором вызван метод.

Этот новый промис возвращает результат работы переданной в then функции, а если такой функции нет, то результат промиса на котором вызван. Именно поэтому цепочка не прерывается при использовании catch без аргументов.

P. S. Если функция переданная в then возвращает не результат, а промис, то и промис который вернул then вернет результат этого промиса.

[AlexNew22]

Rsa97, но если у нас будет один catch в начале, то он же сработает на любой then
Вопрос в том, как этот catch, который не важно, где мы указываем, попадает с любой из этих then

[AlexNew22]

Надим Закиров, но как в каждый новый промис передается единственный catch, который мы укажем в начале перед всеми then?

[Rsa97]

AlexNew22, Не на любой. .catch перехватит только ошибку в одном из промисов до него.

new Promise((resolve, reject) => { console.log('main'); resolve('main 1'); })
  .catch((d) => { console.log('catch 1'); return `${d}, catch 1`; })
  .then((d) => { console.log('then'); throw Error(d); });
// main
// then
// Uncaught (in promise) Error: main 1

Как видите, catch не перехватил ошибку в промисе, который создался после него.

[AlexNew22]

Rsa97, т.е. если у нас 10 then, то он обойдёт все 10 then, даже, если после второго у нас вылетела ошибка, просто он эту ошибку пробросит и дальше в другие then до момента, пока не наткнется на catch?
т.е. catch не навешивается на наш первый родительский new Promise и не передается, как метод для остальных then, а просто является аналогом reject в then, если мы в предыдущих then reject не прописали?

Например catch это .then((data,err) => err)?

new Promise().then(data => data).then(data => data).then((data,err) => return err).then(data => data)

[Rsa97]

AlexNew22, Вы не понимаете одной простой вещи - каждый .then или .catch порождают новый промис, на который навешивается следующий .then, .catch или .finally
Каллбэк в .then или .catch возвращает значение, которое либо является промисом, либо неявно приводится к промису (через Promise.resolve(...)).
Выброшенное исключение перехватывается следующим в цепочке .catch, текст исключения передаётся как параметр в каллбэк этого .catch.

[AlexNew22]

Rsa97, но сработают же все промисы (then) после ошибки, пока не дойдет цепочка до catch, где все остановится и обработается ошибка?

[Rsa97]

AlexNew22, Нет, не сработают. Исключение пройдёт по цепочке неявных onReject в .then до первого встреченного явного onReject или .catch.
Все onResolve в этой цепочку будут проигнорированы.

[AlexNew22]

Rsa97,

const url = 'https://jsonplaceholder.typicode.com'

const result = new Promise((resolve, reject) => { console.log('main'); resolve('main 1'); })
  .then(() => fetch(url)).then(data => data.json())
  .then((resolve, reject) => {
    resolve('data') // как тут вывести данные из предыдущего промиса, если он успешен?
    reject('hello') // почему здесь не сработал reject и как его здесь обыграть, чтобы не дошло до catch?
  })
  .then((d) => { console.log('then'); throw Error(d); })
  .catch((d) => { console.log('catch 1'); return `${d}, catch 1`; })
console.log(result)

[Rsa97]

AlexNew22, А почему reject должен был сработать, если он вообще никуда не относится. У .then два параметра, первый - каллбэк-функция onResolve, вызываемая при разрешении промиса, второй - каллбэк-функция onReject, вызываемая при ошибке или отказе промиса. Причём каждая из этих функция принимает только один параметр. Вы же передали одну функцию с двумя параметрами.