Для обмена данными между клиентом (мы рассматриваем приложение на смартфоне) и сервером (веб-сервером) в основном используется 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 и т.д.