[ES6+] Async Await

async / await

드디어..!! 드디어 배우는구나 두둥

흐엉 엄청 배우고 싶었던 부분이다.. 앞으로 나올 클래스도 엄청나게 기대기대

async / await는 두 프로미스의 업데이트이다(코드 가독성을 위해 쓰면 좋음)

then 이나 catch같은것들은 구식이라고 한다 🙀 시상에나

결국은 then을 이용하게 되면 수많은 then을 사용할 수 밖에 없고, 이것은 가독성을 떨어트린다는 것이다(맞는말…)

그러므로 async와 await은 기본적으로 프로미스를 사용하는 코드를 더 좋게 보이게 하는 문법이라고 생각하면 된다

기본적으로 async와 await는 promise밖에서 값을 가져올 수 있는 방법이다

첫번째로, await는 홀로 쓰일 수 없다!!

항상 async function안에서만 사용할 수 있음

fetch("https://yts.am/api/v2/list_movies.json")
.then(response => {
  console.log(response);
  return response.json();
})
.then(json => console.log(json))
.catch(e => console.log(e))

const getMovies = async() => {
  
}

//화살표함수를 쓰고 싶지 않으면 아래처럼 적기..(위 함수와 동일하게 작동)
async function getMovies(){
  
}

기억해야할 것 : ` async를 맨 앞에 적어주어야함`

자자…비교해봅시다

const getMoviesPromise = () => {
  fetch("https://yts.am/api/v2/list_movies.json")
  .then(response => {
    console.log(response);
    return response.json();
  })
  .then(json => console.log(json))
  .catch(e => console.log(e))
}

//1번 경우(아직 await 안쓴 경우)
//콘솔에 pending으로 뜬다
const getMoviesAsync = async () => {
  const response = fetch("https://yts.am/api/v2/list_movies.json");
  console.log(response);
  //Promise{<pending>}
}

//2번 경우(await를 써보자)
//await는 기본적으로 promise가 끝나길 기다린다
const getMoviesAsync = async () => {
  const response = await fetch("https://yts.am/api/v2/list_movies.json");
  console.log(response);
  //Response {type:.......}
  
  const json = await response.json();
  console.log(json);
  //{status: "OK".......}
}
getMoviesAsync();

1번경우 - await사용 안했을때

const reponse = fetch("https://yts.am/api/v2/list_movies.json"); 이렇게 쓰는건 promise를 넣을 변수를 새로 선언한 것이다

2번 경우 - await사용했을때

await fetch 로 받아온 response 는 가장 위의 then안에 있는

response => { console.log(response); return response.json(); }

이 코드와 동일하다. 이 말인즉 await는

response => { console.log(response); return response.json(); }

이 명령을 실행해주고 있는거다

다시 말해서, await는 promise가 끝나기를 기다려주는것이다

성공을 기다리는게 아니라 resolve되든 reject되든 끝나길 기다려주는것!!!

노마드코더의 ‘ES6의 정석’을 듣고 정리 =)

async / await

Share this post