[JS] 비동기 처리하는 법 알아보기(Callback,Promise,Async & Await)

안녕하세요 Foma💻 입니다.

 

오늘도 모던 자바스크립트를 통해 배운 Callback 함수와 Promise에 대해서 제가 이해한 방식대로

 

정리해보도록 하겠습니다.

 

바로 시작할게요~

---

Callback

 

Callback 함수는 실행하는 즉시 완료되는 것이 아니라 특정 작업을 실행하고 마친 뒤에 완료된다.

 

즉, 비동기적으로 처리되는 것을 의미한다.

 

만약 스크립트를 만드는 작업이 있다면 작업이 정상적으로 처리되거나 중간에서 에러가 발생하는 경우에 작업이 완료된다.

 

콜백 함수가 완료되는 경우는 정상적으로 처리되었거나, 에러가 발생한 경우 뿐이다.

 

콜백 함수를 작성하는 방식은 원하는 파라미터 값과 함께 작업을 실행할 함수를 반드시 같이 넣어준다.

 

function loadScript(src,callback) {
    let script = document.createElement('script')
    script.src = src
    //정상적으로 처리됐을 경우
    script.onload = () => callback(null,script)
    //에러가 발생했을 경우
    script.onerror = () => callback(new Error(`${src}를 불러오는 도중에 에러가 발생했습니다.`))
    document.head.append(script)
}

//콜백함수 실행
loadScript('/javascript/syntax.js',function(error,script) {
    if (error) {
        //에러가 있다면 에러 처리
    }else {
        //없다면 정상실행
    }
})

---

Pyramid of doom

 

Pyramid of doom은 멸망의 피라미드라고도 하는데, 이것은 처리해야할 콜백 함수가 여러개인 경우에 발생한다.

 

콜백 함수 안에 콜백 함수가 이어 있는 경우이므로 코드가 가로,세로 모두 길게 이어진다.

 

이것은 코드의 가독성이 안좋아지기 때문에 콜백 함수의 큰 단점이다.

 

loadScript('1.js', function(error, script) {
    if (error) {
      handleError(error);
    } else {
      // ...
      loadScript('2.js', function(error, script) {
        if (error) {
          handleError(error)
        } else {
          // ...
          loadScript('3.js', function(error, script) {
            if (error) {
              handleError(error)
            } else {
              // 모든 스크립트가 로딩된 후, 실행 흐름이 이어집니다. (*)
            }
          })
  
        }
      })
    }
  })

 

아래와 같이 나눠쓰면 위의 코드를 완화할 순 있지만, 이것 또한 실행해야 할 스크립트만큼 코드를 작성해야 하고 재사용이 불가하다.

 

function step1(error, script) {
  if (error) {
    handleError(error);
  } else {
    // ...
    loadScript('2.js', step2);
  }
}

function step2(error, script) {
  if (error) {
    handleError(error);
  } else {
    // ...
    loadScript('3.js', step3);
  }
}

function step3(error, script) {
  if (error) {
    handleError(error);
  } else {
    // 모든 스크립트가 로딩되면 다른 동작을 수행합니다. (*)
  }
};

---

Promise

 

Promise는 위와 같은 콜백 함수의 단점을 대체할 수 있는 객체이다.

 

생성하는 방법은 아래와 같이 성공(resolve)했을 때와 실패(reject)했을 때를 파라미터로 생성할 때 같이 넣어줍니다.

 

그리고 성공했을 때는 resolove(원하는 값), 에러가 발생했을 땐 reject(에러)로 값을 반환한다.

 

let promise = new Promise(function(resolve,reject) {
    //만약 에러가 없다면
    resolve("성공")
    //에러가 발생했다면
    reject(new Error("에러발생"))
})

 

위에서 만든 promise 객체를 구독하여 값이 반환됐을 때 받아올 수 있는데, 이것은 .then으로 작성한다.

 

promise.then(
    //결과가 에러가 없으면
    result => console.log(result),
    //결과가 에러가 있다면
    error => console.log(error)
)

 

성공했을 때만 받아오고 싶다면 아래와 같이 성공에 대한 작업만 처리해주고,

 

promise.then(result => console.log(result))

 

실패했을 때만 받아오고 싶다면  .catch를 이용해서 에러를 핸들링 할 수 있다.

 

promise.catch(error => console.log(error))

 

또한 실패하든 성공하든 무조건 처리되는 어떠한 작업이 있다면 finally를 통해 처리해준다.

 

promise.finally(
    console.log("Finally 무조건 실행됨.")
).then(result => console.log(result))
.catch(error => console.log(error))

 

위 콜백 함수 loadScript를 Promise로 다시 작성하면 아래와 같다.

 

function loadScript(src) {
    return new Promise(function(resolve,reject) {
        let script = document.createElement('script')
        script.src = src
        script.onload = () => resolve(script)
        script.onerror = () => reject(new Error(`${src}를 불러오는 도중 에러발생`))
        document.head.append(script)
    })
}

 

콜백 함수의 큰 단점이었던 멸망의 피라미드를 아래와 같이 짧고, 가독성 있게 작성할 수 있게 된다.

 

fetch("https://www.naver.com")
.then(script => fetch("https://www.naver.com"))
.then(script => fetch("https://www.google.com"))
.then(script => {
    console.log(script)
})

---

Promise API

 

이 외에도  Promise의 장점은 여러가지 API를 가지고 있다는 것이다.

 

Promise.all

 

여러 프로미스를 한번에 담아서 처리할 수 있다.

 

단, 하나라도 에러가 발생한다면 그 즉시 중단하고 에러를 반환한다.

 

 Promise.all([
    new Promise((resolve, reject) => setTimeout(() => resolve(1), 1000)),
    new Promise((resolve, reject) => setTimeout(() => reject(new Error("에러 발생!")), 2000)),
    new Promise((resolve, reject) => setTimeout(() => resolve(3), 3000))
  ]).catch(alert); // Error: 에러 발생!

 

Promise.allSettled

 

Promise.all과 같이 여러 프로미스를 담아 한번에 처리하는데, 

 

작업이 완료되었으면 fullfilled로 에러가 발생했으면 reject로 모두 반환된다.

 

 Promise.allSettled([
    new Promise((resolve, reject) => setTimeout(() => resolve(1), 1000)),
    new Promise((resolve, reject) => setTimeout(() => reject(new Error("에러 발생!")), 2000)),
    new Promise((resolve, reject) => setTimeout(() => resolve(3), 3000))
  ]).then(results => {
      results.forEach((result, num) => {
        if (result.status == "fulfilled") {
          console.log(`${result.value.status}`)
        }
        if (result.status == "rejected") {
          console.log(`${result.reason}`)
        }
      })
      
/*
{status: 'fulfilled'.},
{status: 'fulfilled'},
{status: 'rejected'}
*/

 

Promise.race

 

위의 두 API와 같이 모두 한번에 담아서 처리하지만 가장 처리 속도가 빠른 것의 작업결과를 반환한다.

 

Promise.race([
    new Promise((resolve, reject) => setTimeout(() => resolve(1), 1000)),
    new Promise((resolve, reject) => setTimeout(() => reject(new Error("에러 발생!")), 2000)),
    new Promise((resolve, reject) => setTimeout(() => resolve(3), 3000))
  ]).then(result => console.log(result)); // 1

---

Async & Await

 

Async와 Await를 사용하면 Promise를 좀 더 편하게 사용할 수 있다.

 

비동기적으로 처리되는 어떤 함수가 있다면 앞에 async를 붙여준다.

 

그 다음 해당 함수를 Promise와 동일하게 구독해서 결과를 받아온다.

 

async function f() {
    return 1
}
f().then(result => console.log(result))

 

또는 Promise를 생성해서 결과값을 await을 통해 가져올 수도 있다.

 

async function f(){
    let promise = new Promise((resolve,reject) => {
        setTimeout(() => resolve("완료"),1000)
    })

    let result = await promise
    console.log(result)
}

 

깃헙에서 아바타를 가져오는 과정을 async&await과 Promise를 사용해서 나타내면 아래와 같다.

 

async function showAvatar(url) {
    let response = await fetch(url)
    let user = await response.json()

    let githubResponse = await fetch(`https://api.github.com/users/${user.name}`)
    let githubUser = await githubResponse.json()

    let img = document.createElement('img')
    img.src = githubUser.avatar._url
    img.className = 'promise-avatar-example'
    document.body.append(img)

    await new Promise((resolve,reject) => setTimeout(resolve,3000))
    img.remove()
    return githubUser
}

---

Reference

 

모던 JavaScript 튜토리얼