[javascript] 비동기 처리를 알아보자 ② (promise, Async&await)

callback 함수를 통해 

 

비동기 처리를 알아 보았다

 

하지만 너무 복잡하다 보다 편한 방법을 살펴보자

 

---

PROMISE

--

javascript에서 비동기적으로 실행하는 작업의 결과 (성공 or 실패)를 나타내는 객체

--

 

new 객체로 만들 수 있다, excutor라는 함수를 인자로 받고 매개변수에는 solve 함수와 reject 함수를 둘 수 있다 비동기 작업이 끝낸 후 성공 했을 시 solve 함수 실패시 reject 함수를 사용한다

 

바로 예시를 보자1

 

let timeAttack = new Promise(function (resolve, reject) {  // new Promise 생성
  setTimeout(function() {
    let random = Math.random() * 10;
    
    if(random >= 5) {
      resolve(random);        //성공시
    } else {
      reject();               //실패시
    }
  }, 1000);
});


timeAttack.then( function(num) {    //.then 메소드에 의해 실행 된다 , callback함수와 같은효과
  console.log(num + 'complete');    // (PROMISE).then 형태
},function(){
  console.log('error');
});

아래 timeAttack.then( function(num) 의 num은 위에서 반환 promise 생성시에 반환 된 값이다

 

성공시 -> 숫자 'complete'

 

실패시 -> error 가 출력 될 것이다

 

 

다음과 같은 형태이다

promise.then(성공callback, 실패callback)

 

 

 

then 메소드는 promise객체를 리턴하고 인수로 받은 콜백 함수들의 리턴값을 이어받는다

 

promise.then(function(num) {
  console.log(num + 'complete');   // 1 complete
  return num + 1;                  // 리턴 해준다
  
}).then(function(value){           // 리턴값 value로 받음
  console.log(value){
    console.log(value);            // 2
});

 

 

이렇게 되면

콜백 지옥에 빠질 필요 없이 정갈하게 가능하다

 

 

---

Async & await

 

 

 

더 간단하게 비동기 처리를 해주자

 

절차적 언어에서 사용하는 코드 마냥 간단하다 function 앞에 Async를 붙여주고 비동기로 처리되는 부분에

await을 붙여준다

 

await은 뒷 부분이 반드시 promise를 반환 해야하고 async 함수가 아닌 곳에서 사용하면 error가 난다

 

function promise(){                     //promise를 반환 하는 함수
  return new promise (resolve => {      //new promise
    setTimeout(()=>{
      resolve('resolved');
    },2000);
  });
}

async function asyncCall(){             // async 함수
  try{
    console.log(1);
    const result = await promise();     //promise 객체를 반환하는 함수의 앞에 await
    console.log(result);         
    console.log(2);
  } catch(err) {                        // async함수 예외처리
    console.error(err);
  }
}

asyncCall();

 

 

 

결과:

1
resolved
2

간단하게 비동기 처리가 되었다

 

async await을 사용하려면 promise 개념이 있어야 하는 듯 하다

 

 

 

---

 

 

axios 나 fetch 같은 ajax요청은 자동으로  promise가 반환된다고 한다

 

프로젝트 시 .then()을 사용했었는데

 

이게 뭔지 의문이 풀렸다

 

 

 

 

 

 

 

 

 

참고: velog.io/@yejinh/%EB%B9%84%EB%8F%99%EA%B8%B0-%ED%8C%8C%ED%97%A4%EC%B9%98%EA%B8%B0 

blueshw.github.io/2018/02/27/async-await/