В последнее время я работал над множеством проектов на 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», это может помочь вам понять поток данных и то, что происходит во время вашего запроса.