javascript- async,await

promise를 반환하고 then,catch를 이용한 코드
코드 📄

function getApple(){
    return new Promise((resolve)=>{
        setTimeout(()=>{
            resolve('🍎');
        },3000)
    })
}
function getBanana(){
    return new Promise( (resolve)=>{
        setTimeout(()=>{
         resolve( `🍌`) ;
        },2000)
    }
    )

}
function getStrawberry(){
    return Promise.reject(new Error('딸기는 없습니다.'));

}
getApple()
.then(apple=>getBanana()
.then(banana=>getStrawberry()
.catch(error=>console.log(error)))); // Error: 딸기는 없습니다.

async, await 키워드를 사용하면 코드가 더욱 간결해진다.

async

비동기적 코드를 나타내는 키워드로 코드 내부를 동기적으로 사용할 수 있게 한다.

코드 📄

async function func(){
  return 1;
}

func()
.then(result=>console.log(`결과 출력:${result}`)); // 결과 출력:1

• async는 함수 앞에 위치해야 한다.
• async가 붙은 함수는 반드시 promise를 반환하고, promise가 아닌 것은 resolved된 promise로 감싸 반환한다.

await

await는 async 함수 안에서만 동작하는 문법이다.

코드 📄

async function func() {

  let promise = new Promise(resolve=>{
    setTimeout(()=>resolve('complete!'),2000);
  })

  let result = await promise;
  console.log('대기중...');
  console.log(result);
}

func(); 
// 2초가 지난 후 result값에 promise 결과값 반환되고 함수 계속 실행

• await 키워드를 만나면 promise가 처리될 때까지 함수 실행을 기다리고 promise가 처리되면 결과를 반환하고 실행을 계속한다.
• promise가 처리되는 동안 js엔진이 이벤트처리나 다른 스크립트 실행등을 할 수 있다.
• await은 promise.then보다 세련되고 가독성이 좋고 쓰기 쉽다는 장점이 있다.

최상위 코드에서의 await

await은 최상위 레벨의 코드에서는 사용할 수 없다.

즉 async가 붙은 함수 안에서만 사용가능하다.
그러나 익명 async 함수로 코드를 감싸면 최상위 레벨 코드에서도 await을 사용할 수 있다.

코드 📄

(async() =>{
  let response =await fetch('/article/promise-chaining/user.json');
  let user = await response.json();
  //  ...
})();

async 클래스 메소드

클레스 메소드 앞에 async를 붙이면 async클래스 메소드 선언가능하다.

코드 📄

class Wait{
  async Wait(){
    return await new Promise(resolve => resolve(1)); // await Promise.resolve(1);
  }
}

new Wait()
.Wait()
.then(result=>console.log(result)); // 1

에러 핸들링

프로미스가 성공하면(resolve) 결과값을 전달하지만
프로미스가 거부되면(reject) 에러를 throw하는 것처럼 에러를 던진다.

코드 📄

async function func(){
  await Promise.reject(new Error('에러 발생~'));
  // throw new Error('에러 발생~'); 과 동일한 코드
}

따라서 try-catch문을 이용해 error를 catch해서 잡을 수 있다.

코드 📄

async function func(){
  try{
  let response=await  Promise.reject(new Error('에러발생~'));
  }catch(error){
    console.log(error);// Error: 에러발생~
  }
}
func();

try-catch문을 사용하지않고 함수 호출한 후 .catch를 추가해 에러를 처리할 수 있다.

코드 📄

async function func(){
   await Promise.reject(new Error('에러 발생~')); // promise 거부상태
}

func().catch(error=>console.log(error)); // Error: 에러 발생~

여러개의 promise 모두 처리

Promise.all로 여러 promise들을 감싸고 await을 붙여 모든 promise가 처리되길 기다린다.

코드 📄

async function func(){
  try{
    let response =Promise.all([fetch(url1),fetch(url2),fetch(url3)]);
  }catch(error){
    console.log(error);
  }
}

func();

코드 📄

async function getFruit(){
  
    let strawberry;
    try{
       
        strawberry = await getStrawberry();
    }catch{
        strawberry ='🍓';
    }
    const apple = await getApple();
    const banana =await getBanana();
    return [apple,banana,strawberry];  // return된 promise들을 배열화
}

getFruit()
.then(result => console.log(result));
// [ '🍎', '🍌', '🍓' ]

여러 promise중 먼저 return되는 값 처리

Promise.race() 인자안의 배열에 promise를 return하는 함수들을 넣고 가장 먼저 처리되는 함수를 처리한다.

코드 📄

function pickOnlyOne(){
    return Promise.race([getApple(),getBanana()]);
}

pickOnlyOne().then(console.log);

• getApple()은 1초있다 promise를 return하고 getBanana()는 2초있다 promise를 return한다고 하면 getApple()의 return값만 처리된다.

async/await와 promise.then/catch

• async/await을 사용하면 await가 대기를 처리해주기 때문에 .then이 거의 필요하지 않다.
• .catch 대신 일반 try..catch를 사용할 수 있다는 장점도 있다.
• 문법 제약 때문에 async함수 바깥의 최상위 레벨 코드에선 await를 사용할 수 없다. 그럴 경우 .then/catch를 추가해 처리되지 못한 에러를 다룰 수 있다.