[flutter] 9주 완성 프로젝트 캠프 학습일지 (유데미x스나이퍼팩토리): Future, http통신

http 통신

http 통신하려면 http 설치해야한다. http가 기본인데, dio를 쓰는 게 훨씬 쉽고 좋아보임.

• 일단 http를 쓰려면 import 'package:http/http.dart' as http; 이렇게 import문을 따로 써줘야한다. 자동으로 import 안됨.
• url 넘길때 uri로 파싱해서 전달해야한다. await http.get(Uri.parse(getUrl)); 이런식.

dio는 변수에 담아서 사용하면 됨.
그리고 옵션이 많다.

var dio = Dio();
void getData() async {
  var res = await dio.get(url,
            options: Options(
            headers: {
              // user-agent 조작 ssap가능
              'user-agent': 'Chrome'
              // jwt token 사용
              'authorization': 'Bearer 12341234'
            }));
}

Future

http 요청을 보내면 Future이 온다. Promise 같은 거임.
async-await 혹은 .then을 쓴다.

null safety

응답으로 null이 오면 어플 꺼진다.

• ? 붙이면 null을 받을 수 있는 변수가 됨.
  이런식: String? message = "hello";
• !를 붙여서 확신을 줄 수도 있다.(그치만 이건 되도록 안쓰는 게 좋을 것 같다.)
  타입가드를 쓰는 게 더 안전해보임. if문이나 삼항연산자, 혹은 ??를 쓰자.
• ?? 는 false ?? return 'hola';. 리액트서 쓰던 &&같은 너낌

error handling

try-catch-finally 쓴다.
on 키워드를 통해서 에러 타입에 따른 메시지를 전송할 수도 있음.
on RangeError catch (e) {print(e)}

void getData() async {
  result = "";
  setState(() {});
  try {
    var res = await dio.get(
      'https://sniperfactory.com/sfac/http_randomly',
    );
    var item = res.data["item"];
    result = item["name"] ?? "데이터를 불러올 수 없습니다";
  } catch (e) {
    print('오 에러네');
    print(e);
    result = "에러가 발생했습니다";
  } finally {
    setState(() {});
  }
}

Future builder

future

Future 타입 데이터를 받는다.

builder

context와 snapshot을 받아 데이터를 핸들링함.
데이터 통신 상태(connectionState)도 관리하고 여러모로 기특하다.

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

void main() {
  runApp(const MyApp());
}

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  var dio = Dio();

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              FutureBuilder(
                  future: dio.get('https://sniperfactory.com/sfac/http_test'),
                  builder: (context, snapshot) {
                    //snapshot.hasData : 데이터가 들어옴
                    if (snapshot.connectionState == ConnectionState.done) {
                      return Text(snapshot.data?.data.toString() ?? "실패");
                    }
                    // LinearProgressIndicator();
                    return const CircularProgressIndicator();
                  })
            ],
          ),
        ),
      ),
    );
  }
}

$119 코드: 5292304

---

본 후기는 유데미-스나이퍼팩토리 9주 완성 프로젝트캠프 학습 일지 후기로 작성 되었습니다.