라이브러리

[JAVASCRIPT] new Promise((resolve, reject) => {}) - 비동기 작업을 위한 프로미스 생성




Promise란?


Promise는 자바스크립트에서 비동기 처리를 위한 객체입니다. 비동기 처리란 즉시 처리되지 않고 미래의 어떤 시점에 결과가 도출되는 처리 방식을 의미합니다. Promise는 이 비동기 처리를 위한 객체로, 콜백 함수를 사용하여 처리 결과를 받을 수 있습니다.

new Promise((resolve, reject) => {})의 구조


Promise를 생성하는 방법은 `new Promise((resolve, reject) => {})` 형식으로 사용합니다. 여기서 `resolve`와 `reject`은 함수입니다.

- `resolve`: Promise가 성공적으로 처리된 경우 호출되는 함수입니다. 이 함수는 Promise의 결과를 반환합니다.
- `reject`: Promise가 실패한 경우 호출되는 함수입니다. 이 함수는 Promise의 오류를 반환합니다.

예제


#hostingforum.kr
javascript

// new Promise((resolve, reject) => {}) 예제

function getPromise() {

  // 2초 후에 Promise를 반환

  return new Promise((resolve, reject) => {

    setTimeout(() => {

      // 2초 후에 resolve를 호출하여 Promise를 성공적으로 처리합니다.

      resolve("Promise가 성공적으로 처리되었습니다.");

    }, 2000);

  });

}



// getPromise() 함수를 호출하여 Promise를 생성합니다.

getPromise().then((result) => {

  console.log(result); // Promise가 성공적으로 처리되었습니다.

}).catch((error) => {

  console.error(error); // 오류가 발생하지 않습니다.

});


예제 설명


위 예제에서는 `getPromise()` 함수를 호출하여 Promise를 생성합니다. `getPromise()` 함수는 2초 후에 Promise를 반환합니다. 2초 후에 `resolve` 함수를 호출하여 Promise를 성공적으로 처리합니다. `then` 함수는 Promise가 성공적으로 처리된 경우 호출되는 함수로, Promise의 결과를 받을 수 있습니다. `catch` 함수는 Promise가 실패한 경우 호출되는 함수로, Promise의 오류를 받을 수 있습니다.

Promise의 상태


Promise는 3가지 상태를 가집니다.

- Pending: Promise가 아직 처리되지 않은 상태입니다.
- Fulfilled: Promise가 성공적으로 처리된 상태입니다.
- Rejected: Promise가 실패한 상태입니다.

예제 (Promise의 상태)


#hostingforum.kr
javascript

// Promise의 상태 예제

function getPromise() {

  // Pending 상태로 Promise를 반환

  return new Promise((resolve, reject) => {

    setTimeout(() => {

      // Pending 상태에서 Fulfilled 상태로 Promise를 변경합니다.

      resolve("Promise가 성공적으로 처리되었습니다.");

    }, 2000);

  });

}



// getPromise() 함수를 호출하여 Promise를 생성합니다.

let promise = getPromise();



console.log(promise); // Promise {  }



// 2초 후에 Fulfilled 상태로 Promise가 변경됩니다.

setTimeout(() => {

  console.log(promise); // Promise { : "Promise가 성공적으로 처리되었습니다." }



  // Fulfilled 상태에서 다시 Pending 상태로 Promise를 변경합니다.

  promise = new Promise((resolve, reject) => {

    setTimeout(() => {

      // Pending 상태에서 Fulfilled 상태로 Promise를 변경합니다.

      resolve("Promise가 성공적으로 처리되었습니다.");

    }, 2000);

  });



  console.log(promise); // Promise {  }

}, 2000);



// 4초 후에 Fulfilled 상태로 Promise가 변경됩니다.

setTimeout(() => {

  console.log(promise); // Promise { : "Promise가 성공적으로 처리되었습니다." }

}, 4000);


예제 설명


위 예제에서는 `getPromise()` 함수를 호출하여 Promise를 생성합니다. `getPromise()` 함수는 Pending 상태로 Promise를 반환합니다. 2초 후에 Fulfilled 상태로 Promise가 변경됩니다. 다시 Pending 상태로 Promise를 변경하고, 4초 후에 Fulfilled 상태로 Promise가 변경됩니다.

Promise.all()


Promise.all() 함수는 여러 Promise를 하나의 Promise로 반환합니다. 여러 Promise가 모두 성공적으로 처리된 경우, 하나의 Promise를 반환합니다. 하나의 Promise가 실패한 경우, 하나의 Promise를 반환합니다.

예제 (Promise.all())


#hostingforum.kr
javascript

// Promise.all() 예제

function getPromise1() {

  return new Promise((resolve, reject) => {

    setTimeout(() => {

      resolve("Promise1이 성공적으로 처리되었습니다.");

    }, 2000);

  });

}



function getPromise2() {

  return new Promise((resolve, reject) => {

    setTimeout(() => {

      resolve("Promise2가 성공적으로 처리되었습니다.");

    }, 2000);

  });

}



function getPromise3() {

  return new Promise((resolve, reject) => {

    setTimeout(() => {

      reject("Promise3가 실패했습니다.");

    }, 2000);

  });

}



// getPromise1(), getPromise2(), getPromise3() 함수를 호출하여 Promise를 생성합니다.

Promise.all([getPromise1(), getPromise2(), getPromise3()]).then((results) => {

  console.log(results); // ["Promise1이 성공적으로 처리되었습니다.", "Promise2가 성공적으로 처리되었습니다."]

}).catch((error) => {

  console.error(error); // Promise3가 실패했습니다.

});


예제 설명


위 예제에서는 `getPromise1()`, `getPromise2()`, `getPromise3()` 함수를 호출하여 Promise를 생성합니다. `getPromise1()`과 `getPromise2()` 함수는 모두 Fulfilled 상태로 Promise를 반환합니다. `getPromise3()` 함수는 Rejected 상태로 Promise를 반환합니다. `Promise.all()` 함수는 여러 Promise를 하나의 Promise로 반환합니다. 하나의 Promise가 실패한 경우, 하나의 Promise를 반환합니다.

Promise.race()


Promise.race() 함수는 여러 Promise 중에서 가장 먼저 처리된 Promise를 반환합니다.

예제 (Promise.race())


#hostingforum.kr
javascript

// Promise.race() 예제

function getPromise1() {

  return new Promise((resolve, reject) => {

    setTimeout(() => {

      resolve("Promise1이 성공적으로 처리되었습니다.");

    }, 2000);

  });

}



function getPromise2() {

  return new Promise((resolve, reject) => {

    setTimeout(() => {

      resolve("Promise2가 성공적으로 처리되었습니다.");

    }, 1000);

  });

}



function getPromise3() {

  return new Promise((resolve, reject) => {

    setTimeout(() => {

      reject("Promise3가 실패했습니다.");

    }, 2000);

  });

}



// getPromise1(), getPromise2(), getPromise3() 함수를 호출하여 Promise를 생성합니다.

Promise.race([getPromise1(), getPromise2(), getPromise3()]).then((result) => {

  console.log(result); // Promise2가 성공적으로 처리되었습니다.

}).catch((error) => {

  console.error(error); // 오류가 발생하지 않습니다.

});


예제 설명


위 예제에서는 `getPromise1()`, `getPromise2()`, `getPromise3()` 함수를 호출하여 Promise를 생성합니다. `getPromise2()` 함수는 가장 먼저 처리된 Promise입니다. `Promise.race()` 함수는 가장 먼저 처리된 Promise를 반환합니다.
  • profile_image
    나우호스팅 @pcs8404　
    호스팅포럼 화이팅!

    댓글목록

    등록된 댓글이 없습니다.

  • 전체 10,077건 / 3 페이지

검색

게시물 검색