[JavaScript] new Promise를 활용해 비동기 콜백 만들기(axios)

 

자바스크립트를 사용하면서 가장 많이 신경써야하는 부분이 바로 비동기 통신 부분이다. 이번에 비동기 통신 함수를 콜백함수로 호출할 수 있도록 수정하는 방법을 알게되어 정리해 둔다.

 

호출 할 함수

- 아래의 코드가 콜백함수로 구현한 비동기 통신 함수이다. return을 할떄에 Promise 객체를 생성해준다.

- resolve는 결과가 잘 실행됐을때, reject는 error가 났을때에 실행된다.

const getList = function("api"){
    let url = api;
    return new Promise(function(resolve, reject){
        sendAxios(apt, 'get').then(function(response){
            resolve(response.data);
        }).catch(function(error){
            reject(error)
        });
    });
}

 

함수 호출 방법

- 아래와 같이 .then을 이요해 콜백함수를 이용할 수 있다.

var userList
const getUserList= function(){
	var _this = this;
	getList('/api/list').then(function(data){
    	_this.userList = data;
    }
}

그렇다면 왜 굳이 이렇게 만들어야 할까?

그냥 값을 바로 넣어줘도 괜찮은거 아닌가? 

.

.

.

동기 통신을 이용해 가지고온 데이터를 활용하기 위함이다.

하나만 예를 들어 보겠다.

 

- 아래의 함수는 기존 userList에 비동기 통신을 가지고온 데이터를 추가하는 로직이다.

- 이와같이 비동기 통신을 이용해 가지고온 데이터를 활용하기 위해 콜백을 필수이다. 

var userList = [
    {
    	userSeq = 1
        userName = '기본유저'
    }
]
const getUserList= function(){
    var _this = this;
    var list;
    getList('/api/list').then(function(data){
    	list = data
    	list.forEach(function(element){
            _this.userList.push(element)
        }
    }
}