Несколько раз я обнаруживал, что использую fetch для вызова API. Я нахожу его относительно простым в использовании.

Вот ссылка на документацию mdn на Fetch. Получить API

Первое, что вам нужно сделать, это определить, делаете ли вы запрос на получение или отправку. Запросы Get обычно используются для получения информации с сервера. Запросы на получение не изменяют никаких данных на сервере, они просто извлекают их для вас. Например, вы хотите получить прогноз погоды на сегодня для пользовательского приложения погоды, над которым вы работаете. Данные уже добавлены в API, и вам не нужно будет изменять их, поэтому вы используете запрос на получение, чтобы получить их из API и отобразить в своем приложении.

Вот как выглядит запрос на выборку:

fetch('your_api_url_goes_here') {

.затем (функция (ответ) {

вернуть ответ.json();

}}

.затем (функция (данные) {

console.log(данные);

})

}

Итак, что делает этот код? Он отправляет запрос на получение API. После завершения запроса он принимает ответ, полученный от сервера, и возвращает ответ в формате json. Вот где then вступает в игру. Следующий затем берет возвращенный json и записывает его в консоль.

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

Вот как это может выглядеть:

fetch('your_api_url_goes_here', {

метод: «ПОСТ»,

тело: JSON.stringify({your_data_to_be_updated: идет сюда}),

заголовки: {

«Тип контента»: «приложение/json,

}

}). тогда(ответ => response.json())

.catch(ошибка => console.log('Ошибка:', ошибка))

.then(ответ => console.log(ответ))

Давайте рассмотрим, как это работает. Мы передаем 2 аргумента функции Fetch. Первый — это URL-адрес, по которому мы хотим перейти для получения данных. Во-вторых, это объект. Объект состоит из пар ключ/значение, которые являются инструкциями запроса.

Первый – метод. Теперь в нашем примере с get мы не указали метод, так как он предполагается автоматически. Однако в этом случае нам нужно указать post. Следующее — это тело. Здесь вы передаете свои данные и форматируете их в json для отправки на сервер. Последняя часть — это заголовки. Их можно использовать для определения типа контента, чтобы сервер знал, как передавать данные, его также можно использовать для отправки инструкций по аутентификации, когда серверу необходимо проверить правильность вызова API и внести любые запрошенные изменения.

Как только данные были обновлены, он отправляет обновленные данные обратно, показывая, что они были сохранены в базе данных. Отлично, теперь мы можем обновить наше приложение данными.

Это основы того, как вызов API с помощью функции Fetch в JavaScript. Есть и другие способы сделать это, включая использование jquery, который имеет функции $.get и $.post и $.ajax для использования с API. Существует также xmlhttprequest (XHR), который также может отправлять данные туда и обратно. Важная часть состоит в том, чтобы понять, что должны делать GET и POST, остальное легко.

Если вы хотите прочитать больше в моем блоге, вы можете найти его здесь