비동기 JavaScript : 콜백 및 약속 설명

웹 요청이나 타이머처럼 즉시 실행되지 않는 코드를 의미하는 비동기 코드를 다루는 것은 까다로울 수 있습니다. JavaScript는 비동기 동작을 처리하는 두 가지 방법, 즉 콜백과 약속을 제공합니다.

콜백은 Promise객체가 언어에 도입 된 2016 년까지 비동기 코드를 처리하기 위해 기본적으로 지원되는 유일한 방법 이었습니다. 그러나 JavaScript 개발자는 약속이 현장에 도착하기 전에 몇 년 동안 비슷한 기능을 구현했습니다. 콜백과 약속의 몇 가지 차이점을 살펴보고 여러 약속을 조정하는 방법을 살펴 보겠습니다.

콜백을 사용하는 비동기 함수는 함수를 매개 변수로 사용하며 작업이 완료되면 호출됩니다. setTimeout브라우저에서 와 같은 것을 사용했다면 콜백을 사용한 것입니다.

// 콜백을 별도로 정의 할 수 있습니다 ...

let myCallback = () => {

  console.log ( '호출되었습니다!');

};

setTimeout (myCallback, 3000);

//…하지만 인라인으로 정의 된 콜백을 보는 것도 일반적입니다.

setTimeout (() => {

  console.log ( '호출되었습니다!');

}, 3000);

일반적으로 콜백을받는 함수는이를 마지막 인수로 사용합니다. 이것은 위의 경우가 아니므로 똑같지 waitsetTimeout처음 두 개의 인수를 반대 순서로 취하는 새로운 함수가 있다고 가정 해 보겠습니다 .

// 다음과 같이 새 함수를 사용합니다.

waitCallback (3000, () => {

  console.log ( '호출되었습니다!');

});

중첩 된 콜백과 운명의 피라미드

콜백은 비동기 코드를 처리하는 데 잘 작동하지만 여러 비동기 함수를 조정해야 할 때 까다로워집니다. 예를 들어 2 초간 기다렸다가 무언가를 기록하고 3 초간 기다렸다가 다른 것을 기록하고 4 초간 기다렸다가 다른 것을 기록하려는 경우 구문이 깊게 중첩됩니다.

// 다음과 같이 새 함수를 사용합니다.

waitCallback (2000, () => {

  console.log ( '첫 번째 콜백!');

  waitCallback (3000, () => {

    console.log ( '두 번째 콜백!');

    waitCallback (4000, () => {

      console.log ( '세 번째 콜백!');

    });

  });

});

이것은 사소한 예처럼 보일 수 있지만 이전 요청의 반환 결과를 기반으로 한 연속으로 여러 웹 요청을 만드는 것은 드문 일이 아닙니다. AJAX 라이브러리가 콜백을 사용하는 경우 위의 구조가 재생되는 것을 볼 수 있습니다. 더 깊게 중첩 된 예에서는 줄의 시작 부분에 들여 쓰기 된 공백으로 만들어진 피라미드 모양에서 이름을 가져 오는 운명의 피라미드라고하는 것을 볼 수 있습니다.

보시다시피 순차적으로 발생해야하는 비동기 함수를 처리 할 때 코드가 구조적으로 엉망이되어 읽기가 더 어려워집니다. 하지만 더 까다로워집니다. 3 ~ 4 개의 웹 요청을 시작하고 모든 요청이 반환 된 후에 만 ​​일부 작업을 수행하려는 경우를 상상해보십시오. 이전에 도전 한 적이 없다면 시도해 보시기 바랍니다.

Promise를 통한 더 쉬운 비동기

Promise는 비동기 작업을 처리하기위한보다 유연한 API를 제공합니다. Promise후속 동작을 처리하고 여러 약속을 조정하기위한 몇 가지 표준 기능이 있는 객체를 반환하도록 함수를 작성해야합니다 . 우리의 경우 waitCallback기능이되었다 Promise기반, 그것은 단지 대기에 밀리 초를 하나 개의 인수를 취할 것입니다. 모든 후속 기능은 약속에서 연결 됩니다. 첫 번째 예는 다음과 같습니다.

let myHandler = () => {

  console.log ( '호출되었습니다!');

};

waitPromise (3000) .then (myHandler);

위의 예에서는 사용할 수있는 메서드가 waitPromise(3000)있는 Promise객체를 반환합니다 then. 여러 비동기 함수를 차례로 실행하려면 promise를 사용하여 운명의 피라미드를 피할 수 있습니다. 우리의 새로운 약속을 지원하기 위해 다시 작성된 코드는 다음과 같습니다.

// 순차 비동기 작업이 아무리 많아도 피라미드를 만들지 않습니다.

waitPromise (2000)

  .then (() => {

    console.log ( '첫 번째 콜백!');

    return waitPromise (3000);

  })

  .then (() => {

    console.log ( '두 번째 콜백!');

    return waitPromise (4000);

  })

  .then (() => {

    console.log ( '두 번째 콜백!');

    return waitPromise (4000);

  });

더 좋은 점은 Promise를 지원하는 비동기 작업을 조정해야하는 경우 여러 promise를 가져와 하나로 결합 all하는 Promise객체 에 대한 정적 메서드 인를 사용할 수 있습니다 . 다음과 같이 표시됩니다.

Promise.all ([

  waitPromise (2000),

  waitPromise (3000),

  waitPromise (4000)

]). then (() => console.log ( '모든 것이 완료되었습니다!'));

다음 주에 우리는 프라 미스가 작동하는 방식과이를 관용적으로 사용하는 방법에 대해 자세히 알아볼 것입니다. JavaScript를 배우는 중이거나 지식을 테스트하는 데 관심 waitCallbackPromise.all있는 경우 콜백 을 사용하여 동일한 작업을 수행하거나 시도해보십시오 .

항상 그렇듯이 의견이나 질문이 있으면 Twitter에서 저에게 연락하십시오.