How do calling API in flutter using Dio?

Question

I need to parse JSON to object and use it in my app but I need to do this using dio library, but I'm new to it, can anybody help me how to use it to parse a JSON into an object, also my request need a token with it, my object will lock like this :

import 'dart:convert';

Users usersFromJson(String str) => Users.fromJson(json.decode(str));
String usersToJson(Users data) => json.encode(data.toJson());

class Users {
  Users({
    this.data,
  });

  List<Datum> data;

  factory Users.fromJson(Map<String, dynamic> json) => Users(
    data: List<Datum>.from(json["data"].map((x) => Datum.fromJson(x))),
  );

  Map<String, dynamic> toJson() => {
    "data": List<dynamic>.from(data.map((x) => x.toJson())),
  };
}

class Datum {
  Datum({
    this.id,
    this.name,
    this.email,
    this.phone,
    this.status,
    this.images,
  });

  int id;
  String name;
  String email;
  String phone;
  String status;
  List<Image> images;

  factory Datum.fromJson(Map<String, dynamic> json) => Datum(
    id: json["id"],
    name: json["name"],
    email: json["email"],
    phone: json["phone"],
    status: json["status"],
    images: List<Image>.from(json["images"].map((x) => Image.fromJson(x))),
  );

  Map<String, dynamic> toJson() => {
    "id": id,
    "name": name,
    "email": email,
    "phone": phone,
    "status": status,
    "images": List<dynamic>.from(images.map((x) => x.toJson())),
  };
}

class Image {
  Image({
    this.id,
    this.url,
    this.isProfileImage,
  });

  int id;
  String url;
  int isProfileImage;

  factory Image.fromJson(Map<String, dynamic> json) => Image(
    id: json["id"],
    url: json["url"],
    isProfileImage: json["is_profile_image"],
  );

  Map<String, dynamic> toJson() => {
    "id": id,
    "url": url,
    "is_profile_image": isProfileImage,
  };
}

can any one help me step by step doing this using provider and dio please!

Solution 1

Try something like this:

  final client = Dio();

  Future<_yourClass_> getData() async {
    final url = 'your-url';

    try {
      final response = await client.get(url);

      if (response.statusCode == 200) {
        return _yourClass_.fromJson(response.data);
      } else {
        print('${response.statusCode} : ${response.data.toString()}');
        throw response.statusCode;
      }
    } catch (error) {
      print(error);
    }
  }

... _yourClass_ data = await getData();

If you already has a token, you can add it into dio like this :

Dio()..options.headers['authorization'] = 'Bearer $token';

Of course it depends on authorization type. Also if you don't have token already, you need to make request first to obtain a token (similar as shown above) and then get token from response.data.

Solution 2

Here is a step by step instructions

First create a dio API service and service implement class

import 'package:dio/dio.dart';

abstract class HttpService{
  void init();

  Future<Response> getRequest(String url);
}

An Api calling implement class

import 'package:dio/dio.dart';
import 'package:getx_news_app_impl/service/http_service.dart';

const BASE_URL = "https://newsapi.org/";
const API_KEY = "fb12a31181aa4498ba52877978913275";


class HttpServiceImpl implements HttpService{

  Dio _dio;

  @override
  Future<Response> getRequest(String url) async{
    // TODO: implement getRequest

    Response response;
    try {
      response = await _dio.get(url);
    } on DioError catch (e) {
      print(e.message);
      throw Exception(e.message);
    }

    return response;
  }

  initializeInterceptors(){
    _dio.interceptors.add(InterceptorsWrapper(
      onError: (error){
        print(error.message);
      },
      onRequest: (request){
        print("${request.method} | ${request.path}");
      },
      onResponse: (response){
        print("${response.statusCode} ${response.statusMessage} ${response.data}");
      }
    ));
  }

  @override
  void init() {
    _dio = Dio(BaseOptions(
      baseUrl: BASE_URL,
      headers: {"Authorization" : "Bearer $API_KEY"}
    ));

    initializeInterceptors();
  }

}

And using that class call API like this

class NewsRepoImpl implements NewsRepo{

  HttpService _httpService;

  
  Future<List<Article>> getNewsHeadline() async{
    // TODO: implement getNewsHeadline

    try {
       final response = await _httpService.getRequest("/v2/top-headlines?country=us");

       final parsedResponse = NewsResponse.fromJson(response.data);

       return parsedResponse.articles;
    } on Exception catch (e) {
      print(e);
      return null;
    }
  }
  
}

Comments

[David Sedlář]

Then you can debug your error response in 'catch', you can get exactly what server says and with these informations you should be able to modify your api calls. Every API is different.

[Qasem M. Zreaq]

I used this but give me a auth error request 401 Future<Users> getData() async { try { final response = await client.get(url,options: Options( headers: {HttpHeaders.authorizationHeader: $token} ), ); if (response.statusCode == 200) { print(response.data); return Users.fromJson(response.data); } else { print('${response.statusCode} : ${response.data.toString()}'); throw response.statusCode; } } catch (error) { print(error); }

[David Sedlář]

Yea but you also get some response message from server and there you need to get info about what is wrong. 401 is response code from server.

[Qasem M. Zreaq]

is it the right way like how I used dio called with token ?

[David Sedlář]

Yea it is, but check it against api doc, for example our api needs token in format 'Bearer $token'.

[David Sedlář]

It depends on your API documentation, fxmpl our server needs token in this format ['authorization'] = 'Bearer $token'

[Admin]

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.