Здравствуйте, меня зовут Крис, и в настоящее время я участвую в программе разработки программного обеспечения Flatiron. Я только что закончил свой первый проект на ванильном JavaScript (mod4), основанный на одном из моих любимых увлечений. Это мое хобби, которым я занимаюсь каждый день, это смотреть аниме. Немного справочной информации о моем проекте, это довольно простой проект JavaScript, который я сделал в качестве форума для обсуждения аниме. Это включает в себя создание нового аниме для добавления в список, а также оставление отзывов. В моем проекте есть бэкэнд Rails Api и интерфейс Vanilla JavaScript. Когда вы создаете новое аниме или новый обзор, он отправляет эти данные на сервер и сохраняет их.
Одна концепция, с которой я боролся в начале этого проекта, заключалась в использовании выборки со всеми различными методами HTTP, такими как GET, POST, PUT и DELETE. Fetch API — это API JavaScript на основе обещаний для выполнения асинхронных HTTP-запросов в браузере, аналогичный старому стилю XMLHttpRequest. В отличие от XMLHttpRequest, fetch — это простой и понятный API, который использует обещание для предоставления более гибкой функции для получения ресурсов с сервера. Чтобы использовать API выборки, просто введите URL-адрес, путь к ресурсу, который вы хотите получить. Мы передаем путь к ресурсу, который хотим получить, в качестве параметра функции fetch(). Он возвращает обещание, которое передает ответ в then(), когда оно выполнено. Затем мы используем метод catch() в нижней части выборки для перехвата ошибок, если запрос не может быть выполнен из-за сбоя сети или по любой другой причине.
Скриншот выше — это фрагмент использования выборки с POST. Главное, что требуется, — это использовать выборку и передать URL-адрес ресурса, который вы хотите получить (в случае с моим приложением я хотел создать обзор аниме). Затем мы указываем метод, который мы используем, то есть POST. Затем мы указываем заголовки с типом контента «application/json», а также указываем нашему приложению принимать тип контента «application/json». После этого мы указываем в своем теле, что мы вызываем JSON для нашего объекта и превращаем его в строку с помощью stringify. Затем мы используем метод then() для получения ответа в формате JSON, поскольку здесь мы используем JSON. Наконец, мы хотим указать, что представляет собой обзор в данном случае, и указать любые необходимые атрибуты, а также любые определенные функции, необходимые для отправки обзора.
По умолчанию Fetch API использует метод GET для асинхронных запросов. В приведенном выше фрагменте я определил this.baseUrl равным «http://localhost:3000/animes». Поэтому, когда я вызываю fetch(this.baseUrl) или, другими словами, fetch('http://localhost:3000/animes'), мне не нужно указывать, что это метод GET, потому что по умолчанию он будет использовать метод fetch . В этой асинхронной функции я устанавливаю константный ответ равным ожиданию выборки (this.baseUrl). Я использую ключевое слово await, поэтому асинхронная функция приостанавливается до завершения запроса. Строка кода под ней возвращает ответ в формате JSON. Когда запрос выполнен, он возвращает список аниме в формате JSON.
