Почему вам нужно использовать методы .then () с обещаниями JavaScript?

Question

Новое в Web Dev и изучение Javascript.

Я следовал учебнику по Обещаниям, чтобы попытаться понять, для чего они используются и что в них такого полезного, и я наткнулся на этот код:

var isMomHappy = true;

// Promise
var willIGetNewPhone = new Promise(
    function (resolve, reject) {
        if (isMomHappy) {
            var phone = {
                brand: 'Samsung',
                color: 'black'
            };
            resolve(phone);
        } else {
            var reason = new Error('mom is not happy');
            reject(reason);
        }

    }
);

//call our promise
var askMom = function () {
    willIGetNewPhone
        .then(function (fulfilled) {
            // yay, you got a new phone
            console.log(fulfilled);
        })
        .catch(function (error) {
            // ops, mom don't buy it
            console.log(error.message);
        });
}

askMom();

Почему метод .then () необходим при вызове и обработке обещания?

Могу ли я не просто сделать следующее:

var isMomHappy = false;

// Promise
var willIGetNewPhone = new Promise(
    function (resolve, reject) {
        if (isMomHappy) {
            var phone = {
                brand: 'Samsung',
                color: 'black'
            };
            resolve(phone);
            console.log(phone);
        } else {
            var reason = new Error('mom is not happy');
            reject(reason);
            console.log(reason.message);
        }

    }
)

willIGetNewPhone;

... как это, похоже, воспроизводит те же результаты?

Спасибо

Stu

Answer 1

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

Вот еще один пример (это все еще бред, а не 100% того, что вы делаете на самом деле)

const myPromise = new Promise((resolve) => {
  setTimeout(
    () => resolve('hello promise'),
    1000
  );
});

myPromise.then((data) => console.log(data));
console.log('This is called after then, yet it was executed before the promise resolved');

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

В ES7 есть другой синтаксис, который может сделать его немного более понятным: async / await:

const myPromise = new Promise((resolve) => {
  setTimeout(
    () => resolve('hello promise'),
    1000
  );
});

const init = async() => {
  const data = await myPromise; // wait until promise has resolved
  console.log(data);
  console.log('Now the code flow is "correct" in the readers view')
};

init();

Answer 2

.then((result)=>{}) запрашивает значение обещания для передачи в функцию.

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

    const doingStuff=new Promise(function(resolve, reject){
      setTimeout(function(){
         resolve('hello world');
      }, 10000);
    });
    
    doingStuff.then(function(result){
       console.log(result);
    });
    console.log('after hello world');

Обратный вызов в .then вызывается с окончанием тайм-аута. Это асинхронно. Это также означает, что ваша функция в тайм-ауте больше не является анонимной, в случае ошибок обещания ясно покажут обещание do-doStuff с ошибкой.

Если вы запустите это, ваша консоль выдаст

after hello world

hello world

В обратном направлении, это потому, что ваш then работал через 10 секунд, хотя он появился первым в коде.

Если вы попробуете этот код, ошибка произойдет до разрешения.

    const doingStuff=new Promise(function(resolve, reject){
      setTimeout(function(){
         resolve('hello world');
      }, 10000);
      setTimeout(function(){
        reject(new Error('Something went wrong'));
      },5000);
    });
    
    doingStuff.then(function(result){
       console.log(result);
    });
    console.log('after hello world');

Ваш консольный журнал покажет точное местоположение, которое пошло не так. И что еще лучше, вы можете обработать ошибку позже, обещание будет сохраняться до тех пор, пока вы не будете готовы, используя .catch(function(e){});.

        const doingStuff=new Promise(function(resolve, reject){
          setTimeout(function(){
             resolve('hello world');
          }, 10000);
          setTimeout(function(){
            reject(new Error('Something went wrong'));
          },5000);
        });
        
        doingStuff.then(function(result){
           console.log(result);
        }).catch(function(e){
          console.log('Error message:', e.message);
        });
        console.log('after hello world');

Answer 3

Метод then возвращает Promise, который допускает цепочку методов.

Если функция, переданная в качестве обработчика, затем возвращает Promise, эквивалентный Promise будет представлен последующему затем в цепочке методов.

Подробнее см. В документах .

В очень простом термине (говорящий язык):

1. Пойти в ресторан (обещание выполнено)
2. Тогда, немного освежиться.
3. Если нет (обещание не выполнено)
4. Тогда вы упустите удовольствие.