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

Обзор методов HTTP HTTP (протокол передачи гипертекста) — это протокол, используемый для связи между клиентами (например, веб-браузерами) и серверами. HTTP определяет набор методов, указывающих тип действия, которое должно быть выполнено над ресурсом.

Наиболее распространенные HTTP-методы:

  • GET: получить ресурс с сервера
  • POST: отправить данные для обработки сервером
  • PUT: обновить существующий ресурс на сервере
  • УДАЛИТЬ: удалить ресурс на сервере
  • ИСПРАВЛЕНИЕ: обновить часть существующего ресурса на сервере

Использование Fetch для HTTP-запросов Fetch — это современный веб-API для выполнения сетевых запросов. Он предоставляет простой и лаконичный способ выполнения HTTP-запросов и обработки ответов.

Базовый синтаксис для выполнения запроса с помощью Fetch выглядит следующим образом:

fetch(url, options)
  .then(response => {
    // handle response
  })
  .catch(error => {
    // handle error
  });

Параметр url указывает URL-адрес конечной точки API, которую вы хотите вызвать. Параметр options — это объект, который содержит дополнительную информацию о запросе, такую ​​как метод HTTP, заголовки и данные для отправки с запросом.

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

Запрос GET. Запрос GET используется для получения данных с сервера. Чтобы сделать запрос GET с помощью Fetch, просто исключите свойство method из объекта options:

fetch('https://api.example.com/data')
  .then(response => {
    // handle response
  })
  .catch(error => {
    // handle error
  });

Это сделает запрос GET к указанному URL-адресу и вернет ответ от сервера.

POST-запрос. POST-запрос используется для отправки данных на сервер. Чтобы сделать запрос POST с помощью Fetch, установите для свойства method объекта options значение «POST» и включите данные для отправки в свойство body:

const data = { username: 'example', password: 'password' };
fetch('https://api.example.com/login', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(data)
})
  .then(response => {
    // handle response
  })
  .catch(error => {
    // handle error
  });

Это сделает запрос POST на указанный URL-адрес с предоставленными данными в теле запроса.

Запрос PUT. Запрос PUT используется для обновления существующего ресурса на сервере. Чтобы сделать запрос PUT с помощью Fetch, установите для свойства method объекта options значение «PUT» и включите обновленные данные в свойство body:

const data = { name: 'New Name' };
fetch('https://api.example.com/data/1', {
  method: 'PUT',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(data)
})
  .then(response => {
    // handle response
  })
  .catch(error => {
    // handle error
  });

Это сделает запрос PUT на указанный URL-адрес с обновленными данными в теле запроса.

Запрос DELETE: запрос DELETE используется для удаления ресурса на сервере. Чтобы сделать запрос DELETE с помощью Fetch, установите для свойства method объекта options значение «DELETE»:

fetch('https://api.example.com/data/1', {
  method: 'DELETE'
})
  .then(response => {
    // handle response
  })
  .catch(error => {
    // handle error
  });

Это сделает запрос DELETE на указанный URL-адрес для удаления ресурса.

Запрос PATCH: запрос PATCH используется для обновления части существующего ресурса на сервере. Чтобы сделать запрос PATCH с помощью Fetch, установите для свойства method объекта options значение «PATCH» и включите обновленные данные в свойство body:

const data = { name: 'Updated Name' };
fetch('https://api.example.com/data/1', {
  method: 'PATCH',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(data)
})
  .then(response => {
    // handle response
  })
  .catch(error => {
    // handle error
  });

Это сделает запрос PATCH на указанный URL-адрес с обновленными данными в теле запроса.

Заключение В этом посте мы рассмотрели, как использовать Fetch для вызова API для всех методов HTTP. Fetch предоставляет простой и гибкий способ выполнения HTTP-запросов и обработки ответов. Используя соответствующий метод HTTP и включив необходимую информацию в объект options, вы можете вызывать API и получать данные или выполнять действия на сервере.