Promise를 실전 api 처럼 만들어서 적용

장세진·2023년 6월 16일

JavaScript

목록 보기

7/12

예제

1초가 걸리는 a Promise, 3초가 걸리는 b Promise, 2초가 걸리는 c Promise를 만들고 3개의 Promise를 동시에 실행하기 (비동기적 실행)

// 함수 api는 fetch.get(url)과 매우 유사
function api(promiseName, sec) {
  return new Promise((resolve,reject) => {
    setTimeout(() => {
      if (typeof promiseName === "string" && typeof sec === 'number') {
        resolve(`${promiseName} Promise 작업이 ${sec}초 걸렸습니다.`)
      } else {
        reject(`${promiseName} Promise 작업 실패`)
      }
    }, sec*1000);
  })
}

const aPromise = api('a',1) // pending
const bPromise = api('b',3) // pending
const cPromise = api('c',2) // pending

aPromise.then((res) => {
  console.log(res);
}).catch((err) => {
  console.log(err);
})

bPromise.then((res) => {
  console.log(res);
}).catch((err) => {
  console.log(err);
})

cPromise.then((res) => {
  console.log(res);
}).catch((err) => {
  console.log(err);
})

/* 결과
a Promise 작업이 1초 걸렸습니다. // fulfilled
c Promise 작업이 2초 걸렸습니다. // fulfilled
b Promise 작업이 3초 걸렸습니다. // fulfilled
*/

async await를 이용하여 위와 똑같은 작업 구현 (비동기적 실행)

// 함수 api는 fetch.get(url)과 매우 유사
function api(promiseName, sec) {
  return new Promise((resolve,reject) => {
    setTimeout(() => {
      if (typeof promiseName === "string" && typeof sec === 'number') {
        resolve(`${promiseName} Promise 작업이 ${sec}초 걸렸습니다.`)
      } else {
        reject(`${promiseName} Promise 작업 실패`)
      }
    }, sec*1000);
  })
}

const aPromise = async function () {
    try {
      const response = await api("a",1)
      console.log(response)
    } catch (err) {
      console.log(err);
    }
  }
  
  const bPromise = async function () {
    try {
      const response = await api("b",3)
      console.log(response)
    } catch (err) {
      console.log(err);
    }
  }
  
  const cPromise = async function () {
    try {
      const response = await api("c",2)
      console.log(response)
    } catch (err) {
      console.log(err);
    }
  }

  aPromise();
  bPromise();
  cPromise();

/* 결과
a Promise 작업이 1초 걸렸습니다.
c Promise 작업이 2초 걸렸습니다.
b Promise 작업이 3초 걸렸습니다.
*/

sum1 Promise의 결과값을 sum5 Promise에, sum5 Promise 결과값을 multiply3 Promise에 전달하여 실행하는 경우 (동기적 실행)

function api(promiseName, sec, num) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (promiseName === "sum1") {
        const response = num + 1;
        console.log(`${promiseName}작업이 ${sec}초 걸렸습니다.`);
        resolve(response);
      } else if (promiseName === "sum5") {
        const response = num + 5;
        console.log(`${promiseName}작업이 ${sec}초 걸렸습니다.`);
        resolve(response);
      } else if (promiseName === "multiply3") {
        const response = num * 3;
        console.log(`${promiseName}작업이 ${sec}초 걸렸습니다.`);
        resolve(response);
      } else {
        reject("작업 실패");
      }
    }, sec * 1000);
  });
}

(async function () {
  try {
    const firstNum = 3;
    console.log(`첫 입력 숫자 : ${firstNum}`);
    const responseA = await api("sum1", 1, firstNum);
    console.log(`현재 값 : ${responseA}`);
    const responseB = await api("sum5", 3, responseA);
    console.log(`현재 값 : ${responseB}`);
    const responseC = await api("multiply3", 2, responseB);
    console.log(`현재 값 : ${responseC}`);
  } catch (err) {
    console.log(err);
  }
})();

/* 결과
첫 입력 숫자 : 3
sum1작업이 1초 걸렸습니다.
현재 값 : 4
sum5작업이 3초 걸렸습니다.
현재 값 : 9
multiply3작업이 2초 걸렸습니다.
현재 값 : 27
*/

Promise Methods

Promise.all

function api(promiseName, sec) {
    return new Promise((resolve,reject) => {
      setTimeout(() => {
        if (typeof promiseName === "string" && typeof sec === 'number') {
          resolve(`${promiseName} Promise 작업이 ${sec}초 걸렸습니다.`)
        } else {
          reject(`${promiseName} Promise 작업 실패`)
        }
      }, sec*1000);
    })
  }
  
// 1. 모두가 fulfilled일 경우
const aPromise = api('a',1) // pending
const bPromise = api('b',3) // pending
const cPromise = api('c',2) // pending

Promise.all([aPromise,bPromise,cPromise]).then((res) => {
    console.log(res);
}).catch((err) => {
    console.log(err);
})
/* 결과(pending상태의 배열 Promise들이 모두 fulfilled된 후 각각의 결과값을 배열로 보여줌)
3초후 >>> [
  'a Promise 작업이 1초 걸렸습니다.',
  'b Promise 작업이 3초 걸렸습니다.',
  'c Promise 작업이 2초 걸렸습니다.'
]
*/

// 2. rejected가 있는 경우
const aPromise = api('a',1) // pending
const bPromise = api('b','3') // pending >>> 두번째 인자로 문자타입 집어넣음
const cPromise = api('c','2') // pending >>> 두번째 인자로 문자타입 집어넣음

Promise.all([aPromise,bPromise,cPromise]).then((res) => {
    console.log(res);
}).catch((err) => {
    console.log(err);
})
/* 결과(rejected가 있을 경우 나오는 즉시 값을 반환함)
2초후 >>> 'c Promise 작업 실패'
*/

Promise.allSettled

function api(promiseName, sec) {
    return new Promise((resolve,reject) => {
      setTimeout(() => {
        if (typeof promiseName === "string" && typeof sec === 'number') {
          resolve(`${promiseName} Promise 작업이 ${sec}초 걸렸습니다.`)
        } else {
          reject(`${promiseName} Promise 작업 실패`)
        }
      }, sec*1000);
    })
  }

const aPromise = api('a',1) // pending
const bPromise = api('b','3') // pending >>> 두번째 인자로 문자타입 집어넣음
const cPromise = api('c','2') // pending >>> 두번째 인자로 문자타입 집어넣음

Promise.allSettled([aPromise,bPromise,cPromise]).then((res) => {
    console.log(res);
})
/* 결과 (pending상태의 Promise의 콜백에 모두 접근 한 후 각각의 결과를 상세하게 보여줌)
3초후 >>> [
  { status: 'fulfilled', value: 'a Promise 작업이 1초 걸렸습니다.' },
  { status: 'rejected', reason: 'b Promise 작업 실패' },
  { status: 'rejected', reason: 'c Promise 작업 실패' }
]
*/

Promise.race

function api(promiseName, sec) {
    return new Promise((resolve,reject) => {
      setTimeout(() => {
        if (typeof promiseName === "string" && typeof sec === 'number') {
          resolve(`${promiseName} Promise 작업이 ${sec}초 걸렸습니다.`)
        } else {
          reject(`${promiseName} Promise 작업 실패`)
        }
      }, sec*1000);
    })
  }
  
const aPromise = api('a',1) // pending
const bPromise = api('b','3') // pending >>> 두번째 인자로 문자타입 집어넣음
const cPromise = api('c','2') // pending >>> 두번째 인자로 문자타입 집어넣음

Promise.race([aPromise,bPromise,cPromise]).then((res) => {
    console.log(res);
}).catch((err) => {
    console.log(err);
})
/* 결과 (가장 먼저 콜백에 접근한 aPromise의 결과값을 보여줌)
1초후 >>> 'a Promise 작업이 1초 걸렸습니다.'
*/

Promise.any

function api(promiseName, sec) {
    return new Promise((resolve,reject) => {
      setTimeout(() => {
        if (typeof promiseName === "string" && typeof sec === 'number') {
          resolve(`${promiseName} Promise 작업이 ${sec}초 걸렸습니다.`)
        } else {
          reject(`${promiseName} Promise 작업 실패`)
        }
      }, sec*1000);
    })
  }

const aPromise = api('a','1') // pending >>> 두번째 인자로 문자타입 집어넣음
const bPromise = api('b',3) // pending
const cPromise = api('c',2) // pending

Promise.any([aPromise,bPromise,cPromise]).then((res) => {
    console.log(res);
}).catch((err) => {
    console.log(err);
})
/* 결과 (가장 먼저 fulfilled 된 cPromise의 결과값을 보여줌)
2초후 >>> 'c Promise 작업이 2초 걸렸습니다.'
// 모두 rejected일 경우
[AggregateError: All promises were rejected]
*/