Promise 详解与用法

一、什么是Promise？

Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。
所谓promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。

当异步操作执行成功时执行resolve 函数
当异步操作执行失败时执行reject 函数

当resolve 函数 返回的结果 通过 then方法接收
then方法中 参数1：第一个回调函数 形参负责接收成功的数据
参数2：第二个回调函数 形参负责接收失败的数据
注意：必须设置接收的形参 形参名字妖有意义

---

二、Promise 的三种状态

1. 等待：pending
2. 成功：fullfilled（resolved）
3. 失败：reject

---

三、Promise.all()、Promise.race()区别？

两者都是可以同时调用多个promise实现，Promise.all可以将多个实例组装成一个新的实例，成功的时候返回一个成功数组，失败的时候则返回最先被reject失败状态的值；其中有一个实例不成功则返回reject.race()是赛跑的意思，也就是说Promise.race([p1, p2, p3])里面的结果哪个获取的快，就返回哪个结果，不管结果本身是成功还是失败。

---

四、Promise.all()，一个失败后，其他的还返回吗？

不会返回,promise.all()失败的时候只返回最先被reject失败状态的那个实例对象的值。

---

五、如何创建Promise对象

var promise = new Promise((resolve,reject)=>{
	// ajax请求  计时器  --- 异步操作
	// 初始化peromise状态 ：pending：初始化
	console.log(1111)
	// 启动异步任务
	setTimeout(function(){
		console.log(33333)
		resolve("1234")
		reject("4567")
	},1000)
})

---

六、Promise两种接收方法

promise.then((data)=>{
	console.log(data)
	console.log("成功")
},(err)=>{
	console.log(err)
	console.log("失败")
})

promise.then((data)=>{
	console.log(data)
	console.log("成功")
}).catch((err)=>{
	console.log(err)
	console.log("失败")
})

---

七、Promise.all() 的使用方法

var promise1 = Promise.resolve(3);
var promise2 = 42;
var promise3 = new Promise(function(resolve, reject) {
	setTimeout(resolve, 100, 'foo');
});

Promise.all([promise1, promise2, promise3]).then(function(values) {
	console.log(values);
	// 结果：3 42 foo
});
let test = {name : 'lei'}
// 获取对象的自身的属性
test.name            //"lei"
console.log(test["name"] ,'name' in test);
// 结果：lei true

---

八、Promise的封装

promise 内部封装异步操作 – ajax请求
作用：解决回调地狱
promise对象实现了 ajax的数据请求

1. 创建promise对象
2. 异步任务 – ajax
   1. 创建对象
   2. 打开浏览器输入网址
   3. 根据状态码执行对应操作
   4. 发送请求
3. url地址的改变 — 函数中的形参

function proAjax(url){
	let p = new Promise((resolve,reject)=>{
		// 初始化状态 -- pending
		// 启动异步任务
		// 1- 创建对象
		let xhr = new XMLHttpRequest()
		// 2- 打开浏览器输入网址
		xhr.open("GET",url)
		// 3- 根据状态码执行对应操作
		xhr.onreadystatechange = function(){
			if(this.readyState == 4){
				if(this.status == 200){
					resolve(this.responseText)
				}else{
					reject("请求失败")
				}
			}
		}
		// 4- 发送请求
		xhr.send()
	})
	return p
}

proAjax("url地址")
.then((data)=>{
	console.log(data)
	console.log("==============")
	proAjax("url地址")
	.then((data)=>{
		console.log(data)
	},(err)=>{
		console.log(err)
	})
},(err)=>{
	console.log(err)
})

---

总结：

以上就是 ES6中新增的Promise的详解与用法，不懂得也可以在评论区里问我或私聊我询问，以后会持续发布一些新的功能，敬请关注。
我的其他文章：https://blog.csdn.net/weixin_62897746?type=blog