Каким образом можно переписать асинхронный код с использованием 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` у промисов.
да правильно. 

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


})());
Похожие вопросы