[Javascript] 자바스크립트

https://joseph0926.25

위 링크에서 이 주제에 대해 자세히 읽었습니다.

다른 글을 쓰는 이유는

약속에 대한 설명 부족

위 기사의 설명 중 누락된 부분에 대한 추가 내용입니다.

쉬운 목차

이 기사에서 알아보십시오

콜백 지옥이란 무엇입니까?
약속이란 무엇입니까?
async / await 키워드 추가

1. 콜백 지옥이란?

원래 기사에서 설명했듯이,

콜백 함수란? 이 코드는 비동기 코드를 작성할 때 필요하며 JavaScript와 브라우저 간의 통신 수단으로 사용되는 기능입니다.

우리는 또한 콜백 함수가 중첩될 수 있다고 말했습니다.

그러나 이 콜백 함수에는 치명적인 결함이 있습니다.

예를 들어보자

const dummyFn = () => {
  console.log("add messi"); //1
  console.log("messi start!"); //2
  setTimeout(() => {
    console.log("messi done..."); //4
    console.log("pedri start!"); //5
    setTimeout(() => {
      console.log("pedri done.."); //7
      console.log("dejong start!"); //8
      setTimeout(() => {
        console.log("dejong done..."); //9
      }, 2000);
    }, 5000);
    console.log("add dejong"); //6
  }, 10000);
};

dummyFn();
console.log("add pedri"); //3

각 플레이어가 추가 -> 시작 -> 완료 단계를 거쳐야 하고 반드시 setTimeout() 을 사용해야 한다고 가정해 보겠습니다.
.그러면 위와 같이 코드를 작성할 수 있는데 코드만 봐도 뭐가 문제인지 알 수 있다.
- 콜백은 콜백을 둘러싸고 있고 그 콜백은 또 다른 콜백을 둘러싸고 있습니다. 이 콜백 지옥이 발생합니다.
- 이것은 코드 가독성이 심각하게 떨어지는 문제가 있다.
약속은 이 문제를 해결합니다.

2. 약속이란 무엇입니까?

이름에서 알 수 있듯이 무언가를 하겠다는 약속입니다.
- 약속이 보류 중이거나 완료되었거나 거부되었습니다.
약속 사용
1. 약속을 만들다
  - 상수 약속 = 새 약속();
  - Promise() 생성자는 콜백 함수를 받아들입니다.
2. 콜백 함수 전달
  - 새로운 약속((해결, 거부) ⇒ {})
  - 콜백 함수의 매개변수로 두 개의 함수를 지정할 수 있습니다.
    - 해결된 경우 거부된 경우

const promise = new Promise((resolve, reject) => {
  let isValid = true;
  if (isValid) {
    resolve("성공!");
  } else {
    reject("실패ㅠ");
  }
});

3. 성공했을 때와 실패했을 때 대처해야 한다.

성공 → 해결 → 차단
- 약속하다. then((데이터) => {})
- 그런 다음 콜백 함수를 인수로 사용하고 약속 값은 콜백 함수에 대한 인수로 액세스할 수 있습니다(위 코드에서 “Success!”).
오류 → 거부 → 차단 차단
- 이전과 마찬가지로 catch 블록은 콜백 함수를 인수로 사용하고 약속의 값을 콜백 함수 인수로 액세스할 수 있습니다(위 코드에서 “실패”).

이렇게 사용할 수 있습니다.

그런 다음 Promise를 사용하는 샘플 코드를 살펴보고 위의 콜백 지옥보다 나은지 살펴보겠습니다.

btn.addEventListener("click", () => {
  addColor(1000, messi, "red")
    .then((data) => {
      console.log(data);
      addColor(2000, pedri, "green");
    })
    .then((data) => {
      console.log(data);
      addColor(5000, dejong, "blue");
    })
    .catch((err) => {
      console.log(err);
    });
});

const addColor = (time, element, color) => {
  const promise = new Promise((resolve, reject) => {
    if (element) {
      setTimeout(() => {
        element.style.color = color;
        resolve();
      }, time);
    } else {
      reject(new Error("Error!!!!!!"));
    }
  });
  return promise;
};

코드가 기존 콜백 함수만 사용한다면,

addColor가 중첩되는 부분이 많이 복잡했을 것입니다.

반면에 Promise를 사용하면 Promise를 기반으로 분할되므로 가독성이 크게 향상됩니다.

그러나 위 코드의 두 번째 then이 실패하면 세 번째는 어떻게 됩니까?
- 약속은 기본적으로 비동기 코드이기 때문에 실행됩니다.
- 이것을 원할 수도 있지만 더 빨리 오류가 발생하면 중지하고 싶을 때가 있습니다.
- 여기에서 async/await를 사용합시다.

3. 비동기/대기 추가

async/await에 대한 설명은 이전 글에서 충분히 살펴봤고,

위의 Promise 샘플 코드를 async/await 코드로 대체하는 것으로 기사를 마무리하겠습니다.

btn.addEventListener("click", async () => {
  displayColor().then((data) => {
    console.log(data);
  });
});

const displayColor = async () => {
  try {
    await addColor(1000, messi, "red");
    await addColor(2000, pedri, "green");
    await addColor(1000, dejong, "blue");
  } catch (error) {
    console.log(error);
  }
};

const addColor = (time, element, color) => {
  const promise = new Promise((resolve, reject) => {
    if (element) {
      setTimeout(() => {
        element.style.color = color;
        resolve("성공!");
      }, time);
    } else {
      reject(new Error("Error!!!!!!"));
    }
  });
  return promise;
};

여기서 두 번째 addColor에서 오류가 발생하면 세 번째 addColor는 무시되고 catch 블록으로 이동됩니다.