Promise对象原理解析

ES6 原生提供了 Promise 对象。
所谓 Promise，就是一个对象，用来传递异步操作的消息。它代表了某个未来才会知道结果的事件（通常是一个异步操作），并且这个事件提供统一的 API，可供进一步处理。

异步方法的各种调用形式

以ajax请求为例

• ES5正常写法

这种写法缺点如果在回调中还有需要执行的异步方法，容易进入套娃模式。

$.get(url,(res)=>{
    //此处执行请求成功的回调
  $.get(url2,(res2)=>{
    //此处执行请求成功的回调2
    ...
    ...
  })
})

• Promise写法

getAjax(url).then((res)=>{
    //此处执行请求成功的回调
})

• async_await 写法 ```javascript (async ()=>{ //await等待异步方法的执行，执行成功将响应结果返回 let res = await getAjax(url)

})()

 <br />总结：
- ES5写法和promise写法，主要区别在写法的不同，可以让回调函数，划分出去在.then的函数里去执行，使得代码更加的易读，也可以将两个不同的参数，划分开来写。
- async_await和promise的区别，async_await只是promise实现的语法糖而已，这种形式的写法在底层编译之后会自动转化成promise的写法
<a name="BITDI"></a>
### Promise实现原理(自已实现MyPromise对象)
<a name="VFn9h"></a>
#### 创建类构造对象
```javascript
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)
})()