Promise/async 与es5总结

• ES5正常写法
  • getAjax(url, (res) => {})
• Promise
  • get(url).then((res) => {})
• async await
  • (async () => { let res = await get(url) })()

ES5与promise与async总结：

• ES5 写法和promise写法，主要区别在写法不同，promise可以让回调函数在.then的函数里执行
• async和promise的写法在底层编译之后会自动转化成promise写法

Promise 实现原理

function fn(resolve, reject) {
	setTimeout(() => {
		if(true) { // 条件自己赋予
			resolve()
		}else {
			reject()
		}
	})
}
var p1 = new LcPromise(fn)
p1.then(function(res){
	document.body.style.background="greenyellow"
	console.log("成功的事")
	console.log(res)
})
p1.catch(function(res){
	document.body.style.background="blue"
	console.log("失败的事")
	console.log(res)
})

• 传入一个事件函数，不调用，当触发时，才调用
• p1 Promise对象发送了异步操作，必然会有一个未来事件，在未来执行，这个过程有传入函数对象fn执行。函数fn里必然需要有成功执行和失败执行的函数

创建类构造对象

class LcPromise{
	// ①指向代码
	constructor(fn) {
		// 将成功的事件函数集成在successList数组里
		this.successList = []
		// 将失败的事件函数集成在failList数组里
		this.failList = []
		// pending,fullfilled,rejected
		this.state = "pending"
		// 传入的函数对象（异步操作的函数内容）
		fn(this.resolveFn.bind(this,this.rejectFn.bind(this)))
	}
	// ②指向代码
	then(successFn,failFn) {
		if(typeof successFn == "function") {
			this.successList.push(successFn)
		}
		if(typeof failFn == 'function') {
			this.failFn.push(failFn)
		}
	}
	catch(failFn){
		if(typeof failFn == 'function') {
			this.failList.push(failFn)
		}
	}
	// ③指向代码
	resolveFn(res) {
		this.state = "fullfilled"
		this.successList.forEach(function (item, index) {
			// 将成功的事件循环调用
			item(res)
		})
	}.rejectFn(res) {
		this.state = 'rejected'
		// 注册到的失败所有事件进行调用
		this.failList.forEach(function(item,index){
			item(res)
		})
		throw Error(res)
	}
}

• 构造函数的作用①
  • 声明成功函数放置的数组对象
  • 声明失败函数放置的数组对象
  • 定义初始化状态
  • 调用传入进行执行异步内容的函数(在未来有成功的结构时调用传入进去的成功函数，在未来失败时调用传入进去的失败函数)
• 将传入成功或者失败时需要调用的函数作用②：
  • 将成功和失败的函数传入成功成功和失败的数组里
• 定义调用和失败的函数作用③:
  • 成功时调用成功数组里所有的函数，失败时调用失败数组里所有的函数