promise / async await

promise

자바스크립트 비동기 처리에 사용되는 객체

보통 서버에서 받아온 데이터를 화면에 표시할 때 사용

function getData(callback){
    return new Promise(function(resolve,reject)){
   axios.post('~~', param)
       .catch(function (err) {

        }).then(function (rs) {
            resolve(response);
        });
    }
}

getData().then(function(data){
    console.log(data);
});

프로미스 상태(states)

• Pending(대기) : 비동기 로직이 완료 x
  • new Promise(); 메서드 호출 할 때
• Fulfilled(이행) : 비동기 처리 완료되어 프로미스가 결과값 반환
• return new Promise(function(resolve,reject)){ resolve(); // 실행하면 이행 상태가 된다. });
• Rejected(실패) : 비동기 처리가 실패하거나 오류가 발생한 상태
• return new Promise(function(resolve,reject)){ ...... reject(new Error("Request is failed")); });

Promise chaining

then()으로 여러개 프로미스 사용할 수 있음

..()
.then(function(data){

})
.then(function(){

});
....

async

promise 의 .then .catch 와다르게 네트워크 비동기 요청에서만 처리

일반 try catch 자바스크립트 코드 까지 예외처리 가능 (async 안에 사용 )

import { handleException } from './utils/handler.js' //.... try{ // ... }catch(error) { handleException(error); }

`/utils/handler.js`

function handleExceptions(status){ //.. }

로 공통으로 처리 가능

async

promise 의 .then .catch 와다르게 네트워크 비동기 요청에서만 처리

일반 try catch 자바스크립트 코드 까지 예외처리 가능 (async 안에 사용 )

import { handleException } from './utils/handler.js'
//....
try{
// ... 
}catch(error) {
    handleException(error);

}

/utils/handler.js

function handleExceptions(status){
 //..
}

로 공통으로 처리 가능