Сетевые вызовы во флаттере

Руководство по использованию Dio, альтернативы пакету http во Flutter для упрощенного подхода к сетевым запросам и практики чистого кода.

Каждое мобильное приложение должно взаимодействовать с внешним API через Интернет, чтобы предоставлять дополнительные функции, улучшающие взаимодействие с пользователем и расширяющие набор функций приложения. Это может включать аутентификацию, настраиваемую бизнес-логику, загрузку файлов и т. Д.

Большинство разработчиков Flutter используют для этого пакет http. Хотя это работает, существует более лучший, менее известный пакет под названием Dio.

Dio - это мощный HTTP-клиент для Dart, который поддерживает перехватчики, глобальную конфигурацию, FormData, отмену запроса, загрузку файлов, тайм-аут и т. Д.

Содержание -

1. Установка и настройка
2. Основные запросы
3. FormData и загрузка файлов
4. Перехватчики
5. Шаблонный проект

1. Установка и настройка

Чтобы добавить Dio в свой проект флаттера, просто добавьте следующую строку в свой pubspec.yaml файл -

dependencies:
   dio: ^3.0.9

А затем запустите - flutter pub get, если ваш редактор кода не получает автоматически зависимости для вас.

Чтобы использовать Dio, просто создайте экземпляр Dio, вызвав конструктор -

import 'package:dio/dio.dart';
Dio dio = new Dio();

2. Основные запросы

Давайте сначала рассмотрим базовые запросы, GET, POST, PUT и DELETE. Я собираюсь создать отдельные функции для каждого типа запроса, чтобы мы могли повторно использовать их с дополнительными деталями во вспомогательном классе, который мы компилируем в конце этого поста.

void getHTTP(String url) async {
  try {
    Response response = await dio.get(url);
    // Do whatever
  } on DioError catch (e) {
    // Do whatever
  }
}
void postHTTP(String url, Map data) async {
  try {
    Response response = await dio.post(url, data: data);
    // Do whatever
  } on DioError catch (e) {
    // Do whatever
  }
}
void putHTTP(String url, Map data) async {
  try {
    Response response = await dio.put(url, data: data);
    // Do whatever
  } on DioError catch (e) {
    // Do whatever
  }
}
void deleteHTTP(String url) async {
  try {
    Response response = await dio.delete(url);
    // Do whatever
  } on DioError catch (e) {
    // Do whatever
  }
}

3. FormData и загрузка файлов

Большинству приложений необходимо отправлять файлы / изображения на сервер как multipart/form-data, и этого очень легко добиться с помощью Dio благодаря всем классам и методам, доступным в пакете Dio.

// Single File with Additional Data
FormData formData = FormData.fromMap({
  "name": "Ryan Dsilva",
  "age": 21,
  "file": await MultipartFile.fromFile("PATH", filename:"OPTIONAL"),
});
// Multiple Files with Additional Data
FormData formData = FormData.fromMap({
  "name": "Ryan Dsilva",
  "age": 21,
  "files": [
    await MultipartFile.fromFile("PATH", filename:"OPTIONAL"),
    MultipartFile.fromFileSync("PATH", filename:"OPTIONAL")
  ],
}); 

Для всех, кто хочет использовать синхронную версию чтения файла, есть функция MultipartFile.fromFileSync(), которую можно использовать без ключевого слова async.

Затем этот объект FormData может быть отправлен как полезная нагрузка в POST и PUT запросах, как обычно.

ПРЕДОСТЕРЕЖЕНИЯ - при отправке нескольких файлов ключ в formData отправляется как files[], а не files, т.е. квадратные скобки включены. Поэтому, если у вас возникнут проблемы с вашим API, не используйте конструктор fromMap() для FormData, создайте его самостоятельно. Я потратил немало часов на выяснение этой крошечной детали.

4. Перехватчики

Почти каждый современный API защищен веб-токенами JSON, и практика прикрепления токена авторизации к заголовку сейчас считается стандартной. И Dio, и обычные пакеты http позволяют добавлять заголовки к запросам, но у Dio есть кое-что более интересное под названием Перехватчики.

Перехватчики - это блоки кода, которые выполняются до ожидаемого действия, то есть перехватывают действие до завершения. Перехватчики можно запускать в 3 местах - onRequest, onResponse и onError.

Перехватчики применяются к каждому запросу, ответу или ошибке, если они настроены, как показано ниже. Некоторые распространенные варианты использования перехватчиков - это авторизация с использованием веб-токенов JSON, анализ JSON и т. Д. Общая структура перехватчиков показана ниже -

dio.interceptors.add(InterceptorsWrapper(
    onRequest:(RequestOptions options) async {
     // Do something before the request is sent
     return options;
    },
    onResponse:(Response response) async {
     // Do something with response data
     return response;
    },
    onError: (DioError e) async {
     // Do something with response error
     return e;
    }
));

В случае присоединения веб-токена JSON перехватчик можно записать следующим образом:

Dio addInterceptors(Dio dio) {
  return dio
    ..interceptors.add(InterceptorsWrapper(
    onRequest: (RequestOptions options) => reqInterceptor(options),
    onError: (DioError e) async {
      return e.response.data;
    }),
  );
}
dynamic reqInterceptor(RequestOptions options) async {
  // Fetching JWT logic
  const token = '';  
  options.headers.addAll({"Authorization": "Bearer: $token"});
  return options;
}

reqInterceptor() извлекает JWT из приложения и добавляет его в заголовки запроса.

5. Boilerplate a.k.a Template.

Если вы прошли через все эти разделы, то знаете, что это может привести к появлению большого количества шаблонного кода даже с синтаксическим сахаром, который приносит Dio, и, следовательно, я почувствовал необходимость создания вспомогательного класса, который я мог бы повторно использовать для каждого проекта - подробнее сравнимо с своего рода шаблоном. Этот единственный файл может быть создан в каждом проекте Flutter, и у вас есть настройка Dio, и он готов к работе. Это также помогает сохранить код удобочитаемым и удобочитаемым.

Вот весь вспомогательный класс -

Вот важные разделы файла -

• BaseOptions - это глобальные настройки, которые можно использовать для всех запросов. Такие вещи, как базовый URL-адрес, тип ответа, таймауты и т. Д., Могут быть установлены здесь как глобальные переменные.
• Перехватчики - любые настраиваемые перехватчики, которые должны запускаться перед запросом / ответом / ошибкой. Прикрепить JWT почти не составляет труда для большинства людей и, вероятно, является наиболее распространенным вариантом использования для большинства приложений.
• Методы - стандартные HTTP-методы GET, POST, PUT и DELETE, окруженные блоком try..catch, который улавливает объект DioError. Таким образом Dio обертывает любые возникающие ошибки.

Чтобы использовать этот класс, просто создайте объект, а затем вызовите соответствующие методы везде, где вам нужно -

ApiBaseHelper api = ApiBaseHelper();
Response res = api.get('ENDPOINT_URL');

Вот и все! Надеюсь, вы узнали что-то новое и с нетерпением ждете возможности попробовать Дио в своем следующем проекте Flutter. Большое вам спасибо, если вы зашли так далеко. Поделитесь этой статьей, если она вам помогла, и мы будем благодарны за любые отзывы.

Я скоро вернусь с новым контентом! Следуйте за мной на GitHub, чтобы быть в курсе моих последних проектов -

[1] Dio от Flutter China - https://pub.dev/packages/dio