똑같은 삽질은 2번 하지 말자
Promise.all() 여러개의 비동기함수를 실행 본문
개요
Nuxt 의 fetch 훅을 이용해 fetch내에 복수의 비동기처리를 넣어 놓았는데, 제대로 실행이 안되는경우가 발생했다.
(fetch 메소드를 비동기화 하기 위해서 Promise를 리턴합니다.
↓ 밑의 공식문서를 읽어보면 fetch 메소드는 자체로 비동기화 처리)
하지만 복수의 비동기처리가 필요한 경우?
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되었기때문에 여기가 출력
});
'Javascript' 카테고리의 다른 글
Javascript ES6+ 에서 함수형 프로그래밍(리스트 순회, Iterable Iterator 프로토콜 ) (0) | 2021.08.16 |
---|---|
Javascript ES6+ 에서 함수형 프로그래밍(평가, 일급, 일차함수, 고차함수) (0) | 2021.08.16 |
내가 원하는 노드(태그)로 자동 스크롤 하는 방법 (0) | 2021.07.19 |
URI에서 한글인식이 안될때, 특수문자를 데이터로 넣을 경우 (0) | 2021.04.17 |
javasciprt || && 연산자의 활용방법 (0) | 2021.03.30 |
Comments