Как бы выглядел данный код если вместо async/await использовать then и catch?

Question

[petroshevchenko1525]

Есть в React приложении такой метод:

fetchData = async () => {
   try {
    const response = await fetch(`https://........`);
    const data = (await response.json()).group;
    this.setState({
        data: data,
        car: Object.keys(data)[0] 
      },this.filter);
    } catch(err) {
      console.log("404 Not Found");
    }
  };

Как написать эту часть без синтаксиса async/await, а с использованием then и catch?

Answer 1

[Александр]

const fetchData = () => {
    fetch('...')
        .then(response => response.json())
        .then(({ group }) => {
            this.setState({
                data: group,
                car: Object.keys(group)[0]
            }, this.filter);
        })
        .catch(error => {
            console.log('404 Not Found');
        });
};

Comments

[petroshevchenko1525]

спасибо только не понял эту строку:
.then(({ group }) => {

Объясните пожалуйста что вы здесь сделали

[Тигран Абрамян]

petroshevchenko1525,
Это называется Деструктуризация.

[Александр]

petroshevchenko1525, Это деструктуризация объекта и как используется в функциях.

Answer 2

[Тигран Абрамян]

then и catch относятся не к React а к JS, так что соответственно такие методы есть.

fetchData = () => {
  fetch(`https://........`)
    .then((response) => response.json())
    .then((data) => {
      const groupedData = data.group;
      this.setState({
        data: groupedData,
        car: Object.keys(groupedData)[0]
      }, this.filter);
    })
    .catch(() => {
      console.log("404 Not Found");
    });
};

Comments

[petroshevchenko1525]

спасибо)