По прошествии нескольких недель в Flatiron School стало ясно, что модуль, основанный на Javascript, будет сложной задачей. Чтобы лучше понять, что такого сложного в этом языке, я спросил своих одноклассников, которые ранее проходили этот модуль, что они считают самым сложным. Многие ответы касались того, насколько сложным было изучение концепций, связанных с Javascript Fetch. Чтобы подготовиться к этой трудной задаче, я решил написать этот блог, чтобы лучше понять и поделиться своими открытиями с теми, кто однажды может оказаться на моем месте.
Работа с асинхронными HTTP-запросами JS
Прежде чем углубиться в анализ выборки, я хочу рассказать тем, кто плохо знаком с Javascript, что такое асинхронные HTTP-запросы и как с ними работать. Для этого нужно ознакомиться с обещаниями.
В большинстве языков программирования операции выполняются по порядку (последовательно). Первая строка должна быть выполнена, прежде чем мы сможем перейти к следующей строке. Но с JavaScript у нас есть несколько операций, которые выполняются в фоновом/переднем плане, и, как вы знаете, у нас не может быть веб-приложения, которое зависает каждый раз, когда пользователь взаимодействует с приложением.
JavaScript является однопоточным, а это означает, что два фрагмента скрипта не могут выполняться одновременно; они должны бежать один за другим. HTML 5 Rocks прекрасно резюмирует обещания:
JavaScript является однопоточным, а это означает, что два фрагмента скрипта не могут выполняться одновременно, они должны запускаться один за другим. В браузерах JavaScript разделяет поток с множеством других вещей. То, что это за штука, отличается от браузера к браузеру, но обычно JavaScript находится в той же очереди, что и рисование, обновление стилей и обработка действий пользователя (таких как выделение текста и взаимодействие с элементами управления формы). Активность в одной из этих вещей задерживает другие.
Как человек, вы многопоточны. Вы можете печатать несколькими пальцами, вести разговор и вести разговор одновременно. Единственная блокирующая функция, с которой нам приходится иметь дело, — это чихание, при котором вся текущая деятельность должна быть приостановлена на время чихания. Это довольно раздражает, особенно когда вы за рулем и пытаетесь поддержать разговор. Вы не хотите писать чихающий код.
Обещания не позволяют разработчикам писать «хитрый» код, который действительно важен для получения API, его основная цель — делать запросы на активы или данные.
Назад к извлечению
Метод fetch() возвращает Promise, который разрешает Response из Request для отображения статуса (успешно или нет).
Короче говоря, мы сначала определяем путь (Fetch), затем запрашиваем данные с сервера (Request), в-третьих, определяем тип содержимого (Body). strong>) и, наконец, мы получаем доступ к данным (Response).
Я рекомендую использовать метод catch при написании кода. Метод catch — это метод обратного вызова, который перехватывает любые ошибки, возникающие во время выполнения запроса.
Работа с примером
Итак, теперь давайте поговорим на примере. В этом примере мы будем использовать потрясающий сайт JSONplaceholder для получения данных о сообщениях. После создания файла index.html и добавления скелета HTML вам нужно будет создать кнопку, которую я назвал Получить данные API.
После завершения вам нужно будет добавить прослушиватель событий. Слушатель событий в основном прикрепляет обработчик событий к указанному элементу. В этом случае прослушиватель событий будет искать идентификатор с текстом «getPosts» и после нажатия на него вызовет функцию #getPosts.
Затем вам нужно будет создать свою функцию, которая будет похожа на функцию ниже. Таким образом, для каждого fetch(), данные которого вы хотите показать или изменить, вам понадобятся по крайней мере два метода then(): первый для возврата метода ответа, который извлекает ваши данные, а второй затем фактически работать с данными.
И вот так вы создали кнопку, при нажатии на которую будет возвращаться сообщение!
Иди вперед и принеси
Бам! Вот и все, самые основы fetch(). Я настоятельно рекомендую прочитать документы MDN, статьи Google и javascript.info. Но лучший способ учиться — это делать, так что идите и создайте привлекательный новый сайт!
