Передача данных в GET-запросе через AngularJS: решение

Быстрый ответ

При использовании AngularJS для передачи данных посредством метода $http.get, в качестве аргумента применяется объект params, содержащий параметры запроса. Они будут включены в URL. Вот пример этого:

$http.get('/api/data', { params: { key: 'value' } })
     .then(response => console.log(response.data));

В результате AngularJS добавит к URL параметры в виде строки запроса ?key=value, и данные будут направлены на сервер.

Создание, отправка и приём запроса

Отправка данных GET-запросом с использованием сервиса $http предполагает упаковку нужных данных в объект params, который, в свою очередь, передаётся на сервер.

Добавление заголовков к запросу

Не только параметры, но и заголовки HTTP могут быть переданы в запросе. Это дает возможность предоставить серверу дополнительные сведения о запросе:

$http.get('/api/data', {
  params: { key: 'value' },
  headers: {'Accept': 'application/json'}
}).then(response => /* обработка ответа сервера здесь */);

Подробнее об этом расскажет наш спикер на видео

Использование промисов для обработки асинхронных запросов

В асинхронном JavaScript промисы используются для обработки ответов сервера:

function getData(params) {
  var deferred = $q.defer();
  $http.get('/api/data', {params: params}).then(
    function(response) {
      deferred.resolve(response.data); // Если получен успешный ответ
    },
    function(response) {
      deferred.reject('Ошибка: ' + response.status); // Если произошла ошибка при выполнении запроса
    }
  );
  return deferred.promise;
}

Создание сервиса AngularJS для отправки запросов

Реализацию сервиса, инкапсулирующего $http, можно привести для понимания, как можно улучшить структуру и повторное использование кода:

app.service('DataFetcher', function($http) {
  this.retrieveData = function(params) {
    return $http.get('/api/data', {params: params}).then(response => response.data);
  };
});

Визуализация

Допустим, что вы сами управляете системой запросов:

Ваш сервис: Подготавливает данные для запросов.
$http.get: Инициирует отправку запроса.

Момент отправки данных:

Сервис: 📦 = { 'params': { 'playerId': '12', 'season': '2023' } }
Отправка: ✅ – Проверяем корректность параметров.

Каждый из предоставленных параметров направляет запрос в нужную сторону, словно координаты GPS указывающие на нужные данные.

Профилактика в обработке запросов

Перехват параметров на сервере

Для обработки параметров запроса на серверной стороне, например, при использовании PHP, вы будете применять $_GET.

// Обработка параметров на PHP
$playerId = $_GET['playerId'];

Кодирование URL

Это важно: следует корректно кодировать URL-адреса для соответствия требованиям сервера:

$http.get('/api/data/' + encodeURIComponent(dataId));

Обработка ошибок в запросах

Передача дополнительных данных

Дополнительные данные всегда можно передать в params, такие как, например, настройки радиочастот:

$http.get('/api/data', { params: { RadioChannel: 'SmoothJazz', volume: '11' } })
     .then(response => /* Обработка успешного ответа */);

Обработка ошибок

Для обработки ошибок используйте .catch() или обработчики в .then():

$http.get('/api/data', { params: { key: 'value' } })
     .then(response => /* Успешный ответ */, error => /* Обработка ошибки */);

Полезные материалы

1. Документация API AngularJS: сервис $http — Полный руководство по использованию $http в AngularJS.
2. Обсуждение на StackOverflow о передаче данных в GET-запросах — Большой выбор решений для различных ситуаций с $http.get.
3. Видеоурок на YouTube – AngularJS HTTP GET Method — Обзор метода GET в контексте AngularJS.