promise로 콜백지옥(callback hell) 개선하기

// 모던자바스크립트
// 정리 전

loadScript('1.js', function(error, script) {

    if (error) {
      handleError(error);
    } else {
      // ...
      loadScript('2.js', function(error, script) {
        if (error) {
          handleError(error);
        } else {
          // ...
          loadScript('3.js', function(error, script) {
            if (error) {
              handleError(error);
            } else {
              // 모든 스크립트가 로딩된 후, 실행 흐름이 이어집니다. (*)
            }
          });
  
        }
      })
    }
  });

 

콜백지옥(callback hell)이란, 콜백함수를 이용해서

비동기처리를 해주다가

코드 depth가 깊어지는 것을 말한다.

 

위 코드와 같이 계속해서 콜백함수를 써서 

js 파일을 불러오려다가,

마치 피라미드처럼

꼬리에 꼬리를 무는 끔찍한 code가 완성된다.

depth가 4이상이 되면, 

가독성이 심하게 떨어져서 알아볼 수 없는 

코드가 되기 때문에 이에 대한 처리가 필요하다.

 

콜백지옥 callback hell code 해석

에러가 발생되면, handleError 함수를 

발생시켜서 에러를 표시하는 구조다.

 

에러 없으면, 1번 js 파일 불러오고

또 에러가 없으면 2번 js 파일 데려오고 ..

 

**결국에는 에러가 없을 시 ,

1번,2번,3번 js파일을 데려오는 code다.

 

*동기(synchronous):

순서대로 실행.

(하나의 코드가 완료되고, 그 다음 code 실행)

*비동기(asynchronous):

코드가 실행 중인 와중에 

다음 code를 실행할 수 있음.

 

모던자바스크립트 튜토리얼 

모던 자바스크립트 튜토리얼에 있는 설명이다.

위의 콜백지옥 (callback hell)에

if문이나 반복문이 들어가면 

더 끔찍해질 것이라 예고하고 있다.

 

* 정상적으로 실행은 잘 된다.

 // 정리 후
loadScript("/article/promise-chaining/one.js")
  .then(script => loadScript("/article/promise-chaining/two.js"))
  .then(script => loadScript("/article/promise-chaining/three.js"))
  .then(script => {
    // 스크립트를 정상적으로 불러왔기 때문에 스크립트 내의 함수를 호출할 수 있습니다.
    one();
    two();
    three();
  });

 

**then : 에러가 없을 경우 1,2,3 파일을 불러오겠다.

(비동기적으로)

 

-위에는 약식으로 promise의 구조를 써놓은 것.

promise 선언까지 제대로 해서 적어야 한다.

 

더 엄밀하게 하려면,

catch문으로 위의 callback hell code에 있는 

handleError 함수를 대체하는 기능을 추가해야 한다.

 

 

//왜 prmoise를 쓰는가?

서버랑 통신하는 동안,

비동기적 처리를 하지 않으면 

다른 작업들이 멈춰버린다.

 

데이터를 가져오는 동안 

다른 작업들도 실행을 해야 하는데

동시에 처리가 불가능한 상황.

 

그래서 callback hell 이 탄생하게 되는데,

이를 promise로 좀 더 깔끔하게 처리할 수 있다. 

// 모던자바스크립트
// 정리 전

loadScript('1.js', function(error, script) {

    if (error) {
      handleError(error);
    } else {
      // ...
      loadScript('2.js', function(error, script) {
        if (error) {
          handleError(error);
        } else {
          // ...
          loadScript('3.js', function(error, script) {
            if (error) {
              handleError(error);
            } else {
              // 모든 스크립트가 로딩된 후, 실행 흐름이 이어집니다. (*)
            }
          });
  
        }
      })
    }
  });

  // 정리 후
loadScript("/article/promise-chaining/one.js")
  .then(script => loadScript("/article/promise-chaining/two.js"))
  .then(script => loadScript("/article/promise-chaining/three.js"))
  .then(script => {
    // 스크립트를 정상적으로 불러왔기 때문에 스크립트 내의 함수를 호출할 수 있습니다.
    one();
    two();
    three();
  });

콜백 함수는 호출(call)했을 때 

바로 실행된다는 특징이 있다.

 

비동기 처리인데, 동기적 표현이 가능한 이유 

promise를 활용했을 때 

resolve, reject함수 중 하나가 실행되어야만

then이나 catch 블록으로 넘어갈 수 있다.

 

하나의 과정을 거쳐야만 넘어갈 수 있으므로,

동기적 처리가 가능해진 것이다.

 

*

 

콜백지옥(callback hell)을 해결하는 방법은 

promise 말고도 매우 다양하다.

 

1. 익명으로 되어 있는 callback 함수를 기명함수로 바꿔주기

2. Promise와 then 이용하기

3. Generator 함수 이용하기

4. Promise와 async/awiat로 처리하기

 

아래 블로그에 잘 정리되어 있으니 참고할 예정!

 

https://velog.io/@yujo/JS%EC%BD%9C%EB%B0%B1-%EC%A7%80%EC%98%A5%EA%B3%BC-%EB%B9%84%EB%8F%99%EA%B8%B0-%EC%A0%9C%EC%96%B4

[JS]콜백 지옥 탈출하기