KOMAS

콜백함수, Promise, async-await

 - 비동기의 결과를 동기적으로 처리해주기 위해서 사용한다.

콜백 함수

다른 함수의 인자로 들어가서 나중에 실행되는 함수

함수내에서 A작업이 종료 후 B작업을 진행해야 할 경우 B작업을 콜백 함수라고 한다.

A작업이 끝난 후 B작업이 실행된다.

콜백 함수는 단순히 작업의 순서를 결정하는 것인데, 사실 이것은 함수를 사용하지 않고도 가능하다.

콜백 함수의 유용성은 비동기 작업을 할 때 나타난다.

A작업이 오래걸리는 작업(서버 통신)이면 비동기적으로 처리된다.

비동기로 처리되므로 아래 코드는 바로 수행되어, 비동기 처리 결과를 받는 곳에는 빈 값이 들어온다.

그래서 이를 방지하고자 비동기 처리가 완료되면, 처리 결과 값을 받은 이후에 실행되는 함수를 따로 둔다.

그 함수가 콜백 함수(비동기 처리가 완료되면 결과를 받아주는 함수)

사용법

function work(CallBack){

    A작업

    let B = CallBack(A작업의 결과)

}

work("A를 마치고", "B가 실행")

단순하게, A의 결과를 콜백 함수의 인자로 전달한다.

비동기 처리 이후 결과의 동기적 처리를 지원한다.

Promise

비동기 작업 이후 다음 작업을 연결시키는 기능을 가진 객체

성공(resolve) 또는 실패(reject)를 리턴한다.

then()내부에 resolve, catch()내부에 reject를 콜백 함수으로 작성하여 사용한다.

let promise = () => {  # 프로미스 객체는 작성하면 바로 execute 되기 때문에 함수안에 두는 것이 좋다.

 return new Promise((resolve, reject) => {  

      # 비동기 작업 진행         

         resolve(성공 결과 data)         

         reject(실패 결과 error)

   }

)};

promise().then((response) => { })   # 성공 시

promise().catch((error) => { })    # 실패 시

비동기 작업 체이닝(Promise 사용 이유)

then(resolve, reject)

Promise가 작업을 성공 하면 resolve() 실행, 실패하면 reject() 실행

then은 작업을 마치면 Promise를 리턴한다.

then()의 반환값

then 핸들러에서 값을 그대로 반환한 경우에는 Promise.resolve(<핸들러에서 반환한 값>)을 반환하는 것과 같다.

then 내부에 성공시 이어지는 동기 작업할 프로미스를 사용하여 체이닝을 한다.

let p1 = () => {
  return new Promise((resolve, reject)=>{
    let data = "p1 data "
    resolve(data);
  })
};

let p2 = (p1Value) => {
  return new Promise((resolve, reject) =>{
    let data = "p2 data "
    resolve(p1Value + data)
  })
};

p1()
  .then((res)=> p2(res))
  .then((res)=> console.log(res));

프로미스를 반환할 경우, 동등한 프로미스가 메서드 체인의 그 다음 then에 노출

async-await

async-await를 사용하면 훨씬 직관적이고 편하다.

내부적으로 Promise를 사용하기 때문에 Promise를 알고 있어야 한다.

async

함수앞에 async를 붙이면 Promise 객체로 사용할 수 있다.

함수를 호출하면 Promise 객체가 반환된다.

await 

반드시 async 함수 내부에서 사용해야 한다.

await은 Promise의 완료를 기다린다.

      사용법

      let result1 = await fetch("url", [ options ] )             

      let result2 = await promise(result1)

      # await의 뒤는 반드시 Promise 객체여야 한다.

await은 then()의 대체라고 보면 된다.

결과 값을 받으며 Promise의 체이닝같은 순차 로직을 명시적으로 작성할 수 있다.

에러처리

에러처리는 async 내부에서 try{  } catch{  } 로 처리한다.

async가 붙은 함수는 Promise 이므로 asyncFunction().catch((error) => { }) 로 처리해도 된다.