Promise对象原理解析_对象变成pormise-CSDN博客

本文链接：https://blog.csdn.net/weixin_39541657/article/details/107238682

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)
})()