Обзор:
- Концепция и использование
- Авария
- Получить интерфейсы
- Примеры HTTP
- Заключение
Концепция и использование
Во многих современных веб-приложениях обычной практикой является запрос или отображение каких-либо данных с существующего сервера. Это может включать получение такой информации, как пользователи, сообщения, комментарии и т. Д., А затем манипулирование ею с помощью действий CRUD (создание, чтение, обновление или удаление). Чтобы сделать это с помощью JavaScript, мы можем обратить внимание на Fetch API.
Fetch API предоставляет интерфейс JavaScript для извлечения и управления частями процесса HTTP, такими как запросы и ответы. Он также предоставляет глобальный метод fetch (), который обеспечивает простой и удобный способ асинхронной выборки ресурсов.
Хотя раньше этот тип задач выполнялся с использованием XMLHttpRequest или XHR для краткости, современные методы использования Fetch предоставляют гораздо лучшую альтернативу. Основное отличие состоит в том, что Fetch API использует обещания, которые позволяют упростить и чище API, избежать проблем с обратным вызовом и в целом менее подробны. Fetch также предоставляет единое место для определения других связанных с HTTP концепций, таких как CORS и расширения HTTP.
Разбивка
Базовая структура
fetch()работает так ...
fetch() делает сетевой запрос к URL-адресу и возвращает обещание. Обещание разрешается с помощью объекта response, когда удаленный сервер отвечает заголовками, но до загрузки полного ответа. Это приведет к статусу успешного или нет. Далее нам нужен способ доступа к содержимому выборки. Чтобы прочитать тело ответа, мы должны вызвать для него метод ответа, например text() или json(), который вернет другое обещание, значение разрешения которого является телом ответа. Это можно сделать с помощью обработчика .then() (обратный вызов). Наконец, добавление .catch в конец запроса на выборку позволяет консоли считывать любые ошибки, которые могли возникнуть во время обратного вызова.
Если это звучит сбивающе с толку, ничего страшного, мы рассмотрим несколько примеров в следующем разделе.
Короче говоря, мы сначала определяем путь (Fetch), во-вторых, запрашиваем данные с сервера (Request), в-третьих, определяем тип контента (Body ), и, наконец, что не менее важно, мы получаем доступ к данным (Ответ).
Basic fetch() blueprint
fetch(url)
.then(response => {
// handle the response
})
.catch(error => {
// handle the error
})
Интерфейсы загрузки
Fetch API имеет следующие интерфейсы
fetch():fetch()метод, используемый для получения ресурса.Headers: представляет заголовки ответа / запроса, позволяя запрашивать их и выполнять различные действия в зависимости от результатов и объявлять тип содержимого.body: Предоставляет методы, относящиеся к телу ответа / запроса.Request: представляет запрос ресурса.Response: представляет ответ на запрос.
Примеры HTTP
fetch() может перейти по любому URL, включая ваш собственный сервер. Чтобы посетить собственные файлы вашего сайта, просто укажите относительный путь вместо URL-адреса. Если fetch() не видит «http», предполагается, что вы переходите из корневого каталога.
Ниже приведены несколько примеров того, как реализовать выборку по URL-адресу. Важно отметить, что ваш сайт должен иметь возможность обрабатывать входящие данные на бэкэнде, чтобы определенные действия CRUD работали.
Our examples path will be https://jsonplaceholder.typicode.com/todos This will return dummy JSON files that follow REST conventions.
- Получение списка всех задач
fetch('https://jsonplaceholder.typicode.com/todos')
.then(response => response.json())
.then(data => console.log(data))
2. Создание новой задачи.
fetch('https://jsonplaceholder.typicode.com/todos', {
headers: { "Content-Type": "application/json; charset=utf-8" },
method: 'POST',
body: JSON.stringify({
title: 'Clean dishes',
completed: false
})
})
3. Удаление задачи с идентификатором 1
fetch('https://jsonplaceholder.typicode.com/todos/1', {
method: 'DELETE'
});
4. Обновление задачи.
fetch('https://jsonplaceholder.typicode.com/todos/2', {
headers: { "Content-Type": "application/json; charset=utf-8" },
method: 'PUT',
body: JSON.stringify({
complete: true
})
})
Заключение
В следующий раз, когда вам понадобится загрузить информацию с удаленного сервера с помощью сетевого запроса, не забудьте использовать быстрый и простой Fetch API. Его короткий синтаксис сэкономит вам время и избавит от головной боли и позволит будущим разработчикам быстро продолжить с того места, где вы остановились, легко понимая каждый запрос к серверу.
Этот пост написан студентом-разработчиком Power Code Academy.
