똑같은 삽질은 2번 하지 말자

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

Javascript

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

곽빵 2021. 8. 4. 23:04

개요

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

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

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

 

API: fetch 메소드 - Nuxt.js

fetch 메소드 fetch 메소드는 페이지가 랜더링되기 전에 데이터를 스토어에 넣기위해서 사용합니다. 컴포넌트의 데이터를 세팅하지 않는 점을 빼고는 data 메소드와 비슷합니다. fetch 메소드가 만약

develop365.gitlab.io

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

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되었기때문에 여기가 출력
});
Comments