Promise.all() 여러개의 비동기함수를 실행

개요

Nuxt 의 fetch 훅을 이용해 fetch내에 복수의 비동기처리를 넣어 놓았는데, 제대로 실행이 안되는경우가 발생했다.

(fetch 메소드를 비동기화 하기 위해서 Promise를 리턴합니다.

↓ 밑의 공식문서를 읽어보면 fetch 메소드는 자체로 비동기화 처리)

API: fetch 메소드 - Nuxt.js

하지만 복수의 비동기처리가 필요한 경우? 

return을 한다해도 하나만 리턴? 그럼 다른 한쪽이 실행안되는 경우가 발생할 수 있으므로

Promise.all() 을 이용해 싸잡아 실행한뒤 return Promise.all() 을 해주자

 

Promise.all()

Promise.all()는 () 안에 들어간 비동기 함수or 일반함수들을 전부 실행하는 메소드로써 일반함수도 Promise(fulfilled) 된 

형태로 반환 시킨다. 하지만 중간에 하나가 (rejected)되면 그 시점에서 처리가 종료된다.

 

보통 비동기함수를 여러개 실행시킬때, 쓰는 친구인데 비동기 함수를 여러개 실행하다보면 한번씩 밑에 선언된 친구가 

먼저 실행됨으로써 선행 실행되야할 친구가 실행도 안되는 꽤 찾기 어려운 버그가 발생 할 수 있다.

 

 

Promise.all()을 쓴 예제코드(fulfilled)

// Promise (1)
var promise1 = new Promise( function( resolve, reject ) {
	setTimeout( function () {
		resolve( "3초지남" ) ;
	}, 3000 ) ;
} ) ;

// Promise (2)
var promise2 = new Promise( function( resolve, reject ) {
	setTimeout( function () {
		resolve( "1초지남" ) ;
	}, 1000 ) ;
} ) ;

// Promise (3)
var promise3 = new Promise( function( resolve, reject ) {
	setTimeout( function () {
		resolve( "2초지남" ) ;
	}, 2000 ) ;
} ) ;

Promise.all( [ promise1, promise2, promise3 ] ).then( function ( message ) {
	console.log( message ) ; // 출력 => "3초지남 1초지남 2초지남" 순으로 출력
} ) ;

 

(rejected)

var promise3 = new Promise( function( resolve, reject ) {
	setTimeout( function () {
		reject( "실패!!" ) ;
	}, 2000 ) ;
} ) ;

Promise.all( [ promise1, promise2, promise3 ] )
.then(function ( message ) {
	console.log( message ); // 전부 fulfilled 되지 않았기때문에 실행 안됨
})
.catch(function ( reason ) {
	console.log( reason ); // rejected되었기때문에 여기가 출력
});