В последнее время я работал над множеством проектов на React Native; Я перешел с React и обнаружил, что использую в целом другой стиль, в первую очередь мой код стал минималистичным. В частности, я выбрал ключевые слова async и await, чтобы переписать код обещания для лучшей читаемости;

Базовый запрос на получение JSON с URL

fetch('.api/some.json')
.then(response => {
  if (!response.ok) {
    throw new Error(`HTTP error! status: ${response.status}`);
  } else {
    return response.json();
  }
})
.then(data => {
  setObject(data);
})
.catch(e => {
  console.log('There has been a problem with your fetch operation: ' + e.message);
});

Базовый запрос на получение JSON с URL-адреса с использованием async / await

примечание: использование перехватчиков реакции useState

const myfetch = async () => {
 try {
 const response = await fetch('api/some.json');
 return await response.json();
 setObject(response.data);
} catch(e) {
 console.log('There has been a problem with your fetch operation: ' + e.message);

Хорошо, а какова история использования async?

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

- MDN

Итак ... с точки зрения непрофессионала, мы получаем доступ к нашему выражению «await», которое позволяет нам приостанавливать выполнение функции до тех пор, пока «обещание» не будет выполнено, и возобновить нашу функцию с того места, где мы остановились. выключено с завершением исполнения.

Давайте воспользуемся аналогией; представьте, что наши клиенты входят, мы берем их заказ (запрос) и приносим его на кухню (на стороне сервера), а затем немедленно возвращаемся с тарелкой (обещанием), на которой ничего нет…

Мы можем представить, что наши клиенты будут очень рассержены (сообщение об ошибке консоли). По сути, запрос был сделан, но «обещание» еды так и не было выполнено.

Оператор await используется для ожидания Promise. Его можно использовать только внутри async function.

- MDN

Когда мы делаем заказ в реальном мире, мы ожидаем, что при выполнении запроса будет ожидание завершения заказа (бэкэнд). Ключевые слова async / await воспроизводят ту же ситуацию; кроме того, «ожидание» не просто ожидает в течение некоторого заранее определенного времени, но пока запрос не будет завершен, что позволяет избежать возможных ошибок (конечно, у этого есть свои проблемы, если это занимает слишком много времени).

В общем, освоение ключевых слов async / await - отличный способ очистить код, и если у вас возникли проблемы с пониманием запросов на выборку с использованием «.then», это может помочь вам понять поток данных и то, что происходит во время вашего запроса.