http request

install

• 우선 http 요청을 하기위해서는 dart에서 http를 사용할 수 있도록 도와주는 library를 설치해야한다.

flutter pub add http

import

• 또한 import '' 안의 내용을 bundling하여 as 키워드로 객체화 하여 사용하면 편하다.
  물론 as 키워드의 오른편에 있는 키워드는 마음대로 지어도 된다.

사용

• 위에서 선언한 http 키워드(객체)를 이용하여 굉장히 다양한 메서드에 접근이 가능하다.

Rest API 메서드

post

• post는 반드시 필요한 url, headers, body를 작성해줘야한다. 이때 body 값 안에 들어갈 데이터는 JSON 형태의 데이터로 들어가야한다.

• 하지만 걱정하지 않아도 되는데 바로 json utility Obj를 사용하면 비교적 간편하게 Stringfy가 가능하다.
  그리고 이때 encode를 할 때 변수로는 Map 타입이 오는 것이 가장 좋다. 그래야 encode 함수가 에러 없이 작동하기 때문이다.

Uri

• 이제 위 사진에 봤듯 다양한 Rest API 메서드에 대하여 uri 형식의 url을 던져줘야하는데 그냥 사용하는 것이 아닌,
  Uri 객체를 이용하여 사용한다.

• 그리고 해당 객체에서 https 메서드가 있는데 바로 이 메서드가 https 생성자 함수가 백앤드를 pointing하는 url을 생성하는 메서드이다.

• 그리고 2번째 매개변수를 지정하는데 바로 path 즉, 경로를 지정한다.

async await

• 서버를 다녀오는 작업은 항상 promise로 처리하는 것이 좋다. 그래야만 최신화된 데이터를 가지고 ui를 뿌려줄 수 있기 때문인데 그렇게 하려면 async await 키워드를 사용하면 굉장히 간편하게 작업이 가능하다.

• 그리고 flutter 에서는 이러한 promise와 같은 동기 처럼 작동하는 방식의 결과값의 타입을 future라고 명시하였다.
  그리고 post 메서드는 future 타입의 <Response> 타입의 결과값을 반환하는데 이럴 때 함께 사용하면 좋은 키워드가 async await이다.

http req 이후 화면 전환

• 이때 그냥 Navigator에 pop 메서드를 사용하면 에러가 나는데 이유는 pop 메서드안에 들어있는 context가 async 이전의 context와 같냐 이거다. => 즉, http req가 실행되면 비동기처럼 event loop에서 후순위로 밀리게 되는데 이때 Navigator의 함수가 먼저 실행이 된다면 해당 context와 이전에 context가 같은 context냐 이거다. 어쩌면 존재하지 않는 context일 수 있다는 뜻이다.

• 그래서 만약 해당 context가 mount 되지 않았다면 == 아직 http req가 되지 않았다면 == 아직 ui상에 보이지 않는다면 return을 하여 Navigator가 꼬이지 않도록 하는 것이다.

• 참고로 저기 파란 밑줄도 위 사진과 같은 오류가 뜨지만 공식적으로 권장하는 해결책 이므로 괜찮다.