약속 방법 - 한눈에

8724 단어 beginnersjavascriptcodenewbiewebdev

목차


  • Promise
  • The Promise States
  • Create a new Promise
  • Promise Handlers
  • Promise Methods
  • Summary
  • References

    • 그들은 "약속은 성취되어야 한다"고 말합니다. 진실은- JavaScript에서는 거부될 수도 있습니다.


    참고: 이 블로그에서는 asynchronous programming 에 대한 기본적인 이해가 있다고 가정합니다.

    약속하다


  • Promise는 문자 그대로 지금까지 발생하지 않은 일에 대한 가치나 정보를 반환할 것을 약속합니다.
  • 단순히 비동기 작업의 결과를 보유하는 JavaScript 객체입니다.

    • 약속 상태



    Pending: This is the initial state of a promise. This depicts that the task is in progress.




    Fulfilled: If the task was successfully done, then the promise returns a fulfilled state.




    Rejected: If the task failed, then the promise returns a rejected state.




    Settled: Once the promise is resolved or rejected, we say that the promise has been settled.



    새 약속 만들기


  • Promise 객체를 생성하기 위해 Promise 생성자를 사용합니다.

    • const myPromise = new Promise((resolve, reject) => {
  const success = true;
  if (success) {
    resolve("Promise Fulfilled!");
  } else {
    reject("Promise Rejected!");
  }
});

    console.log(myPromise);를 실행하여 Promise의 상태를 알아봅시다.
    Pending 상태의 Promise 객체를 얻습니다.

    약속 처리기



    그 다음에()


  • 확인된 약속의 값을 가져오려면 then() 메서드를 사용합니다.
    • syntax: promiseObj.then(callBackFunction)
  • 예: myPromise.then((res) => console.log(res)); 이렇게 하면 Promise Fulfilled!가 출력으로 반환됩니다. 약속이 거부되었다면 오류가 발생했을 것입니다.

    • 잡다()


  • 확인된 약속이 거부된 후 오류를 처리하기 위해 catch() 메서드를 사용합니다.
    • syntax: promiseObj.then(callBackFunction).catch(callBackFunction)
  • 예: myPromise.then((res) => console.log(res)).catch((e) => console.log(e)); 이렇게 하면 Promise Rejected!가 출력으로 반환됩니다.

    • 마지막으로()


  • finally() 메서드 내부의 코드는 약속 상태에 관계없이 실행됩니다.
    • syntax: promiseObj.then(callBackFunction).catch(callBackFunction).finally(callbackFunction)
  • 예: myPromise.then((res) => console.log(res)).catch((e) => console.log(e)); 이렇게 하면 Promise Rejected!가 출력으로 반환됩니다.

    • 약속 방법



    These methods are used to handle multiple promises



    약속.모두()


  • Promise.all()은 약속 배열을 입력으로 사용합니다.
  • 모든 약속이 해결될 때까지 기다립니다.
  • 모든 값이 충족되는 경우 모든 값을 포함하는 배열을 반환합니다.
  • 첫 번째 거부된 약속의 오류를 반환합니다.

    • const myPromise1 = new Promise((resolve, reject) => {
  const success = true;
  if (success) {
    resolve("Promise Fulfilled 1!");
  } else {
    reject("Promise Rejected 1!");
  }
});

const myPromise2 = new Promise((resolve, reject) => {
  const success = true;
  if (success) {
    resolve("Promise Fulfilled 2!");
  } else {
    reject("Promise Rejected 2!");
  }
});
const myPromise3 = new Promise((resolve, reject) => {
  const success = true;
  if (success) {
    resolve("Promise Fulfilled 3!");
  } else {
    reject("Promise Rejected 3!");
  }
});

Promise.all([myPromise1, myPromise2, myPromise3]).then((res) =>
  console.log(res)
// output 
// ["Promise Fulfilled 1!", "Promise Fulfilled 2!", "Promise Fulfilled 3!"]
);


    약속.any()


  • Promise.any()는 약속 배열을 입력으로 사용합니다.
  • 첫 번째로 이행된 약속의 값을 반환합니다.
  • 이행된 약속을 찾으면 값을 반환합니다. 다른 약속이 완료될 때까지 기다리지 않습니다.

    • const myPromise1 = new Promise((resolve, reject) => {
  const success = false;
  if (success) {
    resolve("Promise Fulfilled 1!");
  } else {
    reject("Promise Rejected 1!");
  }
});

const myPromise2 = new Promise((resolve, reject) => {
  const success = true;
  if (success) {
    resolve("Promise Fulfilled 2!");
  } else {
    reject("Promise Rejected 2!");
  }
});
const myPromise3 = new Promise((resolve, reject) => {
  const success = true;
  if (success) {
    resolve("Promise Fulfilled 3!");
  } else {
    reject("Promise Rejected 3!");
  }
});

Promise.any([myPromise1, myPromise2, myPromise3]).then((res) =>
  console.log(res)
// output 
// "Promise Fulfilled 2!"
);


    약속.allSettled()


  • Promise.allSettled()는 약속 배열을 입력으로 사용합니다.
  • 모든 약속이 이행되거나 거부될 때까지 기다립니다.
  • 약속이 거부된 경우에는 상태와 이유가 포함된 개체를 반환하고 약속이 이행된 경우에는 값을 반환합니다.

    • const myPromise1 = new Promise((resolve, reject) => {
  const success = false;
  if (success) {
    resolve("Promise Fulfilled 1!");
  } else {
    reject("Promise Rejected 1!");
  }
});

const myPromise2 = new Promise((resolve, reject) => {
  const success = true;
  if (success) {
    resolve("Promise Fulfilled 2!");
  } else {
    reject("Promise Rejected 2!");
  }
});
const myPromise3 = new Promise((resolve, reject) => {
  const success = true;
  if (success) {
    resolve("Promise Fulfilled 3!");
  } else {
    reject("Promise Rejected 3!");
  }
});

Promise.allSettled([myPromise1, myPromise2, myPromise3]).then((res) =>
  console.log(res));

// output 
/* 
[
{
status: "rejected"
reason: "Promise Rejected 1!"
},
{
status: "fulfilled"
value: "Promise Fulfilled 2!"
},
{
status: "fulfilled"
value: "Promise Fulfilled 3!"
}
]
*/


    약속.경주()


  • Promise.race()는 Promise 배열을 입력으로 사용합니다.
  • 첫 번째 이행된 약속의 값을 반환하거나 첫 번째 약속이 거부된 경우 오류를 반환합니다.

    • const myPromise1 = new Promise((resolve, reject) => {
  const success = false;
  if (success) {
    resolve("Promise Fulfilled 1!");
  } else {
    reject("Promise Rejected 1!");
  }
});

const myPromise2 = new Promise((resolve, reject) => {
  const success = true;
  if (success) {
    resolve("Promise Fulfilled 2!");
  } else {
    reject("Promise Rejected 2!");
  }
});
const myPromise3 = new Promise((resolve, reject) => {
  const success = true;
  if (success) {
    resolve("Promise Fulfilled 3!");
  } else {
    reject("Promise Rejected 3!");
  }
});

Promise.race([myPromise1, myPromise2, myPromise3]).then((res) =>
  console.log(res)
// output 
// "Promise Rejected 1!"
);



    요약


  • Promise는 비동기 작업의 결과를 보유하는 JavaScript 객체입니다.
  • 보류, 이행 및 거부의 3가지 상태가 있습니다.
  • .then() 및 .catch()는 확인된 후 약속 값에 액세스하는 약속 핸들러입니다.
  • .finally()는 약속 상태에 관계없이 코드를 실행하는 데 사용됩니다.
  • Promise.all()은 모든 약속이 해결되거나 첫 번째로 거부된 약속을 기다립니다.
  • Promise.any()는 이행된 첫 번째 약속의 값을 반환합니다.
  • Promise.allSettled()는 모든 약속이 이행되거나 거부될 때까지 기다립니다.
  • Promise.race()는 첫 번째로 이행된 약속의 값을 반환하거나 첫 번째 약속이 거부된 경우 오류를 반환합니다.



    • 참조


  • https://www.freecodecamp.org/news/javascript-promise-tutorial-how-to-resolve-or-reject-promises-in-js/
  • https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise
    • docker-compose에서 mysql 컨테이너를 세우고 replication을 적용 (mac)
    【docker-comose】git clone한 Laravel 프로젝트(Nginx+php-fpm)가 Docker로 기동할 때까지의 흐름

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage