На первом этапе моего учебного лагеря в школе Flatiron я узнал, как сделать fetch() запрос. Мне было трудно понять эту концепцию. Я обнаружил, что застрял на уроке на целую неделю, прежде чем наконец начал добиваться некоторого прогресса в том, что казалось препятствием в то время. Наконец, я писал хороший код и делал успешные запросы на выборку. После тонны практики я достаточно освоился, чтобы написать об этом в блоге.

GET, POST, PUT, PATCH и DELETE — это пять самых распространенных запросов на выборку, но я буду писать о запросе GET по умолчанию. Для запроса GET по умолчанию вам нужны только fetch() и URL-адрес, который будет передан в виде строки. Другие требуют дополнительной настройки, которую я не буду освещать.

Итак, что такое fetch()? Как следует из названия, он используется для извлечения ресурсов. Fetch – это глобальный метод, который обеспечивает простой способ асинхронного извлечения данных из базы данных. Асинхронная функциональность позволяет нам вывести конкретную функцию из линейного потока выполнения. Это выгодно, так как позволяет выполнять остальную часть нашего кода. Это означает, что наша веб-страница будет продолжать загружаться, даже если запрос на выборку не завершен. Пользователь с большей вероятностью останется на нашей веб-странице или будет использовать наше приложение, если он не будет сидеть и ждать завершения запросов на выборку, прежде чем он увидит контент на своем экране. Если у нас есть несколько запросов на выборку, выполнение может занять довольно много времени. Даже если это время составляет всего десять секунд… просто подумайте о том, когда вы в последний раз ждали загрузки страницы десять секунд. Это казалось ненормальным? Заставило ли это вас усомниться в вашем Wi-Fi-соединении или какой-то другой фактор не соответствовал его обычным стандартам? Вы прервали миссию? Если вы ответили «да» на любой из этих вопросов, то вы воспользовались преимуществами асинхронной функциональности.

Давайте углубимся в техническую часть всего этого. Fetch требует, чтобы мы передали аргумент string, который будет URL-адресом ресурса, из которого вы хотите получить данные. Затем он возвращает вам promise с помощью метода .then.

fetch(url)
    .then(response => {
        // handle the response
    })
    .catch(error => {
        // handle the error
    });

Когда запрос завершится, ресурс будет доступен. В это время обещание будет преобразовано в объект response.

Сначала мне было трудно понять назначение объекта promise и метода .then, поэтому в этом посте я хотел бы уделить им немного больше времени.

Обещание представляет возможное завершение (или сбой) асинхронной операции и ее результирующее значение. При работе с промисом мы должны быть в курсе его текущего состояния: в ожидании, выполнено или отклонено.

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

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

Promise me that you’ll cook dinner 
  .then(we'll have a belly full of food)
  .then(we'll sleep nicely since we won't be hungry)

Как только обещание выполнено или отклонено, будет вызвана соответствующая функция-обработчик, разумеется, асинхронно. Поведение функции-обработчика следует определенному набору правил. Если функция обработчика:

  • возвращает значение, обещание, возвращенное then, разрешается с возвращенным значением в качестве его значения.
  • ничего не возвращает, обещание, возвращенное then, разрешается со значением undefined.
  • выдает ошибку, обещание, возвращенное then, отклоняется с выброшенной ошибкой в ​​качестве значения.
  • возвращает уже выполненное обещание, обещание, возвращенное then, выполняется со значением этого обещания в качестве значения.
  • возвращает уже отклоненное обещание, обещание, возвращенное then, отклоняется со значением этого обещания в качестве значения.
  • возвращает другой ожидающий объект обещания, разрешение/отклонение обещания, возвращенного then, будет следовать за разрешением/отклонением обещания, возвращенного обработчиком. Кроме того, разрешенное значение обещания, возвращаемое then, будет таким же, как разрешенное значение обещания, возвращенного обработчиком.

Важно полностью понять эти роли, чтобы по-настоящему понять функциональность выборки.

Итак, давайте рассмотрим то, что мы только что рассмотрели. Когда fetch запускается, он инициирует процесс извлечения ресурса из сети, возвращая обещание предоставить данные, когда они будут доступны. Возврат указанных данных выполняет это обещание. В идеале этот ответ успешен и возвращает полезные данные. Иногда ответы могут быть неудачными и возвращать сообщение об ошибке. Метод .then — это то, что позволяет нам выполнять этот процесс запроса-ответа.

Если у вас есть какие-либо вопросы или комментарии, я буду рад их прочитать. Не стесняйтесь обращаться. Спасибо за прочтение!

Ресурсы:
Fetch API — Web Apis: MDN. веб-API | MDN, https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API

Pomise.prototype, затем (). MDN, https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/then