Как примерно выглядит async-await код, если его написать на промисах?

Question

[johnymkp]

Как работают промисы сами по себе я вроде понимаю. Пытаюсь придумать себе какую-то адекватную ментальную модель работы async-await. На данный момент я представляю себе так:

• В async-функции все строки до await выполняются как обычно
  
• Строка с await это промис
  
• Строки после await помещаются в then этого промиса
  

Если у нас есть вот такой код на async-await (feetch это выдуманный метод, который возвращает промис, вроде fetch):

async-await код

async foobar(url) {
  doSome();
  let data = await feetch(url);
  doSomeWith(data);
  doSomethingElse();
  
  return data;
}

async barbuz() {
  doSome();
  const result = await foobar("htts://zxc.com");
  console.log(result);
}

barbuz();

то на промисах он выглядел бы примерно так:

код на промисах

foobar(url) {
  doSome();
  let prom = feetch(url);
  return prom
    .then(data => {
      doSomeWith(data);
	  doSomethingElse();
  
      return data;
    });
}

barbuz() {
  doSome();
  const result = foobar("htts://zxc.com");
  result
    .then(res => console.log(res);
}

barbuz();

В целом правильно я отразил суть сахара, который привносит async-await?

Comments

[Alexandroppolus]

Это всё простые примеры - линейная цепочка асинхронных действий. Попробуй, для разнообразия, переделать в промисы вариант, где await случается в условиях и/или в циклах, там чуток повеселее будет. Хотя тот же промисный чейнинг, но тем не менее.

[johnymkp]

Alexandroppolus, да мне в общем-то не ради переписывания надо было, а просто чтобы адекватную аналогию придумать для упрощения запоминания. Затем сахар и придумывают, чтобы не изголяться, а писать более наглядным образом. Если аналогия что все после await, грубо говоря, попадает в then, более-менее адекватная, то мне этого вполне достаточно.

Answer 1

[Александр N++]

да правильно.

await можно вызвать только внутри async блока.
когда мы используем await отлов ошибки всегда нужно делать в try { ... } catch (e) {}.
любой метод который возвращает промис можно использовать await внутри блока async
и того вы можете комбинировать устаревший код с новым.

(async () => {

async function fetchData1(url) {
   try { 
    let response =  await fetch(url);   // promise
     return await response.json();      // promise
  } catch(e) {
     return null;
  }
}

// на промисах  это выглядело бы так, вам все равно нужно вернуть обьект промиса, если вам важно вернуть результат.

function fetchData2(url) {
   return new Promise((resolve,reject) => {
       fetch(url).then(res => res).then (res => res.json()).then((result) => {
         resolve(result);  // говорим что наш промис достиг успеха,
      }).carch(e => {
          resolve(null);  // так как мы повторяем логику try catch  мы используем пустой ответ. вместо reject(e);
      })
   })
}

const promises = [
    fetchData1('/last-news'),       
    fetchData2('/last-comments'),  
    fetchData2('/popular-news'),
];
// (после объявления массива методы уже будут выполнятся, лучше делать через promises.push(...) )
// .. куча логики
// приказываем ожидать если не все выполнялось.
const result = await Promise.all(promises);
console.log({result});    

// или так 
Promise.all(promises).then( results => {
    console.log({result});    
})

// a так если мы хотим последовательно и лапшой promise hell
fetchData1('/last-news').then(resultNetws => {
        fetchData2('/last-comments').then(lastComments => {
             fetchData2('/popular-news'').then(popularNews => {
           
              })
       })
});

// рекомендую прочитать про статичные методы у обьекта Promise.all итд.


})());

Comments

[Антон Швец]

await можно применить ко всему, что имеет метод then. Так называемый thenable получается.

(async () => {
  const v = await {
    then: (onFulfilled) => {
      setTimeout(() => onFulfilled('hello there'), 10);
    },
  };
  console.log(v); // 42
})();

и называть какой-то код "устаревшим" это вы погорячились.
Со временем понимаешь, что писать через промисы и коллбэки на самом деле удобней и понятней.
async/await лучше, когда прорву замыканий надо сделать, там они получаются неявно. Но это так же и минус.