async await

함수앞에 async 지시자를 사용하면 함수는 비동기함수가되어 promise객체를 반환한다.

async function f() {
  return 1;
}

return값이 promie가 아니라도 async함수는 promise객체로 반환한다.

function f() {
  return new Promise((resolve,reject)=>{
     ...
  });
}

async를 사용하면 이렇게 직접 promise객체를 만들어 반환하지 않아도 되어 편리해진다.

async function f() {
  return 1;
}
f().then(console.log);

async function f() {
  return setTimeout(() => {return 1;}, 1000);
}
f().then(console.log)

async지시자가 promise를 반환하는데 promise는 비동기관리객체임을 유의하자 위와같이 하면 timeout ID값을 promise객체로 변환해 반환할뿐이고 promise객체는 비동기작업을 관리하지 않는다.

async만으로는 함수의 결과값을 반환할뿐 비동기함수의 작업결과를 반환할 방법이 없다.

async function f() {
  let promise = new Promise((resolve, reject) => {
    setTimeout(() => resolve("완료!"), 1000)
  });
  return promise;
}
f()
.then(console.log);

promise객체를 만들어 반환하면 async를 사용할 필요가 없다.

async function f() {
  let promise = new Promise((resolve, reject) => {
    setTimeout(() => resolve("완료!"), 1000)
  });
  let result = await promise;
  console.log(result);
}
f();

async함수내에서 비동기함수를 관리하는 promise객체를 만들고 await지시자와 사용하면 동기식코드처럼 비동기작업결과를 기다리고 결과값을 반환해준다.

await/async함수를 호출하면 동기함수처럼 비동기작업후 결과를 반환하는 것이다.

async function showAvatar() {

  let promise = await fetch('user.json');
  let user = await promise.json();  

  let githubResponse = await fetch(`https://api.github.com/users/${user.login}`);
  let avatar = await githubResponse.json();
  
  let img = document.createElement('img');
  img.src = avatar.avatar_url;
  document.body.append(img);

  await new Promise((resolve)=>{
    setTimeout(resolve, 3000);
  });

  img.remove(); 
}
showAvatar();

동기식코드처럼 사용이 가능하여 코드가독성이 향상된다.

에러핸들링

async function fn(){

  try {
    let response = await fetch('https://api.github.com/users/a3434564563453');
    if(!response.ok){
      throw new Error("343");      
    }
    let user = await response.json();
  } catch (error) {
    console.log(error.message);
  }

}
fn();

async function f() {
  let response = await fetch('http://유효하지-않은-주소');
}
f().catch((er)=>{
  console.log(er);
});