Flutter Http Async - 온더테크

Contents

Flutter 비동기 HTTP 요청

Flutter에서 비동기 HTTP 요청을 처리하는 것은 매우 중요하며, async와 await 키워드를 사용하여 쉽게 구현할 수 있습니다. http 패키지를 사용하면 간단하게 비동기 HTTP 요청을 보낼 수 있습니다. 이 예제에서는 GET 요청을 통해 데이터를 가져오는 방법을 설명합니다.

1. `http` 패키지 설치

먼저, pubspec.yaml 파일에 http 패키지를 추가합니다.

dependencies:
  flutter:
    sdk: flutter
  http: ^0.14.0

2. 비동기 HTTP 요청 구현

GET 요청 예제

아래 예제에서는 jsonplaceholder.typicode.com의 API를 사용하여 비동기 GET 요청을 보내고 데이터를 화면에 표시합니다.

import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'dart:convert';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  String data = "Fetching data...";

  @override
  void initState() {
    super.initState();
    fetchData();
  }

  Future<void> fetchData() async {
    try {
      final response = await http.get(Uri.parse('https://jsonplaceholder.typicode.com/posts/1'));

      if (response.statusCode == 200) {
        setState(() {
          data = json.decode(response.body)['title'];
        });
      } else {
        setState(() {
          data = "Failed to load data: ${response.statusCode}";
        });
      }
    } catch (e) {
      setState(() {
        data = "Error: $e";
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Async HTTP GET Example')),
      body: Center(child: Text(data)),
    );
  }
}

3. POST 요청 예제

POST 요청을 통해 데이터를 서버로 전송하고 응답을 받는 방법을 살펴보겠습니다.

import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'dart:convert';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  String data = "Waiting for response...";

  Future<void> sendData() async {
    try {
      final response = await http.post(
        Uri.parse('https://jsonplaceholder.typicode.com/posts'),
        headers: <String, String>{
          'Content-Type': 'application/json; charset=UTF-8',
        },
        body: jsonEncode(<String, String>{
          'title': 'foo',
          'body': 'bar',
          'userId': '1',
        }),
      );

      if (response.statusCode == 201) {
        setState(() {
          data = "Success: ${response.body}";
        });
      } else {
        setState(() {
          data = "Failed to post data: ${response.statusCode}";
        });
      }
    } catch (e) {
      setState(() {
        data = "Error: $e";
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Async HTTP POST Example')),
      body: Center(child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Text(data),
          ElevatedButton(
            onPressed: sendData,
            child: Text('Send Data'),
          ),
        ],
      )),
    );
  }
}

4. 에러 처리

HTTP 요청 시 발생할 수 있는 다양한 에러를 처리하는 방법을 알아보겠습니다.

Future<void> fetchData() async {
  try {
    final response = await http.get(Uri.parse('https://jsonplaceholder.typicode.com/posts/1'));

    if (response.statusCode == 200) {
      setState(() {
        data = json.decode(response.body)['title'];
      });
    } else {
      setState(() {
        data = "Failed to load data: ${response.statusCode}";
      });
    }
  } catch (e) {
    setState(() {
      data = "Error: $e";
    });
  }
}

5. JSON 데이터 파싱

HTTP 요청의 응답으로 받은 JSON 데이터를 파싱하는 방법을 설명합니다.

import 'dart:convert';

void parseJson(String responseBody) {
  final parsed = json.decode(responseBody);
  // parsed 데이터를 사용하여 필요한 작업 수행
}

6. 전체 예제

GET 요청을 통해 데이터를 받아와 화면에 표시하는 전체 예제를 다시 한번 정리합니다.

import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'dart:convert';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  String data = "Fetching data...";

  @override
  void initState() {
    super.initState();
    fetchData();
  }

  Future<void> fetchData() async {
    try {
      final response = await http.get(Uri.parse('https://jsonplaceholder.typicode.com/posts/1'));

      if (response.statusCode == 200) {
        setState(() {
          data = json.decode(response.body)['title'];
        });
      } else {
        setState(() {
          data = "Failed to load data: ${response.statusCode}";
        });
      }
    } catch (e) {
      setState(() {
        data = "Error: $e";
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Async HTTP GET Example')),
      body: Center(child: Text(data)),
    );
  }
}

이와 같은 방법으로 Flutter에서 비동기 HTTP 요청을 처리할 수 있습니다. 비동기 요청을 통해 네트워크 통신을 원활하게 처리하고, 데이터를 화면에 표시할 수 있습니다. http 패키지를 사용하여 GET, POST 등의 다양한 요청을 보내고, 응답 데이터를 파싱하여 애플리케이션에 활용할 수 있습니다.

Post Views: 205

1. http 패키지 설치