В чем разница между возвращенным обещанием?

Question

Есть два случая, оба возвращают Promise и связаны следующими методами. Но последовательность результатов отличается. Некоторые примечания: Promise.resolve (value) -> возвращает немедленно выполненное Promise со значением. И в методе then, когда мы снова возвращаем значение, он возвращает выполненное Promise со значением. По логике вещей не должно быть никакой разницы. Оба сразу ... Спасибо заранее ...

Promise.resolve(1)
  .then((v) => {
    console.log(v);
    return Promise.resolve(v + 1);
  })
  .then((v) => {
    console.log(v);
    return Promise.resolve(v + 1);
  })
  .then((v) => {
    console.log(v);
    return v + 1;
  })
  .then((v) => {
    console.log(v);
    return v + 1;
  });

Promise.resolve(10)
  .then((v) => {
    console.log(v);
    return v + 1;
  })
  .then((v) => {
    console.log(v);
    return v + 1;
  })
  .then((v) => {
    console.log(v);
    return v + 1;
  })
  .then((v) => {
    console.log(v);
    return v + 1;
  });

//Result on the console:
//1
//10
//11
//12
//2
//13
//3
//4

//

Promise.resolve(1)
  .then((v) => {
    console.log(v);
    return v + 1;
  })
  .then((v) => {
    console.log(v);
    return v + 1;
  })
  .then((v) => {
    console.log(v);
    return v + 1;
  })
  .then((v) => {
    console.log(v);
    return v + 1;
  });

Promise.resolve(10)
  .then((v) => {
    console.log(v);
    return v + 1;
  })
  .then((v) => {
    console.log(v);
    return v + 1;
  })
  .then((v) => {
    console.log(v);
    return v + 1;
  })
  .then((v) => {
    console.log(v);
    return v + 1;
  });

//Result on the console:
//1
//10
//2
//11
//3
//12
//4
//13

Answer 1

Существует важное различие: помните, что then возвращает обещание (назовем его обещанием T). Когда вы делаете

return Promise.resolve(v + 1);

... вы решаете обещание T для обещания (назовем это обещанием B). Но когда вы делаете:

return v + 1;

... вы преобразуете обещание T в немедленное значение.

Преобразование обещания T в обещание B вводит дополнительную "галочку" в цикле разрешения,Вместо того чтобы обещание T поставило в очередь вызов своего обработчика разрешения, оно должно ждать, пока обещание B не вызовет обработчик разрешения T, который необходимо установить для него, и затем вызовет обработчик разрешения. Отсюда и дополнительный «тик» (в основном, другой цикл очереди микрозадач).

Более простой пример, обратите внимание, что он записывает «Second 2» * перед «First 2»:

Promise.resolve(1)
    .then(v => Promise.resolve(v + 1))
    .then(v => console.log(`First: ${v}`));
Promise.resolve(1)
    .then(v => v + 1)
    .then(v => console.log(`Second: ${v}`));

... тогда как, если у вас нет дополнительного обещания, он записывает «Первые 2» перед «Вторыми 2»:

Более простой пример,обратите внимание, что он записывает «Second 2» * перед «First 2»:

Promise.resolve(1)
    .then(v => v + 1)
    .then(v => console.log(`First: ${v}`));
Promise.resolve(1)
    .then(v => v + 1)
    .then(v => console.log(`Second: ${v}`));

Этот дополнительный тик был недавно удален для async функций, выполняющих такие операции, как return await somePromise (вместо просто return somePromise), потому что его можно надежно удалить для собственных обещанийобрабатывается внутренне через async / await. Но я не уверен, что это может быть надежно удалено для вашего случая, и / или получит ли это значительное внимание со стороны тех, кто должен был это сделать. Это потребует обработки нативного обещания, возвращенного из обработчика then, отличного от любого другого thenable ¹, что может быть проблематично. (Но я не знаю наверняка, что это будет.)

---

¹ затем против обещание : https://promisesaplus.com

Answer 2

Помните, что javascript является однопоточным и добавит все методы в очередь. Что я сделал ниже, так это то, как обещания, в некотором роде, должны быть написаны.

Javascript добавляет все задачи в первом столбце, проходит через очередь для выполнения всех команд, а затем добавляет дополнительные задачи в столбце 2. и 3, как они встречаются в асинхронных методах.

Вполне логично, если вы посмотрите на это так.