비동기식 (Asynchronous) - Promise를 활용한 async/await 이란?

 

promise에 대해 알아봤으나

promise을 활용한 asyns/await 비동기 방식에 대해서 알아볼 생각입니다.

 

asyns/await는 왜 나왔는지 어떻게 사용하는지에 대하여...

 

 

---

 

💖 async/await

비동기 프로그래밍에서 콜백함수를 반드시 사용해야하는데 콜백함수가 깊어지면 코드가 복잡해지는(가독성이 안좋아지는) 콜백지옥을 맛보았죠?

 

콜백지옥 예시

 

 

 

그것을 해결하기 위해 ES6에서 Promise를 도입하였습니다. 하지만 아래처럼 Peomise를 사용해도 여전히 복잡합니다. 콜백지옥과 또다른 가독성 난관에 부딪히게 되죠... 

 

//Promise가동성 예시
function increase(number) {
    const promise = new Promise((resolve, reject)=>{
      setTimeout(() => {
        const result = number + 10;
          if(result > 50) {
            const e = new Error("Number Too Big");
           	return reject(e);
          }
          resolve(result);
        }, 1000);
      }) 
    return promise;
}
      
 //promise = 50보다 작으면 성공, 50보다 크면 실패
 increase(0) //0이 number로 내려감
    .then((number)=>{ //number = 0
        console.log(number); //number = result(10) = number(0) + 10; [성공] 10출력
        return increase(number); //number = result(10); 아래 then number에 삽입
    })
    .then((number)=>{ //number = 10
        console.log(number); //number = result(20) = number(10) + 10; [성공] 20출력
        return increase(number); //number = result(20); 아래 then number에 삽입
    })
    .then((number)=>{ //number = 20
        console.log(number); //number = result(30) = number(20) + 10; [성공] 30출력
        return increase(number); //number = result(30); 아래 then number에 삽입
    })
    .then((number)=>{ //number = 30
        console.log(number); //number = result(40) = number(30) + 10; [성공] 40출력
        return increase(number); //number = result(40); 아래 then number에 삽입
    })
    .then((number)=>{ //number = 40
        console.log(number); //number = result(50) = number(40) + 10; [성공] 40출력
        return increase(number); //number = result(50); 아래 then number에 삽입
    })
    .then((number)=>{ //number = 50
        console.log(number); //number = result(60) = number(50) + 10; [실패] catch로 이동
        return increase(number); 실행 X error출력!! = new Error("Number Too Big");
    })
    .catch((e)=>{
       console.log(e);
     });

 

콜백지옥과 다른 안좋은 가독성을 보여주는 Promise의 예시 프로미스 체이닝

 

 

 

ES8에서 async / await를 도입하였고, 덕분에 비동기 코드를 동시적으로 깔끔하게 처리할 수 있게 되었습니다.

 

 async function runTasks () {
      try{
        let result = await increase(0);
        console.log(result);
        result = await increase(result);
        console.log(result);
        result = await increase(result);
        console.log(result);
        result = await increase(result);
        console.log(result);
        result = await increase(result);
        console.log(result);
        result = await increase(result);
        console.log(result);
        result = await increase(result);
        console.log(result);
      } catch (e) {
         console.log(e)
      }
    }

 

위의 Promise와 같은 동작을 진행합니다. 더 보기 쉽죠?

 

 

async/await 문법은 ES8에 해당하는 문법으로 Promise 를 더욱 쉽게 사용 할 수 있게 해줍니다. 기존의 비동기 처리 방식인 콜백 함수와 프러미스의 단점을 보완하고 개발자가 읽기 좋은 코드를 작성할 수 있게 도와줍니다.

 

 

 

---

 

 

 

그렇다고 항상 async/await이 옳다고는 할 수 없습니다.

 

💬 콜백의 깊이가 깊지 않을 때는 작성하기 간편한 콜백함수를 호출하거나, Promise를 사용하는 것이 더 나은 방법일 수도 있습니다.

 

💬 async/await은 Promise를 사용하기 때문에 Promise를 알아야 하고, async/await이 할 수 없는 동작을 Promise로 해결할 수 있는 경우도 있습니다.

 

따라서 Promise와 async/await을 잘 이해해서 때에 따라 사용하는 것이 중요할 것 같습니다.

 

 

 

 

 

 

---

 

👏 promise 기본문법

 

// 선언적 함수 사용시
async function foo(){
    await someAsyncFunction(){...}
    await anotherAsyncFunction(){...}
}

 

// 익명함수 사용시
const "변수명" = async function() {
    await someAsyncFunction(){...}
    await anotherAsyncFunction(){...}
}

// 익명함수 + 화살표 함수
const "변수명" = async() => {
    await someAsyncFunction(){...}
    await anotherAsyncFunction(){...}
}

 

💬 async : 함수 이름 앞에 비동기를 사용하겠다는 선언

💬 await : 호출할 비동기 함수 앞에 await 키워드를 사용합니다. 단 await는 혼자 사용할 수 없고 항상 await앞에 async가 선언되어야 합니다.

 

 

🔊  핵심은 await이며, async는 단지 선언용입니다. 즉, 함수 앞에 async가 선언되어 있어야만 await가 비동기 함수를 호출 할 수 있습니다.

 

 

 

---

 

 

 

위의 예제는 someAsyncFunction, anotherAsyncFunction 두 함수가 비동기 코드일지라도 async / await이 적용되면, 항상 someAsyncFunction  ->  anotherAsyncFunction  순서대로 함수가 실행됩니다.

 

이처럼 비동키 코드를 동기적으로 수행하게 해주는 것이 async / await입니다.

 

이 때 async/await은 Promise 방식을 사용하기 때문에 someAsyncFunction과 anotherAsyncFunction 함수는 Promise를 리턴해야 합니다.

 

 

 

 

 

---

 

🙌 예외처리  try / catch / finally 문 

 

🔊 예외처리란 모든 사용자가 프로그래머가 의도한 대로 프로그램을 사용할 수는 없습니다. 이런 상황들을 예외라고 부르는데, 코드 작성 과정에서 이런 예외를 막을 수 있는 것도 있지만, 외부 요인에 의해서 발생하는 예외들은 코드 작성 과정에서 이를 방지하기가 어렵습니다. 그래서 등장한 것이 예외 처리 구문입니다.

 

 

💬 try{} : 예외가 발생될거라는 의심가는 부분에 try{}문으로 감싸고,

 

💬 catch{} : 그 예외 처리는 catch{}문에서 처리한다.

 

💬 finally{} : 예외가 발생하든 안하든 try{}문이나  catch{}문 종료시 무조건 실행한다

 

 

 

 

---

 

 

try {
  // 이곳의 코드를 실행 = 예외가 발생할 수 있는 명령
} catch(err) {
  // 에러가 발생하면, 여기부터 실행됨
  // err는 에러 객체
} finally {
  // 예외가 발생하거나, 발생하지 않아도 최종적으로 실행될 명령(들)
}

 

1. 먼저 try 블록의 코드가 실행된다.

2. try 블록 안에 에러가 없다면 catch 블록은 건너 뛴다.

3. try 블록 안에서 에러 코드를 만나면 try 블록의 실행이 중단되고 catch 블록의 코드가 실행된다. err 객체에는 에러에 대한 정보가 있다.

4. try가 실행되든 catch가 실행되든 finally내용은 무조건 실행됩니다.

 

 

 

 

 

---

 

👏 자바스크립트 fetch API

fetch 매서드는 JavaScript에서 서버로 네트워크 요청을 보내고 응답을 받을 수 있도록 해주는 매서드이다.

XMLHttpRequest와 비슷하지만 fetch는 Promise를 기반으로 구성되어 있어서 더 간편하게 사용할 수 있다는 차이점이 있다.

 

fetch('api 주소')
  .then(res => res.json())
  .then(res => {
    // data를 응답 받은 후의 로직
  });

 

fetch() 함수 기본

 

 

 

---

 

 

 

1. fetch함수를 사용하면 리소스를 비동기로 요청할 수 있습니다.

 

2. fetch를 호출하면 브라우저는 요청을 보내고 Promise 객체를 반환합니다. 요청이 완료되면 성공 여부에 상관없이 Promise가 resolved(성공) 되어 Response 객체가 반환됩니다. (404, 500 같은 경우와 같은 응답 코드를 받은 경우는 에러를 일으키지 않습니다.)

 

3. HTTP 요청이 완료되지 못한 상태라면 Promise가 rejected(거절) 됩니다. 이 경우 catch 메서드를 사용하여 에러를 처리할 수 있습니다. (네트워크 문제 및 존재하지 않는 사이트에 대한 요청에 해당합니다.)

 

4. Response 객체는 응답에 대한 정보를 담고 있습니다. ok, status 속성을 이용하여 응답 성공 여부를 확인할 수 있습니다.

 

5. 마지막으로 CORS, HTTP Origin header semantics와 같은 개념들도 정의해놨고 이것들을 따로 수정할 수도 있습니다.

 

 

const apiFetch = async (params) => {
    try {
        const resp = await fetch(데이터 가져올 곳의 API코드);
        const result = await resp.JSON();
        console.log(result);
    } catch (error) {
        console.log(error);
    } finally {
        console.log('finish async');
    }
}

apiFetch();

 

 

 

 

---

 

 

 

https://tlsdnjs12.tistory.com/12

동기식 (Synchronous) / 비동기식 (Asynchronous) 이란?

 

 

https://tlsdnjs12.tistory.com/13

비동기식 (Asynchronous) - 콜백 함수(Callback Function) 란?

 

https://tlsdnjs12.tistory.com/14

비동기식 (Asynchronous) - promise 이란?