vue.js/vue.js 2

67. 자바스크립트 비동기 처리 패턴의 발전 과정

DEV-Front 2022. 8. 10. 22:18
반응형

1. 이건 일반적인 프로그래밍 패턴

// 1. 데이터를 받아와서 변수에 저장하고
var id = $.get('domain.com/id');

// 2. 저장한 변수를 이용해서 if문 이용
if(id === 'john'){
	var products = $.get('domain.com/products');
}

2. 자바스크립트 비동기패턴 때문에 콜백함수로 비동기처리 

$.get('domain.com/id', function(id){
	if( id === 'john'){
    	$.get('domain.com/products', function(){
        	// 항상 받아온 데이터를 콜백함수 안에서
            // 처리해야만 비동기처리가 가능했다.
        });
    }
});

3. promise 등장. 콜백함수 보다 코드의 흐름을 명확하게 알수있다.

function getId(){
	return new Promise(function(resolve, reject){
    	$.get('domain.com/id', function(id){
      		resolve(id),  	
        })
    })    
}

function getProduct(){
	// ...
}

function logProduct(){
	// ...
}

getid()
  .then(getProduct)
  .then(logProduct)
  .catch();

4. Async & Await 

- 어싱크 어웨이트는 자바스크립트 비동기 처리 패턴의 최신 문법.

- 위의 3번, 2번 Promise, collback 에서 주는 단점을 해결

- 자바스크립트의 비동기적 사고 방식에서 벗어나 동기적(절차적) 으로 코드 작성 가능

반응형