Promise的详解----未完待续

Promise的详解

一、Promise的理解与使用

1.1 Promise是什么？

抽象理解：
① Promise是一门新的技术
② Promise是JS中异步编程的新解决方案 【备注：旧的方案则是完全通过回调函数来解决】

//1、旧的方案
function ajax(callback) {
	const xhr = new XMLHttpRquest();
	xhr.open("get","./index.html");
	xhr.send();
	xhr.onload = function(callback) {
		//通过回调函数，返回响应数据到外部
		callback(xhr.response);
	}
}
ajax(function(data){
	//弹出响应数据
	alert(data);
});
ajax(function(data){
	//输出响应数据
	console.log(data);
});

//2、Promise方案
function ajax(){
	//函数返回Promise
	return new Promise(function(resolve){
		const xhr = new XMLHttpRequest();
		xhr.open("get","./index.html");
		xhr.send();
		xhr.onload = function(){
			//状态为成功，值为xhr.response
			resolve(xhr.response);
		}
	})
}
//根据Promise获取状态，根据成功状态，将成功值输出
ajax().then(value=>{
	//通过value返回获取的响应数据,输出数据
	console.log(value);
})
ajax().then(value=>{
	//通过value返回获取的响应数据,弹出数据
	alert(value);
})

具体的表达：
① 从语法上来说：Promise是一个构造函数

//通过Promise构造函数，创建实例化对象p
const p = new Promise(()=>{});

② 从功能上来说：Promise对象用来封装异步操作，并可以获取其成功/失败的值

function ajax(url){
	return new Promise(function(resolve,reject){
		const xhr = new XMLHttpRequest();
		xhr.open("get",url);
		xhr.send();
		xhr.onload(){
			resolve(xhr.response);
		}
		xhr.onload(){
			reject(xhr.response);
		}
	})
}
//这里参数填写的是路径，我是直接写入了当前页面，响应的数据是当前html页面的代码
ajax("index.html").then(value=>{
	console.log(value);
},readson=>{
	console.log(readson);
})

以上代码，整体思路就是，通过调用ajax函数，返回Promise回调函数的状态，通过状态去执行对应状态下的语句，最后输出响应数据。

1.2 Promise的状态

Promise的状态有三种：pending(初始状态)、fulfilled(成功状态)、rejected(失败状态)。
说明：
① 只能通过pending状态>>>fulfilled或rejected状态，且一个Promise对象只能变更一次
② 无论变更为成功还是失败，都将会有个结果数据
③ 成功的结果数据一般为value，失败的结果数据一般为reason
④ Promise是一个构造函数，必须要接收一个参数——同步的回调函数(称为执行构造器executor)

//实例化Promise，并将实例化的结果赋值给常量p，常量p可以称为Promise的实例
const p = new Promise(function(){

})
console.log(p);//状态为pending(初始化),值为undefined

//pending>>>fulfilled：通过调用resolve方法
const p = new Promise((resolve,reject)=>{
	resolve(1);
})
console.log(p);//状态：fulfilled,值：1

//pending>>>rejected：
//第一种：通过调用reject方法
const p = new Promise((resolve,resject)=>{
	reject(100);
})
console.log(p);//状态：rejected,值：100

//第二种：通过抛出异常
const p = new Promise(()=>{
	//制造一个异常
	const m = "xixi";
	m();
})
console.log(p);//状态：rejected,值：TypeError: m is not a function

const p = new Promise(()=>{
	//抛出异常
	throw "异常"；
})
console.log(p);//状态：rejected,值：异常

//一个Promise对象，状态只可修改一次
const p = new Promise((resolve,reject)=>{
	resolve(100);
	reject(200);
})
console.log(p);//状态为：成功,值：100

1.3 Promise的基本使用

Promise中的执行器函数，为同步回调函数

//同步回调，先输出aaaa，然后输出bbbb
const p = new Promise((resolve,reject)=>{
	console.log("aaaa");
})
console.log("bbbb");

1.3.1 基本流程：

then方法接收两个参数，参数类型均是函数(异步回调函数)
第一个参数称为成功回调函数，当数据状态变更为成功时，调用此函数，接收的值即是成功的值
第二个参数称为失败回调函数，当数据状态变更为失败时，调用此函数，接收的值即是失败的值
注意：then方法为Promise原型上的方法。

const p = new Promise((resolve,reject)=>{
    // resolve(100);
    reject(10);
	})
	p.then(function(value){
	    console.log("成功回调",value);
	},function(reason){
	    console.log("失败回调",reason);
	})
}

1.3.2 基于定时器的异步

执行器函数中，往往需要处理异步编程，状态可以异步更改

const p = new Promise((resolve,reject)=>{
	//通过定时器回调函数，进行异步操作
	setTimeout(()=>{
		reject(100);
	},1000)
})
p.then(value=>{
	console.log("成功回调",value);
})
p.then(readson=>{
	console.log("失败回调",readson);
})

1.3.3 Promise的优点

① 指定回调函数的方式更加灵活 （旧版：必须在启动异步任务前指定回调函数）
② 支持链式调用，可以解决回调地狱问题
回调地狱：回调函数嵌套调用, 外部回调函数异步执行的结果是嵌套的回调执行的条件
回调地狱的弊端：①不便于阅读；②不便于异常处理
回调地狱的解决方案：① Promise的链式调用；②async/await

二、回调函数

特点：①自己定义的；②不是自己调用；③会在特定的情况下调用

2.1 同步回调

说明：立即执行，直到全部执行完才结束，不会放到回调队列中
在Promise中excutor函数为同步回调函数

const arr = [1,2,3,4];
//map的参数为一个回调函数
arr.map(num=>{
	console.log(num);
	return num+1
});
console.log("over");

const p = new Promise((resolve,reject)=>{
	//只会执行首个，后面的不执行
	resolve(1);//表示成功状态，值为1
	reject(2);//表示失败状态，值为2
})
console.log(p);//成功，值为1

2.2 异步回调

说明：不会立即执行，会放到回调队列中去排队执行
定时器回调、ajax回调 、Promise的成功|失败的回调等，都属于异步回调

//定时器的回调
setTimeout(()=>{
	console.log("timeout");
})
console.log("over");

//ajax请求中的回调函数
const xhr = new XMLHttpRequest();
xhr.open("get","./index.html");
xhr.send();
//onload事件函数，在请求发送并得到响应后执行
xhr.onload = function(){
    console.log(xhr.response);
}
console.log("over");

//Promise中的回调函数
new Promise((resolve,reject)=>{
	//返回成功状态，值为1
	resolve(1);
	//根据实例化对象最终得到的状态，判断要执行成功或失败函数
}).then(value=>{
	console.log(value);//返回值
},readson=>{
	console.log(readson);//返回值
})

三、Promise中的API

1. 函数

//（1）executor函数：执行器>>>(resolve,reject)=>{}
new Promise((resolve.reject)=>{
	console.log("执行器，同步执行");
})

//（2）resolve函数：内部定义成功时，调用的函数 value=>{}
const p = new Promise((resolve,reject)=>{
	resolve(100);
})
p.then(value=>{
	// 成功回调函数：resolved函数
	console.log(value);
})

//（3）reject函数：内部失败时，调用的函数  readson=>{}
const p = new Promise((resolve,reject)=>{
	reject(200);
}).then(value=>{

},readson=>{
	// 失败回调函数，rejected函数
	console.log(readson);
})

说明：executor会在Promise内部立即同步调用,异步操作在执行器中执行

//1.同步调用
const p = new Promise((resolve,reject)=>{
	console.log(1);
})
console.log(2);
//执行结果为 1  2

//2.执行器函数中往往处理异步行为
new Promise((resolve,reject)=>{
 setTimeout(()=>{
     resolve(100)
 })
})

2. 方法

1、Promise.prototype.then方法：有两个参数（onResolved, onRejected）
(1) onResolved函数: 成功的回调函数 (value) => {}
(2) onRejected函数: 失败的回调函数 (reason) => {}
说明: 指定用于得到【成功value】的成功回调和用于得到【失败reason】的失败回调，返回一个新的promise对象

// 1- 最基本的
const p = new Promise((resolve,reject)=>{
	resolve(100);
})
	p.then(function(value){
 	//onResolved函数：当状态更改为成功后调用,value为成功值
},function(reason){
 	//onRejected函数：当状态更改为失败后调用,reason为失败值
})

// 2- then函数返回的是一个新的Promise对象
// then接收的成功回调或失败回调为异步调用。
// p.then的返回结果是一个新的Promise,Promise的状态以及值受成功或失败的返回值的影响！！！！
// 当成功或失败回调函数返回的是一个非Promise——状态为成功的Promise实例，值为返回值。
// 当成功或失败回调函数返回的是一个Promise——Promise实例状态以及值，同成功或失败回调返回的Promise相同。
// 当成功或失败回调函数有异常,那么得到的是Promise状态为失败，值为异常信息
{
	// 2-1 p的状态为fulfilled,值为100,p2的状态以及值要看成功回调函数的返回值
	const p = new Promise((resolve,reject)=>{
	 	resolve(100);
	})
	// p2的值为p.then的返回结果
	const p2 = p.then(value=>{
	 	console.log("成功回调",value);
	})
	console.log(p2);// 成功Promise实例，值为undefined
}
{
	// 2-2 得到的p2是一个新的promise
	const p = new Promise((resolve,reject)=>{
	 	resolve(100);
	})
	const p1 = new Promise((resolve,reject)=>reject(2000));
	// p2的值为p.then的返回结果
	const p2 = p.then(value=>{
	// 返回一个失败的Promise
		return p1
	})
	console.log(p2,p2===p1);// 失败Promise实例，值为2000  false
}
{
     // 2-3 得到的p2是一个新的promise
     const p = new Promise((resolve,reject)=>{
      	reject(100);
     })
     // p2的值为p.then的返回结果
     const p2 = p.then(value=>{
     // 返回一个失败的Promise
      	return 1
     },reason=>{
      	return new Promise((resolve,reject)=>reject(1000))
     })
     console.log(p2);// 失败Promise实例，值为1000
 }