코어자바스크립트 4장 part2 ( Promise , async await )

Promise

기본틀

new Promise(function(resolve){
  비동기 함수
}).then(function(value){
  return new Promise(function(resolve){
    비동기 함수
  })
}).then(function(value){
  return new Promise(function(resolve){
    비동기 함수
  })
})

or

function 함수(){
	return new Promise(function(resolve){
  			비동기 함수
			})
}

함수().then(function(value){
  return new Promise(function(resolve){
    비동기 함수
  })
}).then(function(value){
  return new Promise(function(resolve){
    비동기 함수
  })
})

시작 내용
1. new Promise

new Promise(function(resolve){
  비동기 함수
}).then(~~~)

2. 함수형태

function 함수(){
	return new Promise(function(resolve){
  		비동기 함수
		})
}
함수().then(~~~)

then이후 형태

function(이전에서 리턴한 매개변수){
	return new Promise(function(resolve){
	....
	resolve(값);
})}

Promise 사용 예시

new Promise(function (resolve){
  setTimeout(function(){
    var name = '에스프레소';
    console.log(name);
    resolve(name);
  },500)
}).then(function(prevName){
  return new Promise(function(resolve){
    setTimeout(function(){
      var name = prevName + ', 아메리카노';
      console.log(name);
      resolve(name);
    },500);
  })
}).then(function(prevName){
  return new Promise(function(resolve){
    setTimeout(function(){
      var name = prevName + ',카페모카';
      console.log(name);
      resolve(name);
    },500);
  })
}).then(function(prevName){
  return new Promise(function(resolve){
    setTimeout(function(){
      var name = prevName + ',카페라떼';
      console.log(name);
      resolve(name);
    },500);
  })
})

async await

함수 내부에서 실질적인 비동기 작업이 필요한 위치마자 await 표기

async await 사용 예시

var addCoffee = function(name){
  return new Promise(function(resolve){
    setTimeout(function(){
      resolve(name);
    },500);
  })
}

var coffeeMaker = async function(){
  var coffeeList = '';

  coffeeList += (coffeeList ? ',' : '') + await addCoffee('에스프레소');
  console.log(coffeeList);
  coffeeList += (coffeeList ? ',' : '') + await addCoffee('아메리카');
  console.log(coffeeList);
  coffeeList += (coffeeList ? ',' : '') + await addCoffee('카페모카');
  console.log(coffeeList);
  coffeeList += (coffeeList ? ',' : '') + await addCoffee('카페라떼');
  console.log(coffeeList);
  
}

coffeeMaker()

실제 위의 내용을 함수로 표현해서 정리해보면 아래와 같다.

var addCoffee = function(name){
  return new Promise(function(resolve){
    setTimeout(function(){
      resolve(name);
    },500);
  })
}

var coffeeMaker = async function(){
  var coffeeList = '';
  var _addCoffee = async function(name){
    coffeeList += (coffeeList ? ',' : '') + await addCoffee(name);
  }
  await _addCoffee('에스프레소');
  console.log(coffeeList);
   await _addCoffee('아메리카');
  console.log(coffeeList);
   await _addCoffee('카페모카');
  console.log(coffeeList);
   await _addCoffee('카페라떼');
  console.log(coffeeList);
  
}

비동기와 관련된 부분들에 await을 포함시키고 이를 포함하는 함수는 async를 붙여준다.