Каким образом можно переписать асинхронный код с использованием async-await на промисах?

Как можно лучше объяснить асинхронные функции, использующие async-await с точки зрения работы промисов, чтобы лучше понять, как работает данный синтаксический сахар?
  • 6 мая 2024 г. 14:00
Ответы на вопрос 2
Асинхронный код с использованием async-await можно переписать на промисах следующим образом:

1. Исходный код с использованием async-await:

```javascript
async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error(error);
  }
}
```

2. Переписанный код с использованием промисов:

```javascript
function fetchData() {
  fetch('https://api.example.com/data')
    .then(response => {
      if (!response.ok) {
        throw new Error('Network response was not ok');
      }
      return response.json();
    })
    .then(data => {
      console.log(data);
    })
    .catch(error => {
      console.error(error);
    });
}
```

Для лучшего понимания работы асинхронных функций, использующих async-await с точки зрения работы промисов, можно объяснить следующим образом:

1. Ключевое слово `async` перед функцией говорит о том, что она всегда будет возвращать промис. Внутри такой функции можно использовать ключевое слово `await`, которое приостанавливает выполнение функции до того момента, пока промис, переданный в `await`, не выполнится.

2. Внутри асинхронной функции можно работать с промисами так же, как и в стандартных промис-цепочках, но более понятно и читаемо благодаря синтаксическому сахару async-await. 

3. Для обработки ошибок можно использовать блок `try-catch`, который позволяет ловить и обрабатывать ошибки в асинхронном коде, аналогично обработке ошибок с использованием метода `catch` у промисов.
да правильно. <br/> <br/> await  можно вызвать только внутри async  блока. <br/> когда мы используем await  отлов ошибки всегда нужно делать в try { ... } catch (e) {}. <br/> любой метод который возвращает промис  можно использовать await внутри блока async <br/> и того вы можете комбинировать устаревший код с новым. <br/> <br/> <pre><code class="js">(async () =&gt; {

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) =&gt; {
       fetch(url).then(res =&gt; res).then (res =&gt; res.json()).then((result) =&gt; {
         resolve(result);  // говорим что наш промис достиг успеха,
      }).carch(e =&gt; {
          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 =&gt; {
    console.log({result});    
})

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

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


})());</code></pre>
Похожие вопросы