Ionic: HTTP запросы к удаленому серверу

Зачастую, мобильное приложение работает с неким серверным АПИ. Пользователь может авторизовываться в приложении, может получать какие-то данные и отправлять данные на сервер. Соответственно, приложение должно уметь обращаться к серверу. В данной заметке я расскажу, как в Ionic можно работать с HTTP соединениями.


Я не буду сейчас говорить, что методы работы с сервером лучше всего выносить в сервис-провайдер, так как это уже относится к вопросам "удобно" и "правильно". Но имейте это ввиду.

Для начала нам нужно импортировать в наш модуль (класс, сервис-провайдер) необходимые библиотеки для работы с соединениями:

import {
    Http,
    Response,
    Headers,
    RequestOptions,
    URLSearchParams,
    QueryEncoder
} from '@angular/http';
По умолчанию, Angular передает данные как application/json, то есть на стороне сервера мы принимаем не HTTP параметры, а тело запроса с json-строкой. Ниже на примере PHP кода, я расскажу об этом.

Теперь нам нужен простой серверный скрипт, который, например, выдаст нам список городов в json-формате. Например PHP код:

header('Access-Control-Allow-Origin: *');
header('Content-Type: application/json');

$cities = [
    [
        'name' => 'Moscow',
        'color' => 'red'
    ],
    [
        'name' => 'Tula',
        'color' => 'green'
    ],
    [
        'name' => 'Novosibirsk',
        'color' => 'yellow'
    ]
];

die(json_encode($cities));

На выходе будет такая json-строка:

[{"name":"Moscow","color":"red"},{"name":"Tula","color":"green"},{"name":"Novosibirsk","color":"yellow"}]

Сделаем метод, который вернет нам promise на результат. Для примера будем использовать метод POST, так как сейчас в целом это не важно, потому что я рассказываю о принципе:

public getCities() 
{
    let headers = new Headers({
        "Content-Type": "multipart/form-data"
    });

    let request = {
        a: 1,
        b: 'test',
        c: true
    };

    return this.http
        .post('http://server/cities.php', JSON.stringify(request), { headers: this.headers })
        .timeout(10000)
        .map(data => data.json());
}

В первом параметре метода post указываем наш endpoint, то есть путь к нашему скрипту.

Во втором параметре - данные, которые мы хотим передать на сервер.

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

Методом timeout(10000) выставляем время ожидания в 10 секунд.

Ну а метод map(...) вернет нам promise, в котором будем работать с полученными данными.


Теперь самое простое. Воспользуемся нашим методом:

this.getCities().subscribe(
    data => {
        let cities = data;
		
        for(let i = 0; i < cities.length; i++) {
            city = cities[i];
            console.log('Name: ' + city.name + ', Color: ' + city.color);
        }
    },
    error => {
        console.log(error) // Информация об ошибке
    }
);

Переменная cities будет содержать ответ от сервера в виде обычного javascript-объекта, ассоциативный массив.

При необходимости для хорошего юзабилити можно использовать LoadingController для отображения процесса загрузки данных.

Немного о том, как принимать на стороне сервера данные из переменной request в PHP коде:

header('Access-Control-Allow-Origin: *');
header('Content-Type: application/json');

$body = json_decode(file_get_contents('php://input'), true);

print_r($body);

Результат будет ожидаемым:

Array
(
    [a] => 1
    [b] => 'test'
    [c] => 1 // true
)