简单理解Promise

1.回调地狱

完成一个事件后才能进行下一个事件,函数体不断嵌套.

	function f1(f) {
		console.log("f1");
		f();
	}

	function f2(f) {
		console.log("f2");
		f();
	}

	function f3(f) {
		console.log("f3");
		f();
	}

	function f4() {
		console.log("f4");
	}

	f1(function(){
		f2(function(){
			f3(f4);
		})
	})

上面的代码可以理解为:

	f1(f);
	function f(){
		f2(ff);
	}
	function ff(){
		f3(f4);
	}//顺序输出f1 f2 f3 f4

2.Promise改写

	function f1() {
		let p = new Promise(function(success, failed) {
			console.log("f1");
			success();
		});
		return p;
	}

	function f2() {
		let p = new Promise(function(success, failed) {
			console.log("f2");
			success();
		});
		return p;
	}

	function f3() {
		let p = new Promise(function(success, failed) {
			console.log("f3");
			success();
		});
		return p;
	}

	function f4() {
			console.log("f4");
	}
	f1().then(f2).then(f3).then(f4); //顺序输出f1 f2 f3 f4

3.异步调用

	function f1(f){
		console.log("f1");
		setTimeout(function(){
			console.log("f11");
		},4000);
		f();
	}
	function f2(f){
		console.log("f2");
		setTimeout(function(){
			console.log("f22");
		},3000);
		f();
	}
	function f3(f){
		console.log("f3");
		setTimeout(function(){
			console.log("f33");
		},2000);
		f();
	}
	function f4(){
		console.log("f4");
		setTimeout(function(){
			console.log("f44");
		},1000);
	}
	f1(function(){
		f2(function(){
			f3(f4);
		})
	})
	function f1() {
		console.log("f1");
		let p = new Promise(function(success, failed) {
			setTimeout(function() {
				console.log("f11");
			}, 4000);
			success();
		});
		return p;
	}

	function f2() {
		console.log("f2");
		let p = new Promise(function(success, failed) {
			setTimeout(function() {
				console.log("f22");
			}, 3000);
			success();
		});
		return p;
	}

	function f3() {
		console.log("f3");
		let p = new Promise(function(success, failed) {
			setTimeout(function() {
				console.log("f33");
			}, 2000);
			success();
		});
		return p;
	}

	function f4() {
		console.log("f4");
		setTimeout(function() {
			console.log("f44");
		}, 1000);
	}
	f1().then(f2).then(f3).then(f4);
	//顺序输出f1 f2 f3 f4 
	//4个延时定时器同时启动 1s后输出f4,接着1s输出f3..至f1.

4.Promise解决了什么问题?

• 1.函数的嵌套调用;
• 2.处理多个异步请求并发.

5.正式介绍Promise

1.Promise的概念

Promise 对象是 JavaScript 的异步操作解决方案，为异步操作提供统一接口。Promise 可以让异步操作写起来，就像在写同步操作的流程，而不必一层层地嵌套回调函数。

Pormise的核心概念，只是为了将嵌套的调用方法改为平级调用.

2.Promise 构造函数

let p = new Promise(function (resolve, reject) {
  // ...
  if (/* 异步操作成功 */){
    resolve(value);
  } else { /* 异步操作失败 */
    reject(error);
  }
});

Promise实例生成以后，可以用then方法分别指定resolved状态和rejected状态的回调函数。(value和error可有可无)

p.then(function(value) {
  // success
}, function(error) {
  // failure
});

then方法可以接受两个回调函数作为参数。第一个回调函数是Promise对象的状态变为resolved时调用，第二个回调函数是Promise对象的状态变为rejected时调用。其中，第二个函数是可选的，不一定要提供。这两个函数都接受Promise对象传出的值作为参数。

3.Promise.then的链式操作

Promise对象的then方法返回一个新的Promise对象（注意，不是原来那个Promise实例），因此可以通过链式调用then方法。

  let p = new Promise(function(resolve,reject){
		resolve();
	});
	p.then(function(){
		return 123;
	}).then(function(num){
		console.log(num);
	});//输出123

4.Promise.prototype.catch捕捉错误

Promise.prototype.catch()就是.then(null, rejection)或.then(undefined, rejection)

	new Promise(function(resolve,reject){
		reject();
	}).catch(function(){
		console.log("出现错误");
	});//输出"出现错误"

5.Promise.prototype.finally

finally()方法用于指定不管 Promise 对象最后状态如何，都会执行的操作

	 let p = new Promise(function(resolve,reject){
		 if(3>2){
			 resolve();
		 }else{
			 reject();
		 }
		
	});
	p.then(function(){
		console.log("对了!");
	},function(){
		console.log("错了!");
	}).finally(function(){
		console.log("结束!");
	});//输出 对了 结束

6.Promise.all

Promise.all()方法接受一个数组作为参数，p1、p2、p3都是 Promise 实例,只有p1,p2,p3都成功的情况下,才会触发promise.all的方法,有一个没成功就不会执行.

	let p1 = new Promise(function(resolve, reject) {
		console.log("p1执行完了");
		resolve();
	});
	let p2 = new Promise(function(resolve, reject) {
		console.log("p2执行完了");
		resolve();
	});
	let p3 = new Promise(function(resolve, reject) {
		console.log("p3执行完了");
		resolve();
	});
	Promise.all([p1,p2,p3]).then(function(){
		console.log("全部都执行完了");//输出全部都执行完了
	});

7.Promise.race

Promise.race()方法同样是将多个 Promise 实例，只要p1、p2、p3之中有一个实例率先改变状态，p的状态就跟着改变。

	let p1 = new Promise(function(resolve, reject) {
		console.log("p1开始执行");
		setTimeout(function(){
			resolve("p1最快");
		},2000);
	});
	let p2 = new Promise(function(resolve, reject) {
		console.log("p2开始执行");
		setTimeout(function(){
			resolve("p2最快");
		},1000);
	});
	let p3 = new Promise(function(resolve, reject) {
		console.log("p3开始执行");
		setTimeout(function(){
			resolve("p3最快");
		},3000);
	});
	Promise.race([p1,p2,p3]).then(function(text){
		console.log(text);//输出p2最快
	});

8.Promise.resolve([value])

Promise.resolve()将现有对象转为 Promise 对象

	Promise.resolve(123).then(function(num){
		console.log(num);
	})//输出123

9.Promise.reject([value])

	Promise.reject().catch(function(){
		console.log("错了");
	})//输出 错了

6.Promise与Ajax

	function ajax(type,url,isAync,data){
		let xhr;
		if(window.ActiveXObject){
			xhr = new ActiveXObject("Microsoft.XMLHttp");
		}else{
			xhr = new XMLHttpRequest();
		}
		type = type.toLowerCase();
		if(type == "get"){
			let urlParam = url;
			if(data != ""){
				urlParam += "?" + data;
			}
			xhr.open(type,urlParam,isAync);
			xhr.send();
		}else{
			xhr.open(type,url,isAync);
			xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
			xhr.send(data);
		}
		let p = new Promise(function(success,failed){
			xhr.onreadystatechange = function(){
				if(xhr.readyState == 4 && xhr.status == 200){
					success(xhr.responseText);
				}
			}
		});
		return p;
	}
	ajax("post","01ajaxFun.php",true,"userName=laowang&userPwd=666",).then(function(resText){
		console.log(resText);   //输出laowang 666
	});

function ajax(type,url,isAync,data,callBack){
	let xhr;
	if(window.ActiveXObject){
		xhr = new ActiveXObject("Microsoft.XMLHttp");
	}else{
		xhr = new XMLHttpRequest();
	}
	type = type.toLowerCase();
	if(type == "get"){
		let urlParam = url;
		if(data != ""){
			urlParam += "?" + data;
		}
		xhr.open(type,urlParam,isAync);
		xhr.send();
	}else{
		xhr.open(type,url,isAync);
		xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
		xhr.send(data);
	}
	xhr.onreadystatechange = function(){
		if(xhr.readyState == 4 && xhr.status == 200){
			callBack(xhr.responseText); 
		}
	}
}

<?php
	$name = $_REQUEST["userName"];
	$pwd = $_REQUEST["userPwd"];
	echo $name." ".$pwd;
?>

---

参考:

• 1.一节课彻底弄懂promise、async、await（三）终局之战
• 2.阮一峰es6入门