비동기 - 콜백(callback)과 프로미스 객체

동기방식: 선언한 순서대로 동작하는 방식

main.js

function a() {
  console.log('A');
}

function b() {
  console.log('B');
}
a()
b()

확인

비동기

 

만약 A함수를 1초 뒤에 동작하게 설정한다면 뒤에 코드인 B 함수가 먼저 출력하게 된다.

이때 순서를 보장할수 있게 해주도록 callback함수를 이용해서 비동기 처리를 한다.

function a(callback) {
  // 1초후 동작하도록 설정
  setTimeout(() => {
    console.log('A');
    callback();
  }, 1000)
  
}

function b() {
  console.log('B');
}
// a함수를 호출할때 callvack함수를 이용해서 순서를 보장한다(비동기)
a(function() {
  b()
})

콜백함수 내부에서 콜백함수를 호출하는 방법

function c(callback) {
  // 1초후 동작하도록 설정
  setTimeout(() => {
    console.log('C');
    callback();
  }, 1000)
}

function d(callback) {
  // 1초후 동작하도록 설정
  setTimeout(() => {
    console.log('D');
    callback();
  }, 1000)
}

c(function() {
  d(function() {
    console.log('Done!')
  })
})

 

promise를 이용해서 비동기 방식을 구현할 수 있다.

promise 객체를 선언하고 await 명령어를 이용하여 비동기 처리를  할 수 있다.

사용법

function AA (){
  // promise: 약속의 객체!
  return new Promise(function (resolve) {
    setTimeout(function () {
      console.log('AA')
      resolve('Hello A');
    }, 1000)
  })
}

function BB () {
  console.log('BB');
}

async function test() {
  const res = await AA();
  console.log('res:', res)
  BB();
}

test();

function A1 (){
  // promise: 약속의 객체!
  return new Promise(function (resolve) {
    setTimeout(function () {
      console.log('A1')
      resolve('Hello A1');
    }, 1000)
  })
}

function A2 (){
  // promise: 약속의 객체!
  return new Promise(function (resolve) {
    setTimeout(function () {
      console.log('A2')
      resolve('Hello A2');
    }, 1000)
  })
}

function A3 (){
  // promise: 약속의 객체!
  return new Promise(function (resolve) {
    setTimeout(function () {
      console.log('A3')
      resolve('Hello A3');
    }, 1000)
  })
}

function A4 (){
  // promise: 약속의 객체!
  return new Promise(function (resolve) {
    setTimeout(function () {
      console.log('A4')
      resolve('Hello A4');
    }, 1000)
  })
}
async function test1() {
  const h1 = await A1()
  const h2 = await A2()
  const h3 = await A3()
  const h4 = await A4()
  console.log('Done!!!');
  console.log(h1, h2, h3, h4)

}

test1();

 

promise 생성자 객체를 이용해서 순서를 지켜야하는 로직을 짤 때 많이 사용한다.