Потребление данных из API во Flutter с помощью пакета DIO (1)


Введение

Для разработчика мобильных приложений потребление данных из API является одним из навыков, которыми вы должны обладать. Flutter имеет множество пакетов, которые помогают разработчику получать данные из API.

DIO

DIO — это популярный пакет для получения данных из API на Flutter, он мощный и простой в использовании.

Пример GET

Для примера мы используем API reqres.in для выполнения GET, POST и PUT.

Сначала мы должны создать модель данных, которая будет хранить данные из API, прежде чем мы будем использовать их с помощью flutter.
Вы можете создать модель данных на основе данных ответа от API, здесь данные ответа от метода GET reqres.in :
GET:https://reqres.in/api/users?page=2

class UserModel {
// this is the data from json response,
// each type data based on success json response
  int? page;
  int? perPage;
  int? total;
  int? totalPages;
  List<Data>? data;

// this is constructor
  UserModel({
    this.page,
    this.perPage,
    this.total,
    this.totalPages,
    this.data,
  });

// this is function to store data base on key-value response
  UserModel.fromJson(Map<String, dynamic> json) {
    page = json['page'];
    perPage = json['per_page'];
    total = json['total'];
    totalPages = json['total_pages'];
    data = json['data'] == null
        ? []
        : (json['data'] as List).map((e) => Data.fromJson(e)).toList();
// on this data we should mapping each response from List to 'class Data'
  }
}

// this class for store data from each response on List
class Data {
  int? id;
  String? email;
  String? firstName;
  String? lastName;
  String? avatar;

  Data({
    this.id,
    this.email,
    this.firstName,
    this.lastName,
    this.avatar,
  });

  Data.fromJson(Map<String, dynamic> json) {
    id = json['id'];
    email = json['email'];
    firstName = json['first_name'];
    lastName = json['last_name'];
    avatar = json['avatar'];
  }
}
Вход в полноэкранный режим Выйти из полноэкранного режима

Затем мы сделаем функцию для получения API с помощью DIO.
Использовать метод GET в DIO очень просто, нужно только объявить пакет DIO в классе, затем сделать функцию для использования метода GET и передачи URL.

class ApiServices {
  Dio dio = Dio();

  Future<Map<String, dynamic>> getUser() async {
    const String url = 'https://reqres.in/api/users?page=2';
    try {
      Response response = await dio.get(url);
      return response.data;
    } on DioError catch (error, trace) {
      print('DIO error : $error, on : $trace');
      return error.response!.data;
    }
  }
}
Вход в полноэкранный режим Выход из полноэкранного режима

Пояснение:

Future<Map<String, dynamic>> getUser() async {

В этом коде мы используем данные типа Future, потому что Dart разрешает только асинхронную работу с данными типа Future. Затем мы используем тип данных Map of String, причем динамический, потому что ответ от GET — это все еще массив json, и нам нужно отобразить его позже.

Затем мы сделаем еще одну функцию для приведения Map of String, dynamic к List of DataModel:

Future<List<DataModel>> userServices() async {
    List<DataModel> userList = [];
    var response = await getUser();
    if (response.containsKey('data') && response['data'] is List) {
      userList =
          (response['data'] as List).map((e) => DataModel.fromJson(e)).toList();
    }
    return userList;
  }
Вход в полноэкранный режим Выход из полноэкранного режима

Объяснение:

Future<List<DataModel>> userServices() async {

Возвращаемые данные от getUser — это Map данных json, мы должны преобразовать их в List of DataModel, прежде чем использовать их на Flutter.

if (response.containsKey('data') && response['data'] is List) {

Поскольку мы просто хотим использовать массив ‘data’, мы должны убедиться, что ответ имеет его, а затем мы отображаем его в DataModel.

userList =
(response['data'] as List).map((e) => DataModel.fromJson(e)).toList();

И тогда у нас есть List of DataModel, мы можем использовать его с помощью ListView.builder() на Flutter.

Общий метод DIO GET

Помимо ‘path’ в dio.get() есть еще один параметр в методе get(), который вы можете использовать:

Оцените статью
devanswers.ru
Добавить комментарий