210930 TIL

TIL DAY 62

오늘 배운 일

✔️ 코드잇에서 JavaScript 중급

• Axios

  • Ajax 통신을 할 수 있다.

  • 외부 패키지를 사용한다.

    간단한 예 )

    axios 객체를 사용해서 GET 리퀘스트를 보내고 그 리스폰스를 받는 코드이다.
    

    중요한 사실!

  • axios 객체에서 리퀘스트를 보내는 많은 메소드들이 fetch 함수처럼 Promise 객체를 리턴한다.

  fetch함수와 비교했을 때 장점들 :

  • 모든 리퀘스트, 리스폰스에 대한 공통 설정 및 공통된 전처리 함수 삽입이 가능하다.
  • serialization, deserialization을 자동으로 수행한다.
  • 특정 리퀘스트에 대해 얼마나 오랫동안 리스폰스가 오지 않으면 리퀘스트를 취소할지 설정 가능(request timeout)
  • 업로드 시 진행 상태 정보를 얻을 수 있음
  • 리퀘스트 취소 기능 지원

  단점 :

  • fetch 함수처럼 웹 브라우저에서 지원되는 함수가 아니기때문에, 별도로 패키지를 다운받아야한다.

• async / await

  • promise 객체를 더 쉽게 다룰수 있는 문법

    예 )

    

    결과값 :

    

    async = asynchronous 줄임말

  • 비동기를 의미

  • 함수안에 비동기적으로 실행될 부분을 의미한다.

    await

  • 뒤에 코드를 실행하고 그 코드가 리턴하는 promise 객체를 기다려준다.

  • 해당 객체가 fulfilled 상태이거나 rejected 상태가 될 때까지 기다린다.

  • async안에서만 쓸 수 있다.

    예 )

    기존에 있던 async를 지워봤다.
    

    결과값 :

    • 에러가 발생한다.

    

    이번에는 콘솔로그를 코드안에 집어넣어봤다.

    

    결과값 :

    • 콘솔로그는 숫자 크기순서대로 나열한다.
    • 그 이유는 숫자 1이 실행되면서, 함수를 호출하고, 그 안에 있는 코드가 작동한다. 2가 실행되고 리스폰스를 받는동안 밖에 있는 숫자들이 자연스럽게 호출된다. 그리고 마지막으로 숫자가 7이 동작하고, promise 객체를 리턴한다.

    

오늘 느낀점 :

• 오늘은 axios와 async / await에 대해 배우는 시간을 가졌습니다.
• 비동기식으로 진행이되면서 굳이 fetch함수를 쓰지 않아도 axios를 써도 되고, async, await를 적절히 쓰면 코드가 원하는 방향으로 될 것 같다.