약속을 반환하는 재귀 JavaScript 함수를 호출하는 패턴을 다음과 같이 사용하는 경우의 차이점은 무엇입니까?

Question

다음 코드에서 100000 레코드 recursiveFnReturnsPromiseV1은 스택 외부 예외로 인해 실패하지만 recursiveFnReturnsPromiseV1은 잘 실행됩니다. 두 가지의 유일한 차이점은 약속이 재발되는 방식입니다. v1에서 재귀는 첫 번째 약속의 "그 다음"내에 있고 v2에서는 재귀가 원래 약속 자체 내에 있습니다. 차이점이 뭐야?

let aValues = Array(100000); 
 

 

 
recursiveFnReturnsPromiseV1(aValues, 0).then(function() { 
 
    let p = document.createElement('div'); 
 
    p.innerText = 'recursiveFnReturnsPromiseV1 finished'; 
 
    document.getElementById('v1').appendChild(p); 
 
}, function() { 
 
    let p = document.createElement('div'); 
 
    p.innerText = 'recursiveFnReturnsPromiseV1 failed'; 
 
    document.getElementById('v1').appendChild(p); 
 
}) 
 

 
recursiveFnReturnsPromiseV2(aValues, 0) 
 
    .then(function() { 
 
    let p = document.createElement('div'); 
 
    p.innerText = 'recursiveFnReturnsPromiseV2 finished'; 
 
    document.getElementById('v2').appendChild(p); 
 
    }, function() { 
 
    let p = document.createElement('div'); 
 
    p.innerText = 'recursiveFnReturnsPromiseV2 failed'; 
 
    document.getElementById('v2').appendChild(p); 
 
    }) 
 

 
function recursiveFnReturnsPromiseV1(pValues, ix) { 
 
    if (pValues.length <= ix) 
 
    return Promise.resolve(); 
 

 
    return new Promise(function(c, e) { 
 
    document.getElementById('v1').innerText = ix + 'v1' + Date.now(); 
 
    c(); 
 
    }).then(function() { 
 
    return recursiveFnReturnsPromiseV1(pValues, ++ix); 
 
    }) 
 

 

 

 
} 
 

 
function recursiveFnReturnsPromiseV2(pValues, ix) { 
 
    if (pValues.length <= ix) 
 
    return Promise.resolve(); 
 

 

 
    return new Promise(function(c, e) { 
 
    document.getElementById('v2').innerText = ix + 'v2' + Date.now(); 
 

 
    recursiveFnReturnsPromiseV2(pValues, ++ix).then(function() { 
 
     c(); 
 
    }, function(err) { 
 
     e() 
 
    }); 
 
    }) 
 
}

<div id='v1'></div> 
 
<div id='v2'></div>

Answer 1

는 Promise constructor antipattern을 벗겨, 대신 간단한 Promise.resolve을 사용할 수 있습니다. 귀하의 기능은 이제

function recursiveFnReturnsPromiseV1(pValues, ix) { 
    if (pValues.length <= ix) 
    return Promise.resolve(); 

    let p = document.createElement('div'); 
    p.innerText = ix + 'v1' + Date.now(); 
    document.getElementById('v1').appendChild(p); 

    return Promise.resolve().then(function() { 
    return recursiveFnReturnsPromiseV1(pValues, ++ix); 
    }) 
} 

function recursiveFnReturnsPromiseV2(pValues, ix) { 
    if (pValues.length <= ix) 
    return Promise.resolve(); 

    let p = document.createElement('div'); 
    p.innerText = ix + 'v2' + Date.now(); 
    document.getElementById('v2').appendChild(p); 

    return Promise.resolve(recursiveFnReturnsPromiseV2(pValues, ++ix)); 
} 

그것은 두 번째 기능은 스택 오버플로 지금 이유가 분명해야된다.

왜 첫 번째도 좋지 않은가요? 재귀 호출은 비동기then 콜백 내부에 있으므로 외부 호출이 반환 된 후 나중에 시작되어 새로운 호출 스택으로 시작됨을 의미합니다.