[JS] 콜백 함수, Promise, async-await

 

 

 

---

콜백함수, 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()의 반환값

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/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));

 

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Promise/then

 

프로미스를 반환할 경우, 동등한 프로미스가 메서드 체인의 그 다음 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) => { }) 로 처리해도 된다.