ES6 Promise用法

ES6 Promise用法

1.什么是Promise
Promise 是异步编程的一种解决方案，Promise 是一个对象，从它可以获取异步操作的消息。Promise 提供统一的 API，各种异步操作都可以用同样的方法进行处理。很好的解决了地狱回调问题(避免了层层嵌套的回调函数)
通过console.dir(Promis)可以查看函数Promise属性：

其中，Promise自身包含all、race、reject、resovle等方法，原型中包含catch、then、finally等方法。
Promise对象代表一个异步操作，有三种状态：pending(进行中)、fulfilled(已成功)、reject(已失败)。只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。（resolved也可以指代fulfilled）
2.Promise基础使用方法：

var p = new Promise(function(resolve, reject){
})

Promise对象的参数为一个函数，并且传入resolve和reject两个参数，分别表示异步操作执行成功的回调函数和异步操作执行失败的回调函数。

• then方法：then中传了两个参数，第一个对应resolve的回调，第二个对应reject的回调

            function runAsync(){
				var p = new Promise(function(resolve,reject){
					setTimeout(function(){
						console.log('执行完成')
						if(true){
						resolve("执行了一个数据")
						}else{
						reject("数据错误")
						}
					},1000)
				})
				return p
			}
			runAsync().then(function(res){
				console.log(res)
			},function(err){
				console.log(err)
			})

• catch方法：由于Promise抛出错误具有冒泡性质，能够不断传递，会传到catch中，所以一般来说所有错误处理放在catch中，then中只处理成功的，同时catch还会捕捉resolved中抛出的异常。在执行resolve的回调时，如果抛出异常了，那么并不会报错卡死js，而是继续往下执行。

p.then((data) => {
    console.log('resolved',data);
})
.catch((err) => {
    console.log('rejected',err);
});

-all方法：Promise的all方法提供了并行执行异步操作的能力，并且在所有异步操作执行完后才执行回调。通过all方法可以实现打开网页时，预先加载需要用到的各种资源如图片、flash以及各种静态文件。所有的都加载完后，我们再进行页面的初始化。

let p = Promise.all([Promise1, Promise2])

p.then((data) => {
    //都成功才表示成功
})
.catch((err) => {
    //有一个失败，则都失败
});

-race方法：race方法：Promise.race([promise1,promise2])——参数是对象数组。以快为准，数组中所有的promise对象，有一个先执行了何种状态，该对象就为何种状态，并执行相应函数。
3.Promise对象实现ajax

var httpUrl = 'https://api.apiopen.top/getJoke?page=1&count=2&type=video'
			var ajaxP = getAjax(httpUrl)
			function getAjax(url){
				return new Promise(function(resolve,reject){
					//1.创建xhr
					var xhr = new XMLHttpRequest()
					//2.设置请求路径和请求方式
					var httpUrl = url
					xhr.open('GET',httpUrl)
					//3.监听相应的数据
					xhr.onreadystatechange = function(){
						if(xhr.status == 200 && xhr.readyState == 4){
							//处理获取到的数据
							resolve(xhr)
						}else if(xhr.readyState == 4 && xhr.status != 200 ){
							//处理失败的结果
							reject(xhr)
						}
					}
					//4.发送
					xhr.send()
				})
			}
			 
			ajaxP.then(function(res){
				console.log(res)
			}).catch(function(err){
				console.log(err)
			})