23/10/16 TIL __ 비동기적 처리 (promise, generator, async/await)

 

 

 

🚗  promise 패턴

 

• new 연산자로 호출해서 사용한다. 
• promise 패턴의 인자로 넘어가는 콜백함수는 따로 호출하지 않아도 바로 실행된다. 
• 파라미터는 resolve, reject 이렇게 사용한다
• 성공의 결과는 resolve 를 통해 then 이 실행되며, 실패의 결과는 reject를 통해 catch 가 실행된다. 
• catch를 사용하지 않는다면 오류가 생긴다. catch 를 이용해 에러를 컨트롤 한다. 
• .finally는 성공 실패 여부와 상관 없이 항상 실행된다. 

 

예시)

new Promise(function (resolve, reject) {
  setTimeout(function () {
    let name = "에스프레소";
    console.log(name);
    resolve(name);
  }, 500);
})
  .then(function (preName) {
    return new Promise(function (resolve, reject) {
      setTimeout(function () {
        let name = preName + ", 아메리카노";
        console.log(name);
        resolve(name);
      }, 500);
    });
  })
  .then(function (preName) {
    return new Promise(function (resolve, reject) {
      setTimeout(function () {
        let name = preName + ", 카페모카";
        console.log(name);
        resolve(name);
      }, 500);
    });
  });

 

 

 

위의 코드를 리펙토링 한다면 이렇게 된다. 

let addCoffee = function (name) {
  //preName은 첫번째 프로미스 패턴에서 반환된 값이 자동으로 들어옴.
  return function (preName) {
    return new Promise(function (resolve, reject) {
      setTimeout(function () {
        let newName = preName ? preName + ", " + name : name;
        console.log(newName);
        resolve(newName);
      }, 500);
    });
  };
};

addCoffee("에스프레소")()
  .then(addCoffee("녹차라떼"))
  .then(addCoffee("라임피지오"));

 

코드를 천천히 살펴보면 이해는 가지만, 직접 리펙토링을 구현하려면 더 많이 보고 쳐봐야겠다.

 

  👀  reject가 되서 catch구문이 실행되는 것에 대한 예시는 아래 링크를 살펴보면 있다. 

https://gabojok.tistory.com/142

ES6 프로미스 패턴 !!("콜백지옥" 으로 부터 탈출)

 

 

 

 

 

🚗  generator 패턴

 

• iterator 객체를 반환한다.
• 함수에 * 을 붙여서 이용한다. 
• 동기 코드처럼 읽을 수 있도록 함.   (비동기 코드 자체의 가독성 문제 )
• generator 는 함수의 코드블록 실행을 일시 중지 한 이후 , 필요할 때에 다시 시작할 수 있다.
• (es5 까지는 함수가 실행되면 완료될 때 까지 계속 실행)
• yield 가 실행되면 👉 제어권 양보 되며, 함수가 멈추고 함수 호출자 에게 제어권을 양보한다.
• .next()를 호출해야 다시 멈췄던 함수가 실행된다. 
•  코드가 길어진다.  (yield 을 만나 정지 한 다음, 다시 실행하려면 then 을 통해 실행된 결과물을 받아와서 .next() 호출해야 한다. )

 

 

예시)

let adCoffee = function (prevName, name) {
  setTimeout(function () {
    coffeeMaker.next(prevName ? prevName + ", " + name : name);
  }, 500);
};

let coffeeGenerator = function* () {
  let espresso = yield adCoffee("", "에스프레소");
  console.log(espresso);
  let americano = yield adCoffee(espresso, "아메리카노");
  console.log(americano);
  let mocha = yield adCoffee(americano, "카페모카");
  console.log(mocha);
  let latte = yield adCoffee(mocha, "카페라떼");
  console.log(latte);
};
let coffeeMaker = coffeeGenerator();
coffeeMaker.next();

//콘솔창
에스프레소
에스프레소, 아메리카노
에스프레소, 아메리카노, 카페모카
에스프레소, 아메리카노, 카페모카, 카페라떼

 

 

예시)

var x = 1;

// 제네레이터 함수를 작성하기 위해 function 키워드에 * 을 붙입니다.
function* foo() {
  x++;
  yield;
  console.log("x : ", x);
}

function bar() {
  x++;
}

// 제네레이터 함수를 호출하며, 제네레이터 객체가 반환됩니다. 제네레이터 객체는 이터러블이면서, 동시에 이터레이터입니다.
// 반환된 'generator' 객체는 next() 메서드를 가지고 있습니다.
var generator = foo();

// foo()는 여기서 시작됩니다.
generator.next();
console.log(x); // 2
bar();
console.log(x); // 3
generator.next(); // x : 3

 

 

 

 

 

 

🚗   async / await  패턴

 

• promise 와, generator를 합친 애!
• 언제나 promise 객체를 반환. __ promise 패턴 만들지 않고도 promise 패턴을 사용 할 수 있다. 
• promise 패턴과는 달리 함수 실행해야 작동
• await가 걸려있는 코드가 해결될 때 까지 기다린다. 
• await를 통해 promise가 수행된 결과 값을 전달받는다. 
• try { 실행할 구문 }, catch( err ){ 에러 처리 } 

 

 

예시)

let adadCoffee = function (name) {
  return new Promise(function (resolve, reject) {
    setTimeout(function () {
      resolve(name);
    }, 500);
  });
};

let coffeeMaker1 = async function () {
  let coffeeList = "";
  let _adadCoffe = async function (name) {
    coffeeList += (coffeeList ? ", " : "") + (await adadCoffee(name));
  };

  await _adadCoffe("에스프레소");
  console.log(coffeeList);
  await _adadCoffe("오렌지주스");
  console.log(coffeeList);
  await _adadCoffe("사과주스");
  console.log(coffeeList);
};

coffeeMaker1();

 

 

예시)

async function main() {
  try {
    const response = await ajaxRequest('잘못된 URL');
    render(response.data);
  } catch (error) {
    console.error(error) // 에러 발생
  }
}

 

 

 

 

 

참고한 블로그

https://velog.io/@ctdlog/JS-%EC%9E%90%EB%B0%94-%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8%EC%9D%98-%EB%B9%84%EB%8F%99%EA%B8%B0-%EC%B2%98%EB%A6%AC-%ED%86%BA%EC%95%84%EB%B3%B4%EA%B8%B0-2-generator-asyncawait