Promise对象原理解析
ES6 原生提供了 Promise 对象。
所谓 Promise，就是一个对象，用来传递异步操作的消息。它代表了某个未来才会知道结果的事件（通常是一个异步操作），并且这个事件提供统一的 API，可供进一步处理。
异步方法的各种调用形式
以ajax请求为例
- ES5正常写法
这种写法缺点如果在回调中还有需要执行的异步方法，容易进入套娃模式。
$.get(url,(res)=>{
//此处执行请求成功的回调
$.get(url2,(res2)=>{
//此处执行请求成功的回调2
...
...
})
})
- Promise写法
getAjax(url).then((res)=>{
//此处执行请求成功的回调
})
- async_await 写法
(async ()=>{
//await等待异步方法的执行，执行成功将响应结果返回
let res = await getAjax(url)
})()
总结：
- ES5写法和promise写法，主要区别在写法的不同，可以让回调函数，划分出去在.then的函数里去执行，使得代码更加的易读，也可以将两个不同的参数，划分开来写。
- async_await和promise的区别，async_await只是promise实现的语法糖而已，这种形式的写法在底层编译之后会自动转化成promise的写法
Promise实现原理(自已实现MyPromise对象)
创建类构造对象
class MyPromise{
constructor(fn) {
//将成功的事件函数集成在successList数组里
this.successList = [];
//这里将所有的失败函数集成到failList里
this.failList = []
//pending,fullfilled,rejected
this.state = "pending"
//传入的函数对象,(异步操作的函数内容)
fn(this.resolveFn.bind(this),this.rejectFn.bind(this))
}
}
构造函数的作用：
- 声明成功函数放置的数组对象
- 声明失败函数放置的数组对象
- 定义初始化状态
- 调用传入进行执行异步内容的函数（在未来有成功的结果时调用传入进去的成功函数，在未来失败时调用传入进行的失败函数）
在MyPromise对象中定义 接收“成功或者失败”时需要调用的函数
将“成功或者失败函数”存放到成功函数队列和失败函数队列中，以便在事件完成时调用。
class MyPromise{
constructor(fn) {
//将成功的事件函数集成在successList数组里
this.successList = [];
//这里将所有的失败函数集成到failList里
this.failList = []
//pending,fullfilled,rejected
this.state = "pending"
//传入的函数对象,(异步操作的函数内容)
fn(this.resolveFn.bind(this),this.rejectFn.bind(this))
}
//then方法接收成功或者失败时需要调用的函数，将函数存放到成功或失败函数队列中
then(successFn,failFn){
if(typeof successFn=='function'){
this.successList.push(successFn)
}
if(typeof failFn=='function'){
this.failList.push(failFn)
}
}
//catch方法接收失败时需要调用的函数，将函数存放到失败函数队列中
catch(failFn){
if(typeof failFn=='function'){
this.failList.push(failFn)
}
}
}
作用：
- 接收成功和失败的函数放到成功和失败的函数队列里
定义 在事件完成时 调用成功函数和失败函数的 函数（有点绕）
class MyPromise{
constructor(fn) {
//将成功的事件函数集成在successList数组里
this.successList = [];
//这里将所有的失败函数集成到failList里
this.failList = []
//pending,fullfilled,rejected
this.state = "pending"
//传入的函数对象,(异步操作的函数内容)
fn(this.resolveFn.bind(this),this.rejectFn.bind(this))
}
//then方法接收成功或者失败时需要调用的函数，将函数存放到成功或失败函数队列中
then(successFn,failFn){
if(typeof successFn=='function'){
this.successList.push(successFn)
}
if(typeof failFn=='function'){
this.failList.push(failFn)
}
}
//catch方法接收失败时需要调用的函数，将函数存放到失败函数队列中
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);
}
}
作用：
- 成功时调用成功数组里所有的函数，失败时调用失败数组里所有的函数。
应用MyPromise对象
以node中fs模块为例，我们使用MyPromise对象封装一个fs读取文件的方法
引入fs
let fs = require('fs');
封装fsRead方法，读取文件
//例：使用MyPromise对象封装一个fs模块方法
function fsRead(path){
return new MyPromise(function(resolve,reject){
fs.readFile(path,{flag:'r',encoding:"utf-8"},function(err,data){
if(err){
reject(err)
}else{
resolve(data)
}
})
})
}
准备需要读取的文件test.txt
小池
作者：杨万里
泉眼无声惜细流，树阴照水爱晴柔。
小荷才露尖尖角，早有蜻蜓立上头。
调用fsRead方法读取test.txt文件
(async ()=>{
//需要读取的文件路径
let path = './test.txt';
//调用我们使用MyPromise对象封装的fsRead方法异步方法
//Promise写法
fsRead(path).then((data)=>{
console.log("===========Promise写法=============")
console.log(data)
})
//async_await写法
let data = await fsRead(path)
console.log("===========async_await写法=============")
console.log(data)
})()
执行 node node .\mypromise.js控制台输入
PS E:\Workspace_VSCode\node-in-action> node .\promise.js
===========Promise写法=============
小池
作者：杨万里
泉眼无声惜细流，树阴照水爱晴柔。
小荷才露尖尖角，早有蜻蜓立上头。
===========async_await写法=============
小池
作者：杨万里
泉眼无声惜细流，树阴照水爱晴柔。
小荷才露尖尖角，早有蜻蜓立上头。
完整代码
let fs = require('fs');
class MyPromise{
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.failList.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);
}
}
//例：使用MyPromise对象封装一个fs模块方法
function fsRead(path){
return new MyPromise(function(resolve,reject){
fs.readFile(path,{flag:'r',encoding:"utf-8"},function(err,data){
if(err){
reject(err)
}else{
resolve(data)
}
})
})
}
(async ()=>{
//需要读取的文件路径
let path = './test.txt';
//调用我们使用MyPromise对象封装的fsRead方法异步方法
//Promise写法
fsRead(path).then((data)=>{
console.log("===========Promise写法=============")
console.log(data)
})
let data = await fsRead(path)
console.log("===========async_await写法=============")
console.log(data)
})()