스파르타코딩 TIL - 비동기통신 axios

developer.do·2023년 1월 16일
0

호이스팅 개념은?

console.log(a)
var a = 1;
-> undefined가 나옴
위 내용은 오류가 안남 WHY?
(let은 오류가 난다. 
  이게 바로 호이스팅이다.

호이스팅은 코드를 실행하기전에 변수선언을 스코프의 최상단으로 끌어올리는 것이다(X)
호이스팅은 코드를 실행하기전에 변수선언을 스코퍼의 최상단으로 끌러올리는 것처럼 보이는 현상을 말한다(O)

자바스크립트 엔진은 코드 실행 전, 해당 코드를 형상화 하고 구분하는 과정을 거친다.
여기서 이미 변수 및 함수선언이 저장되어 있기 때문에 변수선언(var a = 1) 보다
호출( console.log(a) )가 먼저 나와도 오류 없이 작동을 한다.

코드의 제어권이 넘어간다.

네이버에 get을 하면, 코드의 제어권은 네이버에 있다.
네이버가 정보를 줄 때 까지 나는 기다려야 한다.
바로 이게 비동기 통신이다.

먼저 SetTimeOut을 사용해보자

  setTimeout(() => {
    
    console.log("hello");
  }, 30000);    - - - - 1번

  console.log("bye"); - - - - 2-> 실행순서는 2-> 1번 순이다.

비동기적인 로직을 동기적인 로직처럼 쓰는 기술이 필요하다.

then,catch,finally,async,await

이제 우리는 1번 -> 2번 순으로 구현을 해보려고 한다.
바로 axios를 통해서,

먼저 fetch를 사용해보자

  fetch("http://localhost:3001/posts").then((res) => {
    console.log(res);
  });

하지만 fetch는 오류가 나게 되었을 때, 오류메세지를 안준다. 따라서 잘 사용을 안한다.

이제 Axios(then,catch)를 사용해보자

  axios
    .get("http://localhost:3001/posts")
    .then((res) => {
      console.log(res.data);
    })
    .catch((err) => {
      console.log(err);
      // alert을 주거나, 오류 페이지로 이동, 오류 관련 데이터를 반드시 적제
    });
  axios
    .get("http://localhost:3001/posts")
    .then((res) => {
      console.log(res.data);
    })
    .catch((err) => {
      console.log(err);
      // alert을 주거나, 오류 페이지로 이동, 오류 관련 데이터를 반드시 적제
    });
    console.log(1);

여기서는 무조건 console.log(1)이 먼저 수행이 된다. 그다음 get 요청을 받아옴

이제 Axios(await,async)를 사용해보자

  const fetchData = async () => {
    const response = await axios.get("http://localhost:3001/posts");
    console.log("response", response);
    return response;
  };

  fetchData();

async로 묶어놓은 함수 스코프 안에서 await를 사용 할 수 있다.

0개의 댓글