【es6】 教程 Promise使用

Promise介绍和使用

是es6引入的异步编程的新解决方案
语义上属于构造函数，用来封装异步操作，并可以获取成功或失败的结果

实例化Priomise对象

//实例化对象，并接收一个参数，这个参数是个函数类型的值，并且，这个函数有两个形参（形参名随便起）
const p = new Promise(function(resolve,reject) {
				//里边封装一个异步操作
				setTimeout(()=>{
					//获取数据库的数据
					let data="数据库数据"
					// //只要调用完resolve函数之后，这个promise对象状态就变为成功
					resolve(data)
					let err="数据库读取失败"
					//只要调用完reject函数之后，这个promise对象状态就变为失败
					reject(err)
				},1000)
})
//成功以后,调用promise对象里面的then方法里面的第一个回调函数代码
//失败以后，调用promise对象里面的then方法里面的第二个回调函数代码
//then方法接收两个参数，两个参数都是函数形式，且每个函数都用一个形参
//成功的形参一般叫做value，失败的形参一般叫做reason
p.then((value)=>{
	console.log(value)//数据库数据
},(reason)=>{
	console.log(reason)//数据库读取失败
})

Promise封装读取文件

目的，多个文件不会形成回调地狱

	//普通版本
			//文件读取
			fs.readFile('文件路径',(err,data)=>{
				// 如果失败,则抛出错误
				if(err) throw err
				//如果没有出错，则抛出内容
				console.log(data.toString())
			})
			
		//使用Priomise封装
			const p = new Promise((resolve,reject)=>{
				fs.readFile('文件路径',(err,data)=>{
					// 如果失败,则抛出错误
					if(err) reject(err) 
					//如果没有出错，则抛出内容
					resolve(data)
					console.log(data.toString())
				})
			})
			p.then((value)=>{
				console.log(value)//成功数据
			},(reason)=>{
				console.log(reason)//失败数据
			})

Promise封装AJAX请求

MLHttpRequest（XHR）对象用于与服务器交互。通过 XMLHttpRequest 可以在不刷新页面的情况下请求特定 URL，获取数据。这允许网页在不影响用户操作的情况下，更新页面的局部内容

	//普通版本
		   //创建对象，该构造函数用于初始化一个 XMLHttpRequest 实例对象。在调用下列任何其他方法之前，必须先调用该构造函数，或通过其他方式，得到一个实例对象。
			const xhr =new XMLHttpRequest()
			// 2,初始化一个请求
			xhr.open("GET","https://xxx")
			// 3.发送请求。如果请求是异步的（默认），那么该方法将在请求发送后立即返回
			xhr.send()
			//绑定事件，处理响应的结果
			xhr.onreadystatechange=function(){
				if (xhr.readyState===4){
					if(xhr.status>=200&&xhr.status<=300){
						console.log(xhr.response)
					}else{
						console.log(xhr.status)
					}
				}
			}
			
	//使用Priomise封装
			const p = new Promise((resolve, reject) => {
			//创建对象，该构造函数用于初始化一个 XMLHttpRequest 实例对象。在调用下列任何其他方法之前，必须先调用该构造函数，或通过其他方式，得到一个实例对象。
			const xhr = new XMLHttpRequest()
			// 2,初始化一个请求
			xhr.open("GET", "https://xxx")
			// 3.发送请求。如果请求是异步的（默认），那么该方法将在请求发送后立即返回
			xhr.send()
			//绑定事件，处理响应的结果
			xhr.onreadystatechange = function() {
				if (xhr.readyState === 4) {
					if (xhr.status >= 200 && xhr.status <= 300) {
						resolve(xhr.response)
					} else {
						reject(xhr.status)
					}
				}
			}
			})
			p.then((value) => {
				console.log(value) //成功数据
			}, (reason) => {
				console.log(reason) //失败数据
			})

Promise.prototype…then方法

1，如果回调函数中返回的结果是非promise类型的属性，状态为成功，返回值为成功的值
2，如果函数中不写return，函数返回值是undefined，也是属于非promise类型，故状态也为成功
3，如果函数中返回的是 Promise对象，then方法中的状态取决于 Promise对象的状态， Promise对象成功then方法就成功，同理失败
4，如果是抛出错误，then方法也是失败的状态，返回值就是失败值
因为可以返回一个 Promise对象，所以可以链式调用，在then方法里面继续异步调用，可以

	//使用Priomise封装
				//使用Priomise封装
			const p = new Promise((resolve, reject) => {
				//里边封装一个异步操作
				setTimeout(() => {
					let data = "数据库数据"
					resolve(data)
					// let err = "数据库读取失败"
					// reject(err)
				}, 1000)
			})
			//then方法的返回结果是Promise对象，对象状态由回调函数的执行结果决定

			
			const result = p.then((value) => {
				console.log(value) //成功数据
				//1，如果回调函数中返回的结果是非promise类型的属性，状态为成功，返回值为成功的值
				//如果函数中不写return，函数返回值是undefined，也是属于非promise类型，故状态也为成功
				// return 1
				//2，如果函数中返回的是 Promise对象，then方法中的状态取决于 Promise对象的状态， Promise对象成功then方法就成功，同理失败
				// return new Promise((resolve,reject)=>{
				// 	reject('ok')
				// })
				//3，如果是抛出错误，then方法也是失败的状态，返回值就是失败值
				// throw new Error("出错")
			}, (reason) => {
				console.log(reason) //失败数据
			})
			console.log(result)
			//链式调用,状态也可以只写一个，杜绝回调地狱
			 p.then(value => {},reason=>{}).then(value => {},reason=>{})
				console.log(value) //成功数据
			})

Promise对象的catch方法

	const p = new Promise((resolve, reject) => {
				setTimeout(() => {
					// let data = "数据库数据"
					// resolve(data)
					let err = "数据库读取失败"
					reject(err)
				}, 1000)
			})
			p.then((value) => {
				console.log(value) //成功数据
			}, (reason) => {
				console.error(reason) //失败数据,报错方式一
			})
			//报错方式2
			p.catch((err) => {
				console.error(err) //失败数据	
			})

Promise封装读取多个文件，然后一起输出

		//使用Priomise封装
			const p = new Promise((resolve,reject)=>{
				fs.readFile('文件路径',(err,data)=>{
					// 如果失败,则抛出错误
					if(err) reject(err) 
					//如果没有出错，则抛出内容
					resolve(data)
					console.log(data.toString())
				})
			})
			p.then((value)=>{
				return new Promise((resolve,reject)=>{
					fs.readFile('文件路径1',(err,data)=>{
						resolve(data)
					})
				})
			}).then((value)=>{
				return new Promise((resolve,reject)=>{
					fs.readFile('文件路径2',(err,data)=>{
						//压入
						value.push(data)
						resolve(data)
					})
				})
			}).then((value)=>{
				console.log(value.join('/r/n'))
			})