Flutter : Definindo uma estrutura para GetX -Parte 3 ( Get Connect )

Saudações! colegas, da última vez, entendemos modelos e modelos observáveis em Flutter e Getx. Você pode buscá-los aqui. Então, agora, como obtemos os dados da API? Usamos chamadas REST-API como GET, POST, PUT etc.

No post de hoje, aprenderemos o que é GetConnect no GetX e como o configuramos.

Vamos mergulhar em

GetConnect é uma maneira fácil de se comunicar de trás para frente com http ou websockets. Para poder lidar com as chamadas de API, criaremos uma classe que se estende da classe GetConnect. Esta classe por padrão conterá componentes de GetConnect para atender a chamada da API. Teremos que importar a biblioteca get_connect disponível no pacote get.

import 'package:get/get_connect.dart';

class ApiHelper extends GetConnect{
  factory ApiHelper() => instance;

  ApiHelper.init();
  
}
//É assim que iniciamos uma classe estendendo GetConnect .

Existem dois tipos de configuração disponíveis para GetConnect –

1) Configuração padrão

Na configuração padrão, o getconnect fornece uma variedade de elementos prontos para —

Rest Api

• GET

// Get request
Future get(String route,
  {Map<String, String>? header,
  Map<String, dynamic>? query}) async {
  try {
    final response = await get(
      route ,
      headers: header,
      query: query,
    );
    return response;  
  } catch (ex) {
    print(ex.toString());
    return ex;
  }
}

• POST

// Post request
Future post(
  String route,
  dynamic body, {
  Map<String, String>? header,
}) async {
  try {
    final response = await super
        .post(
          route,
          body,
          headers: header ,
        );

    return response;
  } catch (ex) {
    print(ex);
    return ex;
  }
}
// Postar requisição com arquivo
Future postReqWithFile(String route,List<int> image) async {
try{
    final form = FormData({
      'file': MultipartFile(image, filename: 'avatar.png'),
      'otherFile': MultipartFile(image, filename: 'cover.png'),
    });
    var res = await post(route, form);
    return res;
   } catch(ex){
     print(ex);
   }  
}

• PUT

//Put request 
Future putData(
  String route,
  dynamic body, {
  Map<String, String>? header,
}) async {
  try {
    Response response = await put( route, body,
        headers: header );
    return handleResponce(response);
  } catch (ex) {
    print(ex);
    return ex;
  }
}

• DELETE

//Delete request 
Future deleteData(
  String route, {
  Map<String, String>? header,
}) async {
  try {
    final response = await delete( route,
        headers: header );
    return response;
  } catch (ex) {
    print(ex);
    return ex;
  }
}

WebSocket 

• SOCKET

— Para nomear a função de soquete, eles devem começar com GetSocket e, em seguida, o nome da função e seu parâmetro.

— então passamos a rota do soquete e a duração do ping.

class ApiHelper extends GetConnect {
  //Socket
  GetSocket userMessages(String route, Duration ping) {
    return socket(route , ping: ping);
  }
}

2). Configuração personalizada

Você pode definir Url base, como modificadores de resposta, como modificadores de Requests, definir um autenticador, e até o número de tentativas em que ele tentará se autenticar, além de dar a possibilidade de definir um decodificador padrão que transformará todos os seus request em seus modelos sem qualquer configuração adicional.

URL base

Para configurar a URL base para toda a comunicação da API, basta configurá-la na função init().

@override
void init(){
httpClient.baseUrl = 'https://api.covid19api.com'
// Define baseUrl para
// Http e websockets se usado sem instância [httpClient]
}

RequestModifier

httpClient.addRequestModifier((request,response) {
      //adicionando chave em headers.
      request.headers['apikey'] = 'uniqueKey';
      print("URL - ${request.url}");
//Podemos até adicionar verificações para remover dados da resposta antes de serem entregues.
    return request;
});

Para adicionar autenticador com solicitações

httpClient.addAuthenticator((request) async {
      final response = await get("http://covidApi/token");
      final token = response.body['token'];
      // Define o cabeçalho
      request.headers['Authorization'] = "$token";
      return request;
    });
// para definir tentativas máximas para o autenticador
httpClient.maxAuthRetries = 3;
//Authenticator será chamado 3 vezes se HttpStatus for
//HttpStatus.unauthorized

Decodificador padrão

//Chame seu model com a extensão fromJson function definida nele.
//atribui o decodificador padrão no init e
//que transformará todas as suas requisições em seus Models.
httpClient.defaultDecoder = CasesModel.fromJson;

Existem muitas outras propriedades httpclient que permitirão que você personalize ainda mais, confira a documentação oficial do getX para obter mais informações.

Para chamar essas funções do ApiHelper em uma função de repositório

• Em seu arquivo dart do Repositório getX, importe o caminho de classe apihelper.
• Depois disso, inicie uma referência para essa classe.
• Depois disso, você pode apenas chamar as funções em sua função definida em sua classe de repositório com metodologia assíncrona.

import 'package:fluttergetxdemo/src/web_services/api_helper.dart';

class Repository {
  Future fetchDetails() async {
    String route = "https://route.com";
    final apiResponse = await ApiHelper.instance.getData(route);
    return apiResponse;
  }

e pronto.

Resumo

Sim! fizemos isso neste post, aprendemos sobre GetConnect e como configurá-lo para configuração padrão e configuração personalizada com suas propriedades em detalhes. Também aprendemos como acessar essas chamadas de descanso usando e buscar resposta em retorno de maneira assíncrona. Bom indo vê-lo em breve!

No próximo artigo você verá um exemplo funcional completo com novidades.