Promise对象原理解析

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


你可能感兴趣的:(Promise对象原理解析)