Promise 사용법 소개

Promise는 구조 함수로 자체에all,reject,resolve 등 몇 가지 눈에 익은 방법이 있고 원형에then,catch 등 방법이 있다.

1. 간단한 예:

		function runAsuync(){
			var p=new Promise(function(resolve,reject){
				setTimeout(function(){
					console.log(" ")
					resolve(" ");
				},2000)
			});
			return p;
		}
		runAsuync().then(function(data){
			console.log(data);
		})
// runAsync() then ，then ， ，
 runAsync resolve 。 ，
 2 ，   ；

Promise 구조 함수는 하나의 매개 변수(함수)를 수신하고 두 개의 매개 변수를 전송할 수 있습니다:resolve와reject는 각각 비동기 작업이 성공한 후의 리셋 함수와 비동기 작업이 실패한 후의 리셋 함수를 나타냅니다.
사실 이곳의 성공과 실패는 정확하게 묘사되지 않았다. 표준에 따르면
resolve: Promise 상태를 fullfiled로 설정합니다.
rejiect: Promise 상태를 rejected로 설정합니다.
참고: Promise를 사용할 때 일반적으로 함수에 배치하고 필요할 때 이 함수를 실행하면 됩니다 (왜냐하면 Promise는 스스로 실행하기 때문).

2. 체인식 조작의 용법

		function s1(){
			var p=new Promise(function(resolve,reject){
				setTimeout(function(){
					console.log("s1 ");
					resolve("s1 ");
				},2000)
			})
			return p;
		}
		function s2(){
			var p=new Promise(function(resolve,reject){
				setTimeout(function(){
					console.log("s2 ");
					resolve("s2 ");
				},2000)
			})
			return p;
		}
		function s3(){
			var p=new Promise(function(resolve,reject){
				setTimeout(function(){
					console.log("s3 ");
					resolve("s3 ");
				},2000)
			})
			return p;
		}
		function s4(){
			var p=new Promise(function(resolve,reject){
				setTimeout(function(){
					console.log("s4 ");
					resolve("s4 ");
				},2000)
			})
			return p;
		};

		s1().then(function(data){
			console.log(data);
			return s2();
		}).then(function(data){
			console.log(data);
			return s3();
		}).then(function(data){
			console.log(data);
			return s4();
		}).then(function(data){
			console.log(data);
			return "hello world";
		}).then(function(data){
			console.log(data);
			return " ， "
		}).then(function(data){
			console.log(data);
		})

Promise의 정수는'상태'입니다. 상태를 유지하고 전달하는 방식으로 리셋 함수를 제때에 호출할 수 있습니다. 이것은 callback 함수를 전달하는 것보다 간단하고 유연합니다.
then 방법에서 Promise 대상이 아닌 데이터를 직접 리턴할 수 있습니다. 뒤에 있는 then에서 데이터를 받을 수 있습니다.

3. reject의 사용

reject의 역할은 Promise의 상태를rejected로 설정하는 것입니다. 그러면 then에서 실패한 리셋 함수를 포착할 수 있습니다.

		function s1(){
			var p=new Promise(function(resolve,reject){
				setTimeout(function(){
					// console.log("s1 ");
					let num=Math.ceil(Math.random()*10);
					if(num > 5){
						resolve(num);
					}else{
						reject(" ");
					}
					
				},2000)
			})
			return p;
		}
		s1().then(
			function(data){// 
				console.log("resolve");
				console.log(data);
			},
			function(reason,data){// 
				console.log("reject");
				console.log(reason,data);
			}
		)

4. catch의 사용법

역할1:reject의 리셋 수신
역할2:resolve 리셋을 실행할 때 오류가 발생하면catch 방법을 실행하고 컨트롤러에서 오류를 보고하지 않으며 프로그램이 실행을 멈추지 않으며catch에서 오류 원인을 출력합니다.try/catch 조합 문장과 비슷한 용법

		function s(){
			return new Promise(function(resolve,reject){
				setTimeout(function(){
					var num=Math.floor(Math.random()*10);
					console.log(" num："+num)
					if(num<5){
						resolve(num);
					}else{
						reject(' ：'+num);
					}
				},2000);
			})
		}

		s()
		.then(
			function(data){
				console.log('resolve');
				console.log(data);
				console.log(w)
			},
			function(data){
				console.log("reject");
				console.log(data);
				// console.log(w)
			}
		)
		.catch(function(data){
			console.log("catch reject");
			console.log(data);
		})

5. all, race의 사용

참고:
all: 모든 것을 실행합니다.
적용 가능한 장면:
일부 게임의 힘든 소재는 비교적 많은 응용 프로그램으로 웹 페이지를 열 때 그림, 플래시 및 각종 정적 파일 등 필요한 각종 자원을 미리 불러옵니다.모든 것을 불러온 후에 페이지를 초기화합니다.
race: 가장 빨리 실행하는 사람, 누가 빨리 뛰는지, 누가 빨리 실행하는지
적용 장면: 시간 초과 판단 등

		function f1(){
			return new Promise(function(resolve,reject){
				setTimeout(function(){
					let num=Math.floor(Math.random()*10);
					if(true){
						resolve('f1:'+num);
					}else{
						reject('f1 ');
					}
				},1000)
			})
		}
		function f2(){
			return new Promise(function(resolve,reject){
				setTimeout(function(){
					let num=Math.floor(Math.random()*10);
					if(true){
						resolve('f2:'+num);
					}else{
						reject('f2 ');
					}
				},2000)
			})
		}
		function f3(){
			return new Promise(function(resolve,reject){
				setTimeout(function(){
					let num=Math.floor(Math.random()*10);
					if(true){
						resolve('f3:'+num);
					}else{
						reject('f3 ');
					}
				},400)
			})
		}

		// Promise
		// .all([f1(),f2(),f3()])
		// .then(function(results){
		// 	console.log(results);// results ， 
		// })
		
		Promise
		.race([f1(),f2(),f3()])
		.then(function(results){
			console.log(results);// 
		})

race 응용 장면:

// 
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);
});