06. 자바스크립 (JavaScript) ES5 의 CallBack 과 ES6의 Promise

OS	Windows 10 Home 64bit 버전 1903 (OS 빌드 18362.836)
프로그램명	버전

 

# 참고 사이트

[promise]02. promise 기본 문법

 

# 설명

CallBack 은 비동기처리 후에 실행될 작업을 하기위해 사용한다.

 

# 예시

일반적인 순서	비동기 순서
일반적인 순서	비동기 순서

두 번째 처럼 처리순서가 올바르지 않을 때 callback 을 이용하여 처리순서를 잡아준다.

 

# CallBack

위 처럼 callback 을 사용하여 순서를 올바르게 처리하였다

callback 의 문제점은 callback 을 여러번 사용해야하는 경우 코드가 복잡하고 길어져 가독성을 떨어뜨린다

 

그래서 ES6 부터 이를 보완하기위해 promise 를 도입되었다

# Promise

promise

let mnum = 0
 
let promiseFunction = function() {
  return new Promise(function(resolve, reject) {
    setTimeout(function() {
      console.log(`promise module: ${++mnum} 번째`)
      resolve(mnum)
    }, 2000)
  })
}
 
promiseFunction()
    .then(promiseFunction)
    .then(promiseFunction)

2초마다 실행

 

async 와 await

[ES5]

let f = function() {
  return new Promise(resolve => {
    setTimeout(function() {
      console.log('비동기')
      resolve('파라미터')
    }, 1500)
  })
}
 
let result = (async function() {
  console.log('async')
  let v1 = await f()
  console.log('await ' + v1)
  console.log('end')
})()

[ES6]

let f = () => new Promise(resolve => {
  setTimeout(() => {
    console.log('비동기')
    resolve('파라미터')
  }, 1500)
})
 
let result = (async () => {
  console.log('async')
  let v1 = await f()
  console.log('await ' + v1)
  console.log('end')
}) ();

 

1.5 초 후에 실행

 

promise & async & await

let mnum = 0
let promiseFunction = function() {
  return new Promise(function(resolve, reject) {
    setTimeout(function() {
      console.log(`promise module: ${++mnum} 번째`)
      resolve(mnum)
    }, 1000)
  })
}
 
let result = (async function() {
  await promiseFunction()
  await promiseFunction()
  await promiseFunction()
  await promiseFunction()
  await promiseFunction()
  await promiseFunction()
})()

1초마다 실행