Flutter의 3가지 중요한 Content-Type 헤더

Flutter의 3가지 중요한 Content-Type 헤더

안녕하세요 👋, Flutter Friend가 돌아왔습니다!

작업을 쉽게 만들어줄 3가지 컨텐츠 타입 헤더를 배워봅시다!

헤더의 3가지 콘텐츠 유형:

애플리케이션/json

application/x-www-form-urlencoded

멀티파트/양식 데이터

1. 애플리케이션/json

JSON 콘텐츠 유형 헤더. REST API 호출에 가장 일반적으로 사용되는 유형입니다.

JSON is a language-independent data format. Almost all the programming languages have built-in libraries that generate and parse JSON-format data.

JSON 콘텐츠 유형 API를 호출하려면 http, dio 및 get과 같은 패키지를 사용할 수 있습니다.

아래 예에서는 콘텐츠 유형 application/json의 API 호출에 사용할 수 있는 단계를 시연했습니다.

2. 애플리케이션/x-www-form-urlencoded

이 요청 본문은 URL로 인코딩됩니다.

x-www-form-urlencoded는 기본적으로 URL 쿼리 문자열로 구조화된 데이터를 보내는 데 사용됩니다. 소량의 데이터를 전송하려면 이러한 유형의 인코딩이 매우 효율적입니다.

For x-www-form-urlencoded, the format of the request body is in{ key, value } which is always in String, then the key, value pairs are encoded using ‘&’, with a “=” between the key and value, then pass that encoded body inside the post request.

이 유형의 MIME이 이진 데이터에 적합하지 않은 이유는 키 값에 영숫자가 아닌 문자가 있고 퍼센트 인코딩되기 때문입니다.

3. 멀티파트/폼 데이터

HTTP 서버를 통해 HTTP 요청으로 파일과 데이터를 보내는 것을 다중 요청이라고 합니다.

It is commonly used in browsers to upload files to the server. The FormData object lets you compile a set of key/value pairs to send using the FormData type available in Flutter. It is primarily intended for use in sending form data but can be used independently from forms in order to transmit keyed data.

아래 메서드는 이미지를 선택하여 API 호출에서 요청 본문으로 전송되는 FormData 개체에 추가합니다.

onTapImgProfilePhoto() async {
  List<String?> fileList = [];
  await UploadHelper().showModelSheetForImage(
      fileSize: 10 * 1000, allowedExtension: ["jpeg", "png", "tiff", "heic"], getImages: (list) async {
    fileList = list;
  });

  final formData = FormData({});
  if (fileList.isNotEmpty) {
    for (var item in fileList) {
      formData.files.addAll([
        MapEntry(
          'product_image',
          MultipartFile(
            await File(item!).readAsBytes(),
            filename: item.split('/').last,
          ),
        ),
      ]);
    }
  }

  return Get.find<ApiClient>().createUpload(
   formData: formData);
}

위는 HTTP 요청이 FormData 유형인 multipart/formData에 대한 API 호출 방법입니다.

글을 끝까지 읽어주셔서 감사합니다!

또한 절반의 시간 안에 Flutter 앱을 구축하는 데 관심이 있으신가요?

그렇다면 제가 개발하고 있는 플랫폼인 DhiWise을 사용해 보세요!

나에 대해서:

저는 Node.js, Kotlin, Flutter, iOS 및 React 코드의 엔터프라이즈급 앱을 신속하게 구축할 수 있는 세계에서 가장 지능적인 플랫폼인 DhiWise의 Flutter 개발자입니다. 디자인을 통합하고 추가 작업을 설정하기만 하면 Production-Ready 앱을 사용할 수 있습니다. DhiWise에서 응용 프로그램을 구축하려면 지금 바로 무료로 사용해 보십시오.

이 기사를 읽어 주셔서 감사합니다 ❤

의견에서 이 주제에 대한 귀하의 견해와 제안을 언급하십시오. 나는 그것을 듣고 싶습니다. 다음편에서 뵙겠습니다.