Учебник API JavaScript Fetch API с примерами Post и заголовка JS Petch Petch

Автор оригинала: Manish Shivanandhan.

Если вы пишете веб-приложение, шансы вам придется работать с внешними данными. Это может быть ваша собственная база данных, сторонние API и так далее.

Когда Ajax Впервые появился в 1999 году, он показал нам лучший способ построить веб-приложения. Аякс был вехой в веб-разработке и является основной концепцией многих современных технологий, таких как реагирование.

Перед Ajax вы должны были восстановить всю веб-страницу даже для незначительных обновлений. Но Ajax дал нам способ получить контент от бэкэнда и обновить выбранные элементы пользовательского интерфейса. Это помогло разработчикам улучшить опыт пользователей и создавать более крупные, сложные веб-платформы.

Курс покидывания в API на отдых

Мы сейчас в возрасте Reзов apis Отказ Проще говоря, API для отдыха позволяет нажать и тянуть данные из хранилища данных. Это может быть либо ваша база данных или сервер третьей стороны, как Twitter API Отказ

Есть несколько различных типов отдыха API. Давайте посмотрим на те, которые вы будете использовать в большинстве случаев.

Получить – Получите данные с API. Например, получите пользователя Twitter на основе их имени пользователя.
Пост – Нажмите данные на API. Например, создайте новую запись пользователя с именем, возрастом и адресом электронной почты.
Поставить – Обновите существующую запись с новыми данными. Например, обновите адрес электронной почты пользователя.
Удалить – Удалите запись. Например, удалите пользователя из базы данных.

Есть три элемента в каждом API для отдыха. Запрос, ответ и заголовки.

Запрос – Это данные, которые вы отправляете на API, например, идентификатор заказа, чтобы получить детали заказа.

Ответ – Любые данные, которые вы возвращаетесь с сервера после успешного/неудачного запроса.

Заголовки – Дополнительные метаданные передавали на API, чтобы помочь серверу понять, какой тип запроса он имеет дело, например, «Content-Type».

Реальное преимущество использования API отдыха в том, что вы можете создать один слой API для нескольких приложений для работы.

Если у вас есть база данных, которую вы хотите управлять с помощью приложения Web, Mobile и Desktop, все, что вам нужно, это один слой API для отдыха.

Теперь, когда вы знаете, как работают API для отдыха, давайте посмотрим на то, как мы можем их потреблять.

Xmlhttprequest.

До JSON Взял по всему миру, основной формат обмена данными был XML. XMLHTTPREQUEST () – это функция JavaScript, которая позволила получить данные от API, которые вернули данные XML.

XMLHTTPREQUEST дал нам возможность получать данные XML с бэкэнда без перезагрузки всей страницы.

Эта функция выросла из своих начальных дней только XML. Теперь он поддерживает другие форматы данных, такие как JSON и PLASTEXT.

Давайте напишем простой XMLHTTPREQUEST CALL для API GitHub, чтобы получить мой профиль.

// function to handle success
function success() {
    var data = JSON.parse(this.responseText); //parse the string to JSON
    console.log(data);
}

// function to handle error
function error(err) {
    console.log('Request Failed', err); //error details will be in the "err" object
}

var xhr = new XMLHttpRequest(); //invoke a new instance of the XMLHttpRequest
xhr.onload = success; // call success function if request is successful
xhr.onerror = error;  // call error function if request failed
xhr.open('GET', 'https://api.github.com/users/manishmshiva'); // open a GET request
xhr.send(); // send the request to the server.

Вышеуказанный код отправит запрос на получение https://api.github.com/users/manishmshiva Чтобы получить информацию о моей Github в Json. Если ответ был успешным, он будет распечатать следующую JSON к консоли:

Если запрос не удался, он распечатает это сообщение об ошибке на консоль:

Fetch API.

API FETCT является более простым, простым в использовании версию XMLHTTPREQUEST, чтобы потреблять ресурсы асинхронно. Fetch позволяет вам работать с API для отдыха с дополнительными параметрами, такими как данные кэширования, чтение потоковых откликов и многое другое.

Основное отличие заключается в том, что Fetch работает с обещаниями, а не обратные вызовы. Разработчики JavaScript уходили от обратных вызовов после введения обещаний.

Для сложного приложения вы можете легко попасть в привычку писать обратные вызовы, ведущие к обратный ад .

С обещаниями легко писать и обрабатывать асинхронные запросы. Если вы новичок в обещаниях, Вы можете узнать, как они работают здесь Отказ

Вот как, как и мы написали функцию ранее, если вы использовали Fetch () вместо XMLHTTPREQUEST:

// GET Request.
fetch('https://api.github.com/users/manishmshiva')
    // Handle success
    .then(response => response.json())  // convert to json
    .then(json => console.log(json))    //print data to console
    .catch(err => console.log('Request Failed', err)); // Catch errors

Первый параметр функции Fetch всегда должен быть URL. Затем выберите второй объект JSON с такими вариантами, как метод, заголовки, тело запроса и так далее.

Существует важное различие между объектом ответа в XMLHTTPREQUEST и FETCH.

XMLHTTPREQUEST возвращает данные в качестве ответа, когда объект ответа из Fetch содержит информацию о самом объекте ответа. Это включает в себя заголовки, код состояния и т. Д. Мы называем функцию «RES.JSON ()», чтобы получить нужные данные от объекта ответа.

Еще одно важное отличие состоит в том, что API Fetch не будет выбросить ошибку, если запрос возвращает код состояния 400 или 500. Он все еще будет помечен как успешный ответ и передал функцию «Тогда».

Fetch только бросает ошибку, если сам запрос прерывается. Чтобы обрабатывать 400 и 500 ответов, вы можете написать пользовательскую логику, используя «Ответ .status». Свойство «Статус» даст вам код состояния возвращенного ответа.

Большой. Теперь, когда вы понимаете, как работает API Fetch, давайте посмотрим на пару образцов, таких как передача данных и работа с заголовками.

Работа с заголовками

Вы можете пройти заголовки, используя свойство «заголовки». Вы также можете использовать Строитель заголовков Чтобы лучше структурировать ваш код. Но прохождение объекта JSON к недвижимости «заголовки» должно работать для большинства случаев.

fetch('https://api.github.com/users/manishmshiva', {
  method: "GET",
  headers: {"Content-type": "application/json;charset=UTF-8"}
})
.then(response => response.json()) 
.then(json => console.log(json)); 
.catch(err => console.log(err));

Передача данных к запросу пост

Для запроса на почту вы можете использовать свойство «Body» для передачи строки JSON в качестве ввода. Обратите внимание, что тело запроса должно быть строкой JSON, в то время как заголовки должны быть объектом JSON.

// data to be sent to the POST request
let _data = {
  title: "foo",
  body: "bar", 
  userId:1
}

fetch('https://jsonplaceholder.typicode.com/posts', {
  method: "POST",
  body: JSON.stringify(_data),
  headers: {"Content-type": "application/json; charset=UTF-8"}
})
.then(response => response.json()) 
.then(json => console.log(json));
.catch(err => console.log(err));

API Fetch все еще находится в активном развитии. Мы можем ожидать лучших особенностей в ближайшем будущем.

Однако большинство браузеров поддерживают использование Fetch в ваших приложениях. Диаграмма ниже должна помочь вам выяснить, какие браузеры поддерживают его в Интернете и мобильных приложениях.

Я надеюсь, что эта статья помогла вам понять, как работать с API Fetch. Обязательно попробуйте Fetch для вашего следующего веб-приложения.

Я регулярно пишу о машинном обучении, кибербезопасности и дежопах. Вы можете подписаться на мой Еженедельная рассылка здесь.

Оригинал: “https://www.freecodecamp.org/news/javascript-fetch-api-tutorial-with-js-fetch-post-and-header-examples/”

Курс покидывания в API на отдых

Xmlhttprequest.

Fetch API.

Работа с заголовками

Передача данных к запросу пост

Читайте ещё по теме: