본문 바로가기

Web/JavaScript

[ES6] promise, async 와 await

728x90

 

상태를 나타내는 state는 pending(대기),rejected(거부됨),fulfilled(이행됨) 세가지

Promise를 선언할때 받는 파라미터는 resolve과 reject를 받는데

resolve : 성공했을때, reject는 실패했을때 사용

const pr = new Promise((resolve, reject ) => {
    setTimeout(()=>{
        resolve('OK');//성
    },3000)
});

//응답후 처리
pr.then(
    function(result){}
).catch(
    function(err){}
).finally{
    function(){
        console.log('주문 ');
    }
}

Promise.all : 프로미스들을 한번에 실행하고싶을때 사용 Promise.race : 프로미스들을 한번에 실행하나라도 먼저 완료되면 끝냄

//프로미스를 쓴 함수 f1,f2,f3을 배열에넣고 한번에 사용가능
Promise.all([f1(), f2(), f3()]).then((res) =>{
    console.log(res);
}

 

 

 

 

async -> 특정 함수에 붙이면 promise 를 반환시켜줌

 

await -> async 내부에서 사용

 

async function order(){
    try{
        const result1 = await f1();
        const result2 = await f2();
        const result3 = await f3();

    }catch(e){
        console.log(e);
    }
}



promise 를 간결하게 쓴다는 느낌 때문에 많이 사용한다고 한다

 

 

function startAsync(age) {
  return new Promise((resolve, reject) => {
    if (age > 20) resolve();
    else reject();
  });
}

const promise1 = startAsync(25);
promise1
  .then(() => {
    console.log("1 then!");
  })
  .catch(() => {
    console.log("1 catch!");
  });

const promise2 = startAsync(15);
promise2
  .then(() => {
    console.log("2 then!");
  })
  .catch(() => {
    console.log("2 catch!");
  });

 

function startAsync(age) {
  return new Promise((resolve, reject) => {
    if (age > 20) {
      // 뭔가를 합니다.
      return resolve(`${age} success`);
    }
    // 또 뭔가를 합니다.
    return reject(new Error(`${age} is not over 20`));
    // 여기 있는 코드는 절대 실행되지 않습니다.
  });
}

출처 https://springfall.cc/article/2022-11/easy-promise-async-await

 

 

 

 

// 기존
// function startAsync(age) {
//   return new Promise((resolve, reject) => {
//     if (age > 20) resolve(`${age} success`);
//     else reject(new Error(`${age} is not over 20`));
//   });
// }

async function startAsync(age) {
  if (age > 20) return `${age} success`;
  else throw new Error(`${age} is not over 20`);
}

const promise1 = startAsync(25);
promise1
  .then((value) => {
    console.log(value);
  })
  .catch((error) => {
    console.error(error);
  });

const promise2 = startAsync(15);
promise2
  .then((value) => {
    console.log(value);
  })
  .catch((error) => {
    console.error(error);
  });
728x90