johnymkp
@johnymkp

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

Как работают промисы сами по себе я вроде понимаю. Пытаюсь придумать себе какую-то адекватную ментальную модель работы 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?
  • Вопрос задан
  • 944 просмотра
Решения вопроса 1
sanchezzzhak
@sanchezzzhak
Ля ля ля...
да правильно.

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 итд.


})());
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы