API — это интерфейс взаимодействия между программами, а если говорить о WEB, то это интерфейс взаимодействия различных сайтов со сторонними приложениями. Используя API можно значительно расширить функционал взаимодействия с любым сайтом, у которого есть открытый API.
Сервер — это программа, расположенная на компъютре настроеном на обработку запросов, способная получить запрос на определенный адрес и имеющая набор готовых действий на определенные запросы.
**REST (Representational state transfer) **— представляет собой стиль архитектуры, основанный на наборе принципов, которые описывают как сетевые ресурсы определяются и адресуются.
RESTful API — работает как веб-сайт, мы посылаем запрос с клиента на сервер, но в ответ получаем запрошенные данные.
REST-сервис требует, чтобы клиент делал запрос на добавление, извлечение или изменение данных на сервере. Запрос обычно состоит из:
1. HTTP-метод — определяет какую операцию выполнять
2. Заголовок— позволяет клиенту передавать информацию о запросе
3. Путь — путь к ресурсу. Доступные пути описываются в документации REST-сервиса
4. Тело — дополнительный блок запроса, содержащий данные
Выделяют 4 основных метода для работы с REST-сервисом.
POST — СОЗДАТЬ новый ресурс
GET — ПОЛУЧИТЬ набор ресурсов или определенный ресурс по ID
PUT — ОБНОВИТЬ определенного ресурса по ID
DELETE — УДАЛИТЬ определенного ресурса по ID
-
В заголовках запроса клиент отправляет дополнительные опции. читаем MDN
-
Варианты типов контента - это MIME-типы (Multipurpose Internet Mail Extensions). читаем MDN
-
MIME-типы, используемые для указания содержимого, состоят из типа и подтипа, которые разделены косой чертой /.
Например, текстовый файл, содержащий HTML, будет описан типом text/html. Если файл содержит CSS, он будет описан как text/css. Просто текстовый файл будет описан как text/plain. Если, к примеру, клиент ожидает text/css, а получает text/plain, он не сможет распознать и обработать контент.
Изображение — image/png, image/jpeg, image/gif
Аудио — audio/wav, audio/mpeg
Видео — video/mp4, video/ogg
Ресурсы — application/json, application/pdf, application/xml
Запросы должны содержать путь к ресурсу, над которым должна выполняться операция. Доступные пути описываются при создании REST-сервиса в его документации.
https://bookstore.com/customers/289/orders/12
Такой путь явно указывает ресурс, даже если вы никогда раньше не видели его, потому что он является иерархическим и описательным. Мы обращаемся к заказу с идентификатором 12 для клиента с идентификатором 289.
На запрос клиента сервер отправляет ответ. Ответ содержит коды состояния, чтобы информировать клиента о результате операции.
-
200(OK) Это стандартный ответ для успешных HTTP-запросов -
201(CREATED) Это стандартный ответ для HTTP-запроса, который привел к успешному созданию ресурса -
400(BAD REQUEST) Запрос не может быть обработан из-за неверного синтаксиса запроса или другой ошибки клиента. -
401(UNAUTHORIZED) Для доступа к ресурсу требуется авторизация. -
403(FORBIDDEN) У клиента нет разрешения на доступ к этому ресурсу. -
404** (NOT FOUND)** В настоящее время ресурс не найден. Возможно, он был удален или еще не существует. -
500(INTERNAL SERVER ERROR) Общий ответ на непредвиденный сбой, если нет более конкретной информации.
JSON - представляет собой формат данных, предназначенный для хранения и передачи данных. Можно рассматривать как строковое представление JavaScript-объекта.
Поддерживает следующие значения:
- string
- number
- object
- array
- boolean
- null
КЛЮЧИ и ВСЕ кроме: чисел, булей, null, литерала массива и объекта, ВСЕГДА должны быть в двойных кавычках.
{
"name": "Josh",
"weight": 175,
"age": 30,
"eyecolor": "brown",
"isHappy": true,
"cars": [ "Chevy", "Honda" ],
"favoriteBook": {
"title": "When the Fire Nation Attacked",
"author": "Nickelodeon",
"released": "02-21-2005"
}
}JSON.stringify() передаем аргументом javascript объект. после чего этот метод преобразует его в JSON формат (JavaScript => JSON)
JSON.parse() передаем аргументом JSON и на выходе получаем javascript объект (JSON=>JavaScript)
Асинхронный код - это код, который работает независимо от основного, поэтому в нем можно запрашивать или отправлять данные, не замораживая страницу для пользователя
AJAX (Asynchronous JavaScript and XML) - это метод отправки или запроса данных без необходимости перезагрузки страницы. За счет этого уменьшается время отклика и веб-страница получается более интерактивная и живая.
Под AJAX подразумевают любое общение с сервером без перезагрузки страницы.
читаем MDN
Построен на Promise. Интерфейс, набор методов и объектов запроса и ответа, для получения ресурсов от сервера.
fetch(url, options) принимает два параметра
- url — обязательный, путь к данным которые вы хотите получить.
- options — необязатльнный, объект настроек запроса. Содержит служебную информацию: метод, заголовки и т.д.
`fetch("https://test-website.name/some/url")`Возвращает Promise, который содержит ответ сервера.
Response — в первый then после вызова fetch передается экземпляр класса Response, который снабжает екземпляр различными методами и свойствами. В нем содержится служебная информация о состоянии ответа сервера.
fetch("https://api.myjson.com/bins/k9i31")
// fetch вернет промис, у которого есть метод then
.then(response => {
// в первом then всегда проверяется состояния ответа,
// если поле ok обьекта response правдиво (true)
// то возвращаем response.json() - сами данные,
// которые можно будет использовать в следующем then
if (response.ok) return response.json();
// если if не выполнился то "кидаем" ошибку
throw new Error("Error fetching data");
})
.then(data => {
// во втором then доступны данные которые мы
// вернули из первого then, результат responce.json()
console.log("data inside then: ", data);Создание (Create), чтение (Read), обновление (Update) и удаление (Delete) — это четыре основные метода для взимодействия с ресурсами API.
- POST (create) — создать новый ресурс
- GET (read) — получить набор ресурсов или определенный ресурс по идентификатору
- PUT (update) — обновление определенного ресурса по идентификатору
- DELETE (delete) — удаление определенного ресурса по идентификатору
Происходит когда мы хотим добавить новый пост. Функция которая будет это делать, должна отправить на сервер запрос, в теле которого будет объект с полями author и body. RESTful API по получению запроса добавит объекту id и в ответе на запрос вернет этот ресурс.
const newPost = {
author: 'Mango',
body: 'CRUD is awesome',
};
fetch('https://jsonplaceholder.typicode.com/posts', {
method: 'POST',
body: JSON.stringify(newPost),
headers: {
"Content-type": "application/json; charset=UTF-8"
}
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.log('ERROR' + error));
/* В ответ, если все хорошо, получим объект с добавленным id
{
id: 1, // идентификатор будет уникальным для каждого поста
author: 'Mango',
body: 'CRUD is awesome',
}
*/Происходит когда мы **хотим получить **существующие данные. Функция которая будет это делать, должна отправить на сервер запрос, без тела. RESTful API по получению запроса обработает его и в ответе на запрос вернет необходимые ресусрсы.
Просим все посты.
fetch('https://jsonplaceholder.typicode.com/posts')
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.log(error));Просим один пост по id, к примеру пост с id = 1.
fetch('https://jsonplaceholder.typicode.com/posts/1')
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.log(error));Происходит когда мы хотим обновить существующие данные. Функция которая будет это делать, должна отправить на сервер запрос, в теле которого необходимо указать объект с полями для изменения. RESTful API по получению запроса обработает его и в ответе на запрос вернет обновленный ресурс.
const postToUpdate = {
body: 'CRUD is realy awesome',
};
fetch('https://jsonplaceholder.typicode.com/posts/1', {
method: 'PUT',
body: JSON.stringify(postToUpdate),
headers: {
"Content-type": "application/json; charset=UTF-8"
}
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.log('ERROR' + error));
/* В ответ, если все хорошо, получим обновленный объект
{
id: 1, // идентификатор будет уникальным для каждого поста
author: 'Mango',
body: 'CRUD is realy awesome',
}
*/Происходит когда мы хотим удалить существующие данные. Функция которая будет это делать, должна отправить на сервер запрос, без тела. RESTful API по получению запроса обработает его, удалит ресурс из коллекции, и в ответе на запрос вернет статус результата.
fetch('https://jsonplaceholder.typicode.com/posts/1', {
method: 'DELETE'
}).then(() => console.log('success'))
.catch(error => console.log('ERROR' + error));