Promise(ES6)概念介绍

概念介绍：

实例：

一、Promise 的状态
    	Promise有3种状态：
	
	Pending：进行中
	Resolved(Fulfilled)：已完成
	Rejected：已失败
	
	Promise状态的改变只有两种：
	
	Pending --> Resolved
	Pending --> Rejected
	这意味着，一个Promise对象resolve之后，状态就一直停留在Resolved那里了，反过来reject也一样。
	这种特点的结果是，Promise对象的状态改变之后，你再给它添加回调函数，这个函数也会执行。
	这跟事件监听器很不一样 —— 你一旦错过某个事件，就没办法再捕获他了，除非这个事件再次发生。
	
二、 .then() 和 .catch()
	Promise构造器接受一个函数作为参数，这个函数有两个参数：resolve，reject，分别代表这个Promise实例成功之后的回调函数和失败之后的回调函数。
	举个例子：
	var promise = new Promise(function (resolve, reject) {
	    var a = 1
	    if (a == 1) {
	        resolve(a)
	    } else {
	        reject(error)
	    }
	})
	promise.then(function (value) {
	    console.log(value);
	}).catch(function (error) {
	    console.log(error);
	})
	
	// 输出：
	// 1
	
	不管是then方法还是catch方法返回的都是一个新的Promise实例，这意味着Promise可以链式调用then和catch，每一个方法的返回值作为下一个方法的参数：
	var promise = new Promise(function (resolve, reject) {
	    var a = 1
	    if (a === 1) {
	        resolve(a)
	    } else {
	        reject(error)
	    }
	})
	promise.then(function (value) {
	    console.log(value++)
	    return value
	}).catch(function (error) {
	    console.log(error)
	}).then(function (value) {
	    console.log(value++)
	})
	
	// 输出：
	// 1
	// 2
	
	如果其中一个then失败了，它后面第一个catch方法就会接受这个错误并执行，然后继续执行后面的方法，比如：
	var promise = new Promise(function (resolve, reject) {
	    resolve()
	})
	promise.then(function (value) { // 抛出错误
	    console.log(1 / x)
	}).then(function () { // 此方法不会执行
	    console.log('This "then" method will not happend!')
	}).catch(function (error) { // 接受错误，并打印出错误
	    console.log('Have an error: ',error)
	}).then(function () { // 此方法会执行
	    console.log('This "then" method  will happend!')
	})
	
	// 输出：
	/*
	Have an error:  ReferenceError: x is not defined
	    at /Users/linxueying/Library/Mobile 
	    ......
	This "then" method  will happend!
	*/
	
三、 Promise.resolve() 和 Promise.reject()
	两者都是是new promise（）的快捷方式。
	Promise.resolve(value)是下面代码的语法糖：
	    new Promise(function (resolve) {
	      resolve(value)
	    })
	
	所以
	    Promise.resolve(42).then(function(value){
	        console.log(value);
	    });
	    
	    // 等同于
	    
	    var promise = new Promise(function (resolve) {
	      resolve(42)
	    })
	    promise.then(function (value) {
	      console.log(value)
	    })
	
	Promise.reject(value)是下面代码的语法糖：
	    new Promise(function(resolve,reject){
	        reject(new Error("出错了"));
	    });
	
四、 Promise.all 和 Promise.race
	1. Promise.all()
	接收一个Promise对象的数组作为参数，当这个数组里的所有Promise对象全部变为resolve的时候，该方法才resolve。
	如果其中一个Promise对象为reject的话，则该方法为reject。
	比如：
	// `delay`毫秒后执行resolve
	function timerPromisefy(delay) {
	    return new Promise(function (resolve) {
	        setTimeout(function () {
	            resolve(delay);
	        }, delay);
	    });
	}
	// 当数组中所有Promise对象被resolve之后，该方法才返回
	Promise.all([
	    timerPromisefy(1),
	    timerPromisefy(32),
	    timerPromisefy(64),
	    timerPromisefy(128)
	]).then(function (value) {
	    console.log(value);    
	});
	
	//输出： [ 1, 32, 64, 128 ]
	
	2. Promise.race()
	使用方法和Promise.all一样，接收一个Promise对象数组为参数。
	只要其中一个Promise对象变为Resolved或者Rejected状态，该方法返回，进行后面的处理。
	看例子：
	// `delay`毫秒后执行resolve
	function timerPromisefy(delay) {
	    return new Promise(function (resolve) {
	        setTimeout(function () {
	            resolve(delay);
	        }, delay);
	    });
	}
	// 任何一个promise变为resolve或reject 的话程序就停止运行
	Promise.race([
	    timerPromisefy(1),
	    timerPromisefy(32),
	    timerPromisefy(64),
	    timerPromisefy(128)
	]).then(function (value) {
	    console.log(value);    
	});
	
	// 输出： 1
	
五、 用Promise封装AJAX代码
	原生的AJAX代码真的是又臭又长了，可以用Promise把它们封装起来，每次使用只需要调用一下封装好的函数就可以了：
	function get(url) {
	    // 返回一个Promise对象
	    return new Promise(function (resolve, reject) {
	        // 创建一个XHR对象
	        var req = new XMLHttpRequest() || new ActiveXObject('Microsoft.XMLHTTP')
	        req.open('GET', url, true)
	        // 使用req.onload监听req的状态
	        req.onload = function () {
	            if (req.readyState == 4 && req.status == 200) {
	                resolve(req.response)
	            } else {
	                reject(Error(req.statusText))
	            }
	        }
	
	        // 网络错误
	        req.onerror = function () {
	            reject(Error("Network Error"));
	        };
	
	        // 发送请求
	        req.send();
	    });
	}
	get("http://something").then(function (response) {
	    console.log(response);
	}).catch(function (error) {
	    console.log(error);
	})
	
	之后想要使用AJAX，只需要一个简单的get()函数就可以搞定啦！
	有一个地方需要注意的是，在get()函数里面调用了req.onload，之前为什么这里不使用req.onreadystatechange呢?
	上面已经说过，Promise的状态的改变是单向的，一次性的，一旦改变，状态就会凝固了，而我们代码中判断状态的片段是这样的：
	if (req.readyState == 4 && req.status == 200) {
	        resolve(req.response)
	} else {
	        reject(Error(req.statusText))
	 }
	
	我们在if...else语句中改变了Promise的状态，也就是req.onreadystatechange只会被调用一次。那么如果用req.onreadystatechange的话，会出现什么结果呢？
	我们永远只能得到error～因为req的state一旦改变，req.onreadystatechange就会被调用，所以我们永远只能捕捉到req的state为2的时候！
	不得不说Promise真的很有趣！

作者：Lxylona
链接：https://www.jianshu.com/p/82237a7ca6e5
来源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。