async await 간단한 정리_TIL(47)

서버에서 데이터를 가져오는 과정을 프로젝트에서 쓰다보면 제대로 알지도 못하면서 쓰고 있는 async await을 간단하게 정리하려고한다.

요즘 들어서 내가 모르고 썼었던 기능들이 자주 나오는 것을 보고 그냥 지나쳐서는 안되겠다해서 모던자바스크립트를 보면서 정리했다.

확실히 알고나서 코드를 보는 거는 다른 것 같다.

---

1.Async

: async는 항상 function 앞에 붙는다.

그렇게 되면 해당 함수는 항상 프라미스를 반환한다. 프라미스가 아닌 것은 프라미스로 감싸서 반환한다.

** const a = async()=>{} 이렇게 사용도 한다.

 

2.await

:await는 async함수 안에서만 동작한다.

 프라미스(async)에서 처리될 때까지 기다린다.

 

async function f() {

  let promise = new Promise((resolve, reject) => {
    setTimeout(() => resolve("완료!"), 1000)
  });

  let result = await promise; // 프라미스가 이행될 때까지 기다림 (*)

  alert(result); // "완료!"
}

f();

변수 result에 promised의 result값이 할당된다. 그래서 1초 뒤에 ‘완료!’라는 문구가 뜬다.

프라미스가 처리되길 기다리는 동안 엔진이 다른일을 할 수 있기 때문에 좀 더 효율적이라고 생각할 수 있다.

 

👍즉. promise.then( )보다 좀 더 편하게 result 값을 얻을 수 있도록 해준다.

---

<정리하자면>

1.async+await을 사용하면 어짜피 await가 값이 올 때까지 기다리니까 .then이 필요하지 않다.

2.await는 async함수 바깥 최상위 코드에서는 사용할 수 없다.

---

프로젝트를 하면서 서버에서 데이터를 가져오는 코드를 짜면서 만났던 오류였었는데 ( 캡쳐해놓는다는게..ㅎ)그때 이리저리 찾아보니까

나와 비슷한 문제를 적어논 글을 봤고 댓글에 'await와 then을 같이써서 그렇다'라는 말을 봤는데 이게 이제서야 조금 이해가 간다.

이미 값을 받고 나서 실행이 되기 때문에 그 다음에 어떻게 할껀지를 굳이 안적어줘도 됬었던 상황이였다.

이게 좀 더 알아보니까 같이 쓸 수도 있다고 한다. 아직 그런 경우를 안 만나봤지만 만난다면 경험치가 쌓일지도?

오늘의 TIL 끝😎