Javascript async , await 간단정리

1. Async, Await 정의 및 사용법

-. ES7에서 async, await 구문을 추가하여 비동기식 콜백함수 및 Promise를 좀 더 쉽게 작성을 할 수 있게 되었습니다.
-. async 함수는 암시적으로 Promise를 반환을 하고 그리고 async 와 같이 await가 쓰이는데 await키워드를 쓰게 되면 해당값이 반환 되기전까지 기다리는 동안 async 내부 함수는 일시 중단이 될 수 있습니다.

ex1) 기존방법과 비교

(기존)
  const promise1 = new Promise((resolve, reject) => {resolve('promise1')})
  const promise2 = Promise.resolve('promise2') // 오직 resolve만 반환할 경우 이렇게 축약이 가능

(async함수 사용)
  async function test() {
    return 'async'
  }

promise1 , promise2 , test()//출력 Promise {<resolved>: "결과값"}

promise1 , promise2, test() 반환값이 Promise라는것을 알 수 있듯이 사용자는 셋 중 편한것을 사용하면 됩니다.

간단한 예제로 async, await의 동작원리를 살펴보겠습니다.

const value = Promise.resolve('test변수');

async function myFunc() {
  console.log('async 함수 내부 첫번째 줄');
  const res = await value;
  console.log(res);
}

console.log('함수 실행 전');
myFunc();
console.log('함수 실행 후');

----------------------------------------
출력)
함수 실행 전
async 함수 내부 첫번째 줄
함수 실행 후
test변수

여기서 주의사항
1. 함수내부에서 await을 사용할경우 반드시 function 앞에 async라고 적어줘야한다.
ex) async function great() {} 또는 화살표함수로 const great = async() => {};
2. await으로 오는 반환값은 Promise객체여만 한다.
3. async 함수 안 await 예약어는 반환값 Promise가 올때까지 기다렸다가 반환되면 그 다음 로직을 실행한다.

추가적으로 Promise객체는 setTimeout이랑 마찬가지로 비동기방식이며 이벤트루프를 거친다.
밑의 블로그는 이벤트 루프 및 Promise의 설명이 잘 되어 있는곳이다.
(출처: 이벤트루프 설명블로그)

2. async , await 이용 http 통신방법

function userInfo() {
  const url = 'https://koreanjson.com/users/1';
  return fetch(url)
    .then((res) =>{
    return res.json();
  })
}

function userTodo() {
  const url = 'https://koreanjson.com/todos/1';
  return fetch(url)
    .then((res) => {
    return res.json(); 
  })
}

async function sumOfFetch() {
  const user = await userInfo();
  if(user.id === 1) {
   const todo = await userTodo();
   console.log(todo)
   return todo;
  }
}

-------------------------------------------------
에러처리방법

async function sumOfFetch() {
  try {
    const user = await userInfo();
    if(user.id === 1) {
    const todo = await userTodo();
    console.log(todo)
    return todo;
   }
  } catch(err) {
	console.error('err명:', err);
  }
 }

error처리를 할 경우에는 정상적으로 동작됐을때 실행되는 부분을 try구문으로 감싸고 err가 발생됐을때
실행 할 부분을 catch구문으로 감싼다.

저 내용을 .then()구문으로 바꾸는 연습도 해보야겠다.