Flutter로 시작하기: http 요청

모든 개발자의 필수 항목이며 누구도 건너뛸 수 없습니다. http 요청을 알고 웹 서비스와 인터페이스하는 것은 많은 앱에서 필수적인 부분입니다. 가장 좋은 점은 Flutter에서 모든 작업이 매우 간단하다는 것입니다.

이 기사에서는 공식 Dart 개발 팀에서 게시한 단순히 http라는 패키지를 살펴보겠습니다. 네트워킹만 하면 되며 사용하기 정말 쉽습니다(Flutter에서 비동기 기능을 사용하는 방법을 알고 있는 한, 그렇지 않은 경우 공식 dart 문서here 참조).

준비

시작하기 전에 http를 종속성으로 추가해야 하므로 pubspec.yaml 파일을 편집하고 http를 추가해 보겠습니다.

dependencies:
  flutter:
    sdk: flutter
  http: ^0.12.2 //This one

그런 다음 좋은 오래된 작업flutter pub get을 수행하고 파일로 가져오기만 하면 됩니다. 우리를 위해 모든 작업을 수행하는 단일 함수를 호출하기 위해 이상적인 API 래퍼를 테스트 케이스로 사용할 것입니다.

import 'package:http/http.dart' as http;

//We'll use an enum to route our static function to a single HTTP method.
enum MyHttpMethod {
  get,
  post,
  delete,
  put,
}

class MyHttpWrapper{

   //This is a singleton class we can use in various places of a Flutter app
   MyHttpWrapper._privateConstructor();
   static final MyHttpWrapper_instance = MyHttpWrapper._privateConstructor();
   static MyHttpWrapperget instance {
      return _instance;
   }
}

또한 호출해야 하는 Uri를 생성하기 위해 최종 API에서 URL 끝점을 나누어야 합니다.

//Our first url is https://dummy.restapiexample.com/api/v1/employees

const String endpoint = "dummy.restapiexample.com";
const String api = "api/v1/employees";

이제 기본 사항부터 시작하겠습니다. GET 요청!

GET 요청

GET 요청은 절대적으로 수행하기 쉽습니다. 먼저 경로와 쿼리가 포함된 uri를 생성해야 합니다.

var uri = Uri.https(endpoint, api);

그런 다음 http 패키지를 사용하여 본문 및 상태 코드와 같은 데이터로 작업 결과를 나타내는 Future<Response>를 얻으십시오.

http.Response response = await http.get(uri);
print(response.statusCode);            //Response status code (200)
print(response.body);                  //Response body ("")

끝. 대단하지 않나요??!

게시, 삭제 및 PUT

이 세 가지 방법은 GET과 유사하게 작동하지만 일부 본문 매개변수를 추가할 예정입니다. 부드러운 개발자를 두려워하지 마십시오!

호출을 통해 jsonEncoded Map<String,String>가 있는 문자열 본문을 추가할 수 있습니다. 이 본문은 본문 매개변수가 됩니다. 그러면 post , delete 또는 put 메서드와 함께 http 패키지만 사용하면 됩니다.

http.Response response = await http.post(
            uri,
            body: jsonEncode(<String, String>{
               'param1': param1,
               'param2': param2
            })
);
//or http.delete or http.put

원하는 대로 객체를 jsonEncode할 수도 있습니다. 인코딩 유형을 추가하기만 하면 됩니다.

Map<String, String> parameters = Map<String, String>();
parameters['param1'] = 'param1';
parameters['param2'] = 'param2';
var encodedBody= json.encode(parameters);

http.Response response = await http.post(
            uri,
            body: encodedBody,
            encoding: Encoding.getByName("application/json")
);
//or http.delete or http.put

이제 enum 메소드에 대한 switch-case가 완성된 API 래퍼 메소드 생성을 시작하겠습니다.

Future<Response> callAPI(MyHttpMethod httpMethod, 
String endpoint, String apiName,{ Map<String, String> apiParameters}) async {
    var uri = Uri.https(endpoint, apiName, apiParameters);
    var encodedBody = json.encode(parameters);
    http.Response response;
    switch (httpMethod) {
      case MyHttpMethod.get:{
        response = await http.get(uri);
      }
      break;

      case MyHttpMethod.post:{
        response = await http.post(uri, body: encodedBody, encoding: Encoding.getByName("application/json"));
      }
      break;

      case MyHttpMethod.delete:{
        response = await http.delete(uri, body: encodedBody, encoding: Encoding.getByName("application/json"));
      }
      break;

      case MyHttpMethod.put:{
        response = await http.put(uri, body: encodedBody, encoding: Encoding.getByName("application/json"));
      }
      break;
    }

    return response;
  }

마지막으로 API 호출에 사용자 정의 헤더를 추가할 수 있는 가능성을 추가해 보겠습니다.

사용자 정의 헤더 추가

사용자 정의 헤더를 추가하는 것은 http 메소드에 추가할 또 다른 맵일 뿐입니다.

Map<String, String> myHeaders = Map<String, String>();
myHeaders ['header1'] = 'header1';

http.Response response = await http.post(uri, headers: myHeaders);

마무리

이제 callAPI 함수에 헤더를 추가하는 API 래퍼를 완료하겠습니다.

Future<Response> callAPI(MyHttpMethod httpMethod, 
String endpoint, String apiName,{ 
Map<String, String> apiParameters,
Map<String, String> customHeaders}) async {
    var uri = Uri.https(endpoint, apiName);
    var encodedBody = json.encode(parameters);
    http.Response response;
    switch (httpMethod) {
      case MyHttpMethod.get:{
        response = await http.get(uri, headers: customHeaders);
      }
      break;

      case MyHttpMethod.post:{
        response = await http.post(uri, headers: customHeaders, body: encodedBody, encoding: Encoding.getByName("application/json"));
      }
      break;

      case MyHttpMethod.delete:{
        response = await http.delete(uri, headers: customHeaders, body: encodedBody, encoding: Encoding.getByName("application/json"));
      }
      break;

      case MyHttpMethod.put:{
        response = await http.put(uri, headers: customHeaders, body: encodedBody, encoding: Encoding.getByName("application/json"));
      }
      break;
    }

    return response;
  }

여러분, 꽤 쉬웠죠? http에는 json 본문 인코딩 또는 다중 부분 요청과 같은 많은 다른 기능이 있지만 이 기사의 범위를 약간 벗어납니다. 뜨거운 물을 재발명하면 안 된다는 점을 기억하세요. Dart 팀은 이미 그렇게 했습니다.