ES6的Promise链式异步编程方法

一.什么是Promise

Promise是异步编程的一种解决方案

那什么时候我们会来处理异步事件呢？

• 一种很常见的场景就是网络请求
• 我们封装一个网络请求的函数，但网络请求往往不能立即拿到结果，因此我们会开启一个异步编程，它不会影响页面的继续加载
• 而我们往往会传入另外一个函数，在数据请求成功时，将数据通过此函数回调。
• 所以如果只是一个简单的网络请求，那么这种方案不会带来太多麻烦
• 但是当网络请求非常复杂时，就会出现回调地狱（多层回调），代码难看且不容易维护
• 而Promise可以以一种优雅的方式解决回调地狱的问题

二.什么时候会用到Promise？

一般情况下是有异步操作时，使用Promise对这个异步操作进行封装

在执行传入的回调函数时，会传入两个参数resolve和reject，而它们本身又是函数

基本使用过程：

new Promise((resolve,reject) => {
	setTimeOut(() => { // 一个网络请求
	//成功时调用resolve
	resolve('Hello world')
	//失败时调用reject
	reject('error message')
	},1000)
}).then((data) = > { // 处理代码，与resolve对应
	console.log(data)
}).catch((err) => { // 处理代码，与reject对应
	console.log(err)
})

Promise是一个链式编程，它将网络请求和处理代码分离

三.Promise三种状态

首先，当我们开发中有异步操作时，就可以给异步操作包装一个Promise

异步操作之后会出现三种状态

• pending: 等待状态，比如正在进行网络请求，或者定时器没有到时间
• fulfill:满足状态，当我们主动回调了resolve时，就处于该状态，并且会回调.then()
• reject: 拒绝状态，当我们主动回调了reject时，就处于该状态，并且会回调.catch()

四.Promise的另外一种处理形式

将catch函数内部的内容也放在then函数中，即then函数中包括catch

new Promise((resolve,reject) => {
	setTimeOut(() => {
	resolve('Hello vuejs')
	reject('error message')
	},1000)
}).then(data => {
	console.log(data)
},err => {
	console.log(err)
})

五.Promise的链式调用

将每一步处理都放在一个新的Promise里

设计案例：
1.提出网络请求，返回aaa
2.处理 aaa+‘111’

new Promise((resolve,reject) => {
	setTimeOut(() => {
	resolve('aaa')
	}，1000)
}).then(res => {
	console.log(res,'每一层是10层代码处理')
	// 对结果进行第一次处理
	return new Promise((resolve) => {
	 resolve(res+'111')
	})
}).then(res => {
	console.log(res,'第二层的10层代码回调')
})

可以简写为：return Promise.resolve(res+'111'),继而再次简化为return res+'111' 两种方法

而对于reject也可以简写为：return Promise.reject('error'),仅一种简写方法

六.Promise的all使用方法

如果一个异步操作，需要两个以上的请求才能完成，此时我们考虑promise.all方法

promise.all([ // promise.all后面是数组
	new Promise((resolve,reject) => {
	setTimeOut(() => {
	resolve(data1)
	},2000)
	}),
	new Promise((resolve,reject) => {
	setTimeOut(() => {
	resolve(data2)
	},1000)
	})
]).then(results => { //results为数组
	console.log(results)
})