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

The then method returns a Promise which allows for method chaining.

If the function passed as handler to then returns a Promise, an equivalent Promise will be exposed to the subsequent then in the method chain.

См. Его на документы для более подробной информации.

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

1. Сходи в ресторан (обещание выполнено)
2. Затем освежитесь.
3. Если вы этого не сделаете (обещание не выполнено)
4. Тогда вы упустите удовольствие.

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

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

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

myPromise.then((data) => console.info(data));
console.info('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.info(data);
  console.info('Now the code flow is "correct" in the readers view')
};

init();

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

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

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

Обратный вызов в .then вызывается по истечении времени ожидания. Это асинхронно. Это также означает, что ваша функция в тайм-ауте больше не является анонимной, и если она ошибается, промисы четко покажут, что обещание 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.info(result);
    });
    console.info('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.info(result);
        }).catch(function(e){
          console.info('Error message:', e.message);
        });
        console.info('after hello world');