ES6 Promise 사용 설명

Promise는 구조 함수로 자신에게all,reject,resolve 등 몇 가지 낯익은 방법이 있고 원형에then,catch 등 똑같이 낯익은 방법이 있다.
다음 코드

var pTest = new Promise(function(resolve, reject){
    // 
    setTimeout(function(){
        console.log(' ');
        resolve(' ');
    }, 2000);
});

Promise의 구조 함수는 하나의 매개 변수를 수신하고 함수이며 두 개의 매개 변수를 전입합니다:resolve,reject는 각각 비동기 작업이 성공한 후의 리셋 함수와 비동기 작업이 실패한 후의 리셋 함수를 나타냅니다.사실 여기서'성공'과'실패'로 묘사하는 것은 정확하지 않다. 표준에 따르면resolve는 Promise의 상태를fullfiled로 하고,reject는 Promise의 상태를rejected로 한다.그러나 우리의 시작 단계에서는 먼저 이렇게 이해하고 나중에 개념을 세밀하게 연구할 수 있다.
위의 코드에서 우리는 set Timeout, 2초 후에'실행 완료'를 출력하고 Resolve 방법을 호출합니다.
실행 코드는 실행 완료 후 2초 후에 출력됩니다.주의!나는 단지 new가 대상을 호출하지 않았을 뿐, 우리가 전송한 함수는 이미 실행되었다. 이것은 주의해야 할 세부 사항이다.그래서 우리가 Promise를 사용할 때는 일반적으로 하나의 함수에 묶여 있고 필요할 때 이 함수를 실행한다. 예를 들어

function runAsync(){
    var p = new Promise(function(resolve, reject){
        // 
        setTimeout(function(){
            console.log(' ');
            resolve(' ');
        }, 2000);
    });
    return p;            
}
runAsync()

이때 너는 두 가지 의문이 있어야 한다.이런 함수를 포장하면 털실이 있습니까?2.resolve('실행 리셋 함수');이것은 마른 털입니까?
계속 얘기하자.우리가 포장한 함수 마지막에 프로미스 대상을 리턴합니다. 즉, 이 함수를 실행하면 프로미스 대상을 얻을 수 있습니다.Promise 객체에 then, catch 방법이 있는 거 기억나시죠?이것이 바로 강력한 점입니다. 아래의 코드를 보십시오.

runAsync().then(function(data){
    console.log(data);
    // 
    //......
});

runAsync () 의 반환에서 then 방법을 직접 호출합니다. then은 매개 변수를 수신합니다. 함수입니다. 그리고 runAsync에서resolve를 호출할 때 전송된 매개 변수를 가져옵니다.이 코드를 실행하면 2초 후에'실행 완료'를 출력하고 이어서'무슨 데이터'를 출력합니다.
이때 당신은 깨달았을 것입니다. 원래 then 안의 함수는 우리의 평상시 리셋 함수와 같은 뜻으로 runAsync라는 비동기적인 임무를 수행한 후에 실행될 수 있습니다.이것이 바로 Promise의 역할이다. 간단하게 말하면 원래의 리셋 쓰기 방법을 분리하여 비동기적인 조작이 끝난 후에 체인식으로 리셋 함수를 실행할 수 있다.
너는 거들떠보지도 않을 것이다. 그러면 소가 쫓아다니는 Promise가 이 정도야?리셋 함수를 봉하여 runAsync에 전해도 마찬가지 아닙니까? 이렇게:

function runAsync(callback){
    setTimeout(function(){
        console.log(' ');
        callback(' ');
    }, 2000);
}

runAsync(function(data){
    console.log(data);
});

효과도 똑같은데 프로미스를 왜 써.그럼 문제가 왔는데 여러 층의 조정이 있으면 어떻게 해야 합니까?만약callback도 비동기적인 조작이고 실행이 끝난 후에도 상응하는 리셋 함수가 필요하다면 어떻게 해야 합니까?콜백2를 하나 더 정의해서 콜백에 넣을 수는 없잖아요.한편, Promise의 장점은 then 방법에서 Promise 대상을 계속 쓰고 되돌려주고 then을 계속 호출해서 리셋 작업을 할 수 있다는 것이다.
체인식 조작의 용법 때문에 표면적으로 보면 Promise는 층층이 리셋하는 작법을 간소화할 수 있을 뿐이다. 실질적으로 Promise의 정수는'상태'이다. 상태를 유지하고 상태를 전달하는 방식으로 리셋 함수를 제때에 호출할 수 있다. 이것은 callback 함수를 전달하는 것보다 간단하고 유연하다.그래서 Promise를 사용하는 정확한 장면은 다음과 같다.

runAsync1()
.then(function(data){
    console.log(data);
    return runAsync2();
})
.then(function(data){
    console.log(data);
    return runAsync3();
})
.then(function(data){
    console.log(data);
});

이렇게 하면 순서대로 2초마다 모든 비동기 리셋의 내용을 출력할 수 있고,runAsync2에서resolve에 전송된 데이터는 다음then방법에서 얻을 수 있다.실행 결과는 다음과 같습니다.
runAsync1, runAsync2, runAsync3 이 세 함수는 모두 어떻게 정의되었는지 알아맞혀 보세요.그래, 바로 아래에 이렇게

function runAsync1(){
    var p = new Promise(function(resolve, reject){
        // 
        setTimeout(function(){
            console.log(' 1 ');
            resolve(' 1');
        }, 1000);
    });
    return p;            
}
function runAsync2(){
    var p = new Promise(function(resolve, reject){
        // 
        setTimeout(function(){
            console.log(' 2 ');
            resolve(' 2');
        }, 2000);
    });
    return p;            
}
function runAsync3(){
    var p = new Promise(function(resolve, reject){
        // 
        setTimeout(function(){
            console.log(' 3 ');
            resolve(' 3');
        }, 2000);
    });
    return p;            
}

then 방법에서 Promise 대상이 아닌 데이터를 직접 리턴할 수 있습니다. 뒤에 있는 then에서 데이터를 받을 수 있습니다. 예를 들어 저희가 위의 코드를 이렇게 수정했습니다.

runAsync1()
.then(function(data){
    console.log(data);
    return runAsync2();
})
.then(function(data){
    console.log(data);
    return ' ';  // 
})
.then(function(data){
    console.log(data);
});

그러면 출력은 이렇게 됩니다.
reject의 사용법은 여기까지입니다. "Promise가 무엇인지"에 대해 가장 기본적인 이해를 해야 합니다.그러면 ES6의 Promise에는 어떤 기능이 있는지 살펴보겠습니다.우리는resolve만 썼을 뿐, 아직reject를 사용하지 않았습니다. 그것은 무엇을 하는 것입니까?사실 우리 앞의 예는 모두'집행 성공'의 리셋만 있고 아직'실패'가 없는 경우이다. 리셋의 역할은 Promise의 상태를rejected로 설정하는 것이다. 그러면 우리는then에서 포착한 다음'실패'상황의 리셋을 실행할 수 있다.아래 코드를 보세요.

function getNumber(){
    var p = new Promise(function(resolve, reject){
        // 
        setTimeout(function(){
            var num = Math.ceil(Math.random()*10); // 1-10 
            if(num<=5){
                resolve(num);
            }
            else{
                reject(' ');
            }
        }, 2000);
    });
    return p;            
}

getNumber()
.then(
    function(data){
        console.log('resolved');
        console.log(data);
    }, 
    function(reason, data){
        console.log('rejected');
        console.log(reason);
    }
);

getNumber 함수는 비동기적으로 숫자를 가져오는 데 사용되며, 2초 후에 실행됩니다. 숫자가 5보다 작으면'성공'이라고 생각합니다.resolve를 호출하여 Promise의 상태를 수정합니다.그렇지 않으면 우리는 실패라고 생각합니다.reject를 호출하고 매개 변수를 전달하여 실패의 원인으로 삼습니다.
getNumber를 실행하고 then에 두 개의 매개 변수를 전송했습니다. then 방법은 두 개의 매개 변수를 받아들일 수 있습니다. 첫 번째는resolve에 대한 리셋, 두 번째는reject에 대한 리셋입니다.그래서 우리는 그들이 전송한 데이터를 각각 얻을 수 있다.이 코드를 여러 번 실행하면 다음 두 가지 결과를 무작위로 얻을 수 있습니다. 또는catch의 사용법은 Promise 대상이 then 방법 외에 또한catch 방법이 있다는 것을 알고 있습니다. 이것은 무엇에 쓰입니까?사실 이것은 then의 두 번째 매개 변수와 같습니다. 리젝트의 리셋을 지정하는 데 사용됩니다. 사용법은 다음과 같습니다.

getNumber()
.then(function(data){
    console.log('resolved');
    console.log(data);
})
.catch(function(reason){
    console.log('rejected');
    console.log(reason);
});

효과는 then의 두 번째 매개 변수에 적힌 것과 같다.그러나 Resolve의 리셋 (즉 위의 then의 첫 번째 파라미터) 을 실행할 때 이상을 던지면 (코드가 잘못되었습니다) js가 잘못 걸리지 않고 이catch 방법으로 들어갈 수 있습니다.다음 코드를 참조하십시오.

getNumber()
.then(function(data){
    console.log('resolved');
    console.log(data);
    console.log(somedata); // somedata 
})
.catch(function(reason){
    console.log('rejected');
    console.log(reason);
});

resolve의 리셋에서, 우리console.log(somedata);somedata라는 변수는 정의되지 않았습니다.만약 우리가 Promise를 사용하지 않는다면, 코드가 여기까지 실행되면 바로 컨트롤러에서 오류를 보고하고, 아래로 실행하지 않습니다.하지만 여기서 이런 결과를 얻을 수 있다.
즉, 캐치 방법에 들어갔고, 오류 원인을reason 매개 변수에 전달했다는 것이다.오류가 있는 코드라도 오류를 보고하지 않습니다. 이것은 우리의try/catch 문장과 같은 기능을 합니다.all의 사용법 Promise의 all 방법은 비동기 조작을 병행 실행하는 능력을 제공하고 모든 비동기 조작이 끝난 후에야 리셋을 실행합니다.우리는 여전히 위에서 정의한 runAsync1, runAsync2, runAsync3 세 가지 함수를 사용하고 아래의 예를 본다.

Promise
.all([runAsync1(), runAsync2(), runAsync3()])
.then(function(results){
    console.log(results);
});

약속으로.all에서 실행합니다. all은 그룹 파라미터를 수신합니다. 그 값은 최종적으로 Promise 대상으로 되돌아옵니다.이렇게 하면 세 개의 비동기 조작이 병행하여 실행되고, 그것들이 모두 실행된 후에야 then 안으로 들어갈 수 있다.그렇다면 세 개의 비동기 조작이 되돌아오는 데이터는 어디로 갔을까?모두 then 안에 있습니다. all은 모든 비동기적인 조작 결과를 하나의 그룹에 넣어then에게 전달합니다. 바로 위의results입니다.그래서 위 코드의 출력 결과는 다음과 같다.
all가 있으면 여러 개의 비동기 조작을 병행하고 하나의 리셋에서 모든 리셋 데이터를 처리할 수 있습니다. 멋지지 않습니까?한 장면은 이것을 사용하기에 매우 적합하다. 일부 게임류의 소재가 비교적 많은 응용 프로그램이 있다. 웹 페이지를 열 때 그림, 플래시와 각종 정적 파일 등 필요한 각종 자원을 미리 불러온다.모든 것을 불러온 후에 우리는 페이지의 초기화를 진행한다.
레이스의 용법all방법의 효과는 사실상'누가 느리게 뛰는지, 누구를 기준으로 리셋을 집행하는가'이다. 그러면 상대적으로 다른 방법인'누가 빨리 뛰는지, 누구를 기준으로 리셋을 집행하는가'가 있다. 이것이 바로 레이스 방법이다. 이 단어는 원래 경주의 뜻이다.race의 사용법은 all와 같습니다. 위의 runAsync1의 시간을 1초로 바꾸어 보겠습니다.

Promise
.race([runAsync1(), runAsync2(), runAsync3()])
.then(function(results){
    console.log(results);
});

이 세 가지 비동기 조작은 똑같이 병행하여 실행한다.결과적으로 너는 1초 후에 runAsync1이 이미 실행되었음을 알 수 있을 것이다. 이때 then 안의 것이 실행되었다.결과는 다음과 같다.
맞혔어?완전하지 않다, 그렇지?then의 리셋이 실행되기 시작했을 때,runAsync2 () 와runAsync3 () 은 멈추지 않고 다시 실행합니다.그래서 1초가 지나자 그들이 끝난 표지판을 출력했다.
이 레이스가 무슨 소용이 있을까요?사용 장면은 여전히 매우 많다. 예를 들어 우리는 레이스로 특정한 비동기적인 요청에 시간 초과 시간을 설정하고 시간 초과 후에 해당하는 조작을 수행할 수 있다. 코드는 다음과 같다.

// 
function requestImg(){
    var p = new Promise(function(resolve, reject){
        var img = new Image();
        img.onload = function(){
            resolve(img);
        }
        img.src = 'xxxxxx';
    });
    return p;
}

// ， 
function timeout(){
    var p = new Promise(function(resolve, reject){
        setTimeout(function(){
            reject(' ');
        }, 5000);
    });
    return p;
}

Promise
.race([requestImg(), timeout()])
.then(function(results){
    console.log(results);
})
.catch(function(reason){
    console.log(reason);
});

requestImg 함수는 비동기적으로 그림을 요청합니다. 주소를'xxxxx'라고 썼기 때문에 요청할 수 없습니다.timeout 함수는 5초의 시간을 끄는 비동기적인 조작이다.우리는 이 두 개의 Promise 대상으로 돌아가는 함수를 레이스에 넣기 때문에 그들 둘은 경주를 할 것이다. 만약 5초 안에 그림이 성공하면 then 방법에 들어가서 정상적인 절차를 실행할 것이다.만약 5초 동안 그림이 성공적으로 돌아오지 않으면timeout이 이기면catch에 들어가서'그림 요청 시간 초과'메시지를 보냅니다.실행 결과는 다음과 같습니다.