JavaScript의 약속

소개

ECMA 스크립트 6 이전에는 콜백 함수를 사용하여 비동기 작업을 처리했습니다.

콜백 함수란?

콜백 함수는 비동기 작업이 완료될 때 호출되도록 다른 함수에 전달되는 함수입니다.
setTimeout() 및 setEnterval()는 콜백 함수의 예입니다.

콜백 함수 정의를 단순화하기 위해 setTimeout() 함수를 예로 들어 보겠습니다.

//* Callback Function
function sayHello() {
  console.log("Hello, World!");
}

setTimeout(sayHello, 1000);

위의 코드에서는 다른 FunctionsetTimeout()을 Parameter로 받아 주어진 시간sayHello() 후에 실행하는 Function1 Second을 사용했는데, 이 예제sayHello()에서 Function은 1초 후에 실행된 Callback 함수입니다.

따라서 위의 예는 "Hello, World!"를 기록합니다. 1초 후 콘솔에서.

이제 콜백 함수 개념을 이해한 후 setTimeout() 함수에 대한 더 복잡한 예를 살펴보겠습니다.

setTimeout(() => {
  console.log("I"); //* after (1) second
  setTimeout(() => {
    console.log("Love"); //* after (3) second
    setTimeout(() => {
      console.log("JavaScript"); //* after (6) second
      setTimeout(() => {
        console.log("Very"); //* after (10) second
        setTimeout(() => {
          console.log("Much"); //* after (15) second
          setTimeout(() => {
            console.log("!"); //* after (21) second
          }, 6000);
        }, 5000);
      }, 4000);
    }, 3000);
  }, 2000);
}, 1000);

위의 예에서는 setTimeout 함수를 여러 번 사용하여 "I Love JavaScript Very Much !"를 기록했습니다. 문장이지만 특별한 시간 이후의 모든 단어.
하지만 이 예에서 알아차렸습니까?
예 정확히 코드 모양은 실용적이지 않으며 6Callback Functions이 있으며 대규모 프로젝트에서는 이러한 중첩Callback Functions이 점점 더 많아집니다.
이 문제는 Callback Hell 또는 Pyramid of Doom으로 알려져 있습니다.

이 문제를 해결하기 위해 ES6는 약속이라는 새로운 객체를 얻습니다.
Promise 개념을 이해하기 위해 Let Me and You, 다음 주에 귀하의 책을 제공하겠다는 약속을 드립니다. 이것을 약속이라고 합니다.
자, 내가 당신에게 한 약속의 가능한 사례는 무엇입니까?
좋습니다. 두 가지 상태가 있습니다.

나는 당신의 책을 줄 것이며 이것은 해결된 상태라고 합니다.

I will not give you your book and this called Rejected State(거부된 상태)

이 두 상태 사이에는 보류 상태라는 또 다른 상태가 있습니다.

이제 Promise의 예를 들어봅시다.

const myPromise = new Promise((resolve, reject) => {
  const connect = true;

  if (connect) {
    resolve("Your Connection Success :)");
  } else {
    reject(new Error("Sorry, Connection Failed :("));
  }
});

myPromise
.then((res) => {
  console.log(res);
})
.catch((error) => {
  console.log(error);
})
.finally(() => {
  console.log("Process is Done :)");
});

위의 예에서는 Promise 객체를 사용하여 연결 프로세스를 처리합니다.
Promise에는 데이터를 가져오는 세 가지 방법이 있습니다.

then() 케이스가 해결된 경우 응답을 받는 함수입니다.

catch() 거부된 사례에서 오류를 가져오는 함수입니다.

finally() 모든 경우에 실행되는 기능.

환상적인 약속은 then() 함수를 얼마든지 사용할 수 있다는 것입니다. 예를 들어 보겠습니다.

//* Previous Code.....
myPromise
  .then((res) => {
    return res;
  })
  .then((res) => `${res} 1`)
  .then((res) => `${res} 2`)
  .then((res) => `${res} 3`)
  .then((res) => `${res} 4`)
  .then((res) => `${res} 5`)
  .then((res) => console.log(res))
  .catch((error) => {
    console.log(error);
  })
  .finally(() => {
    console.log("Process is Done :)");
});

위의 예에서 결과는 콘솔에서 다음과 같습니다.

Your Connection Success :) 1 2 3 4 5
Process is Done :)

비동기 및 대기 구문

ECMA Script 2017에는 async 및 await 키워드를 사용하여 약속 처리를 용이하게 하는 새로운 구문 Suger가 있습니다.
따라서 이전 예를 작성하면 다음과 같습니다.

const connectFunc = async () => {
  try {
    const res = await myPromise;
    console.log(res);
  } catch (error) {
    console.log(error);
  } finally {
    console.log("Process is Done :)");
  }
};

보시다시피, async 키워드와 await 메서드를 사용하려면 약속 처리 코드를 포함할 함수 앞에 async를 추가하고, 비동기 라인 앞에 await 키워드를 사용하고, 마지막으로 모든 try-catch 블록에 있습니다.

결론

마지막으로, 매일매일 새로운 것이 추가되고 더 이상 사용되지 않는 것들이 있습니다.
따라서 자신과 기술을 개발하기 위해 현장의 모든 뉴스를 따르는 것을 잊지 마십시오.