Урок 7. HTTP и HTTPS, сетевые запросы в Dart и Flutter

Для обмена данными между клиентом (мы рассматриваем приложение на смартфоне) и сервером (веб-сервером) в основном используется http протокол или его расширение https для безопасной передачи данных.

В Dart есть одноименный пакет http, подключается он в файле зависимостей и метаданных pubspec.yaml:

dependencies: flutter: sdk: flutter http: ^0.12.0

Для подключения в самом проекте нужно указать:

import 'package:http/http.dart' as http;

Ключевое слово as — указывает на то что подключаемые методы из пакета будут доступны через объект-имя http, к примеру:

• http.get(...)
• http.post(...)
• http.put(...)
• и т.д.

Список методов можно посмотреть в исходном коде пакета: github.com/dart-lang/http/blob/master/lib/http.dart

Эти методы тесно связаны с REST API, но пакет http не ограничивает нас этим. С его помощью мы можем написать любой свой API, использующий http протокол, например JSON-pure API.

GET запросы к серверу

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

Список методов нашего тестового АПИ и примеры можно посмотреть здесь: json.flutter.su

Сделаем запрос к нашему тестовому серверу: https://json.flutter.su/echo

В ответ мы получим:

type:echo method:GET ip:88.201.***.*** date:Tuesday, 08-Jan-2019 20:43:32 Europe/Moscow

Код для выполнения асинхронного GET запроса к серверу и вывода в консоль:

http.get('https://json.flutter.su/echo').then((response) { print("Response status: ${response.statusCode}"); print("Response body: ${response.body}"); }).catchError((error){ print("Error: $error"); });

После выполнения запроса происходит обработка результата response, вложенной функции в .then((responce){...обработка результата...}).

Если возникает ошибка, например, при отсутствии интернета, срабатывает вложенный метод .catchError((error){...обработка ошибки...}).

В нашем примере response.statusCode == 200, это стандартный код успешного запроса. Для других методов REST API он может быть иным.

Содержимое ответа находится в response.body.

Тот же самый запрос можно описать без вложенной функции, и вызвать синхронно с помощью await:

var response = await http.get('https://json.flutter.su/echo'); print("Response status: ${response.statusCode}"); print("Response body: ${response.body}");

В get запросах мы можем передавать get-параметры в адресе строки:
https://json.flutter.su/echo?id=1

POST запросы к серверу

В post запросах можно передавать данные в теле запроса с помощью параметра body и кодировку encoding если она отличается от utf-8 (по умолчанию), синхронное выполнение метода с помощью await:

var response = await http.post('https://json.flutter.su/echo', body: {'name':'test','num':'10'}); print("Response status: ${response.statusCode}"); print("Response body: ${response.body}");

В параметре body вы можете передать: [String], [List<int>], [Map<String, String>].

Headers — передача заголовков

Еще один параметр который может быть указан для всех методов — это заголовки headers (Map<String, String>). В заголовках чаще всего передаются данные для авторизации и для выбора возвращаемых/передаваемых данных.

var response = await http.post('https://json.flutter.su/echo', headers: {'Accept':'application/json','Authorization':'Basic YWxhZGRpbjpvcGVuc2VzYW1l'} );

Try и catch — обработка ошибок

При использовании любых сетевых запросов необходимо использовать обработку ошибок и исключительных ситуаций
try {...} catch(error){...}

try { var response = await http.get('https://json.flutter.su/echo'); print("Response status: ${response.statusCode}"); print("Response body: ${response.body}"); } catch (error) { print(error); }

Данная конструкция позволит обработать ситуации когда нет доступа к сетевому ресурсу: выключена передача данных, отсутствует связь с сервером или указан неверный сетевой адрес. В блоке try{...} выполняется код программы, если он не может быть выполнен — выполняется блок catch(error){...}.

Пример программы

Здесь мы приведем только код функций кнопок с сетевыми запросами, а весь код программы для удобства мы разместили в репозитории сервиса GitHub

• https://github.com/flutter-tutorial/test_http — репозиторий
• github.com/flutter-tutorial/test_http/blob/master/lib/main.dart — основной код программы, при необходимости можно просмотреть без загрузки репозитория целиком

_sendRequestGet() { if(_formKey.currentState.validate()) { _formKey.currentState.save();//запуск функции сохранения данных из формы в переменную _url http.get(_url).then((response){ _status = response.statusCode; _body = response.body; setState(() {});//перестраиваем виджет окна для отображения изменений _status и _body }).catchError((error){ _status = 0; _body = error.toString(); setState(() {});//перестраиваем виджет окна в случае сетевой ошибки }); } }//_sendRequestGet _sendRequestPost() async { if(_formKey.currentState.validate()) { _formKey.currentState.save();//запуск функции сохранения try { var response = await http.post(_url); _status = response.statusCode; _body = response.body; } catch (error) { _status = 0; _body = error.toString(); } setState(() {});//перестраиваем виджет окна } }//_sendRequestPost _sendRequestPostBodyHeaders() async { if(_formKey.currentState.validate()) { _formKey.currentState.save();//запуск функции try { var response = await http.post(_url, body: {'name':'test','num':'10'}, headers: {'Accept':'application/json'} ); _status = response.statusCode; _body = response.body; } catch (error) { _status = 0; _body = error.toString(); } setState(() {});//перестраиваем виджет окна } }//_sendRequestPost

Скопируйте репозиторий с помощью команды
git clone https://github.com/flutter-tutorial/test_http.git
или скачайте как zip архив.

Так как в репозитории нет всех файлов для построения android и ios приложения, выполните команду, после загрузки, как при создании нового проекта:
flutter create test_http
test_http — имя директории скопированного проекта.

Если вы скопировали проект в Android Studio, то после команды «flutter create ...», необходимо нажать на кнопку Restart Dart Analysis Server, иначе ошибки не убрать.

Подробнее про копирование существующих Flutter проектов с помощью git, мы опишем в отдельном уроке.

В следующем уроке по HTTP запросам мы рассмотрим создание своего пакета для сетевого общения с сервером, и посмотрим как заменить http.post, http.get и т.д.