async & await_JavaScrip

• 자바스크립트의 비동기 처리 패턴 중 가장 최근에 나온 문법이다 (ES7)
• 이 문법을 쓰는 이유는 프로미스도 콜백지옥처럼 체이닝을 계속 하다보면 코드의 가독성이 떨어지기 때문이다
• 이 문법은 프로미스를 좀 더 간결하고 동기적으로 실행되는것 처럼 보이게 만들어준다

async

function 앞에 위치하고 async를 붙인 해당 함수는 promise를 반환한다 (위치 기억)

//1. 함수 선언식
async fuction a() {
  return 'hi';
}
//2. 함수 표현식
const a = async function() {
  return 'hi';
}
//3. 화살표함수
const a = async () => {
  return 'hi';
};
//4. a().then(data => console.log(data)); 함수로 바로 호출
const user = a(); // 변수에 할당해서 호출
user.then(data => console.log(data));
console.log(user); //'hi'

await

• await 키워드는 async 키워드가 붙어있는 함수 내부에서만 사용할 수 있다
• await을 만난 프로미스는 비동기 처리가 될 때까지 기다리다 반환해준다
  (무조건 비동기처리한 프로미스 앞에 붙여야 한다)

//async & await 사용
function a(){
  return new Promise((resolve, reject) => {
    let data = [3,6,9];
    resolve(data)
  });
}

async function result() {
  let numData = await a();
  console.log(numData);
}

result() //[3,6,9]

에러 핸들링 / try catch문

async function a() {
  try{
    let dataUrl = await fetch('http://...');
  } catch (err) {
    alert(err);
  }
}

a();