ES6新特性Promise详解

最新推荐文章于 2023-12-06 12:47:30 发布
最新推荐文章于 2023-12-06 12:47:30 发布
阅读量1k 收藏 2
点赞数 2
分类专栏： ES6 文章标签： Promise JavaScript ES6
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Ran_Cheng_wei/article/details/79050428
版权

在ES6当中添加了很多新的API其中很值得一提的当然少不了Promise，因为Promise的出现，很轻松的就给开发人员解决了异步回调地狱的问题，废话不多，直接上代码：

在以前我们有个一个异步函数，而且还会有返回值给别的功能函数使用，函数如下：

//异步函数延时两秒执行
function testA() {
  setTimeout(function () {
    return 200;
  },2000)
}
//其它功能函数
function testB(val) {
  console.log(val)
}
//将testA异步函数的返回值当成参数来使用
testB(testA());//遗憾的是这里输出的是undefined，原因是因为异步函数的调用是在主程序之后
//想要使用testA异步函数的值，解决方案有两种
// 1.那么我们只能将功能函数的功能集成到异步函数A当中来使用了
function testA() {
  setTimeout(function () {
    console.log(200);//功能模块
  },2000)
}
testA();
// 2.把testB当成testA的回调函数来使用
function testA(callback) {
  setTimeout(function () {
    callback(200);//功能模块
  },2000)
}
function callback(val) {
  console.log(200)
}
testA(callback);
但是这两种方式存在的问题很多，例如层级之间的嵌套太深，代码很臃肿，可读性与可维护性都极低。

直到ES6当中Promise的出现，这样子的事情就变得很简单了：
//要想创建一个Promise对象、可以使用new来调用Promise的构造器来进行实例化，实例化时可传一个函数
//对通过new生成的promise对象为了设置其值在 resolve(成功) / reject(失败)时调用的回调函数
// 可以使用promise.then() 实例方法。
//promise.then(onFulfilled, onRejected)
//resolve(成功)时，onFulfilled 会被调用
//reject(失败)时，onRejected 会被调用
let P1=new Promise((resolve,reject)=>{
  setTimeout(function () {
    resolve(200)
  },2000)
}).then(res=>{
  console.log(res)
})
通过Promise的使用上面两种情况是不是就变得很简单了呢

但是，Promise的实现到底是一个什么样的原理呢？下面我将会来一一的解析：

因为Promise要以实例化的方式来使用，所以需要创建一个类MyPromise，示例如下：

class MyPromise{
    constructor(callback){
        try{
            callback(this.resolve.bind(this),this.reject.bind(this))
        }catch (err){
            this.reject(err)
        }
        this.status='pending';//状态——pending-等待，fulfilled-成功，rejected-失败
        this.onRejectedCallback=[];//失败回调集合
        this.onFulfilledCallback=[];//成功回调集合
        this.value=undefined;//成功返回值
        this.reason=undefined;//失败返回值
    }
    resolve(res){
        if(this.status==='pending'){
            this.status='fulfilled';
            this.value=res;
            this.onFulfilledCallback.forEach((item)=>{
                item(this.value);
            })
        }
    }
    reject(err){
        if(this.status==='pending'){
            this.status='rejected';
            this.reason=err;
            this.onRejectedCallback.forEach((item)=>{
                item(this.reason);
            })
        }
    }
    then(resolve,reject){
        resolve = typeof resolve == 'function'?resolve:function(value){return value};
        reject = typeof reject=='function'?reject:function(reason){
            throw reason;
        };
        this.resolve=resolve;
        this.reject=reject;
        let self=this;
        if(self.status == 'fulfilled'){
            resolve(self.value);
        }
        if(self.status == 'rejected'){
            reject(self.reason);
        }
        if(self.status == 'pending'){
            self.onFulfilledCallback.push(resolve);
            self.onRejectedCallback.push(reject);
        }
    }
}
//测试
let test=new MyPromise(function (resolve,reject) {
        setTimeout(function () {
            resolve(1000)
        },2000)
})
test.then(res=>{
    console.log(res)
},err=>{
    console.log(err+'err')
})

按照上述的示例，一个简单的基础Promise就实现了，但是我们会发现ES6提供的Promise当中可以按照jQuery一样的链式调用，如下：

var origin=new Promise((resolve,reject)=>{
    setTimeout(function () {
        resolve('成功')
    },2000)
})
//链式调用
origin.then(res=>{
    console.log(res)
    return res;
}).then(res=>{
    console.log(res)
})

在jQuery当中的链式调用大家都清楚，jQuery之所以能够实现链式调用是因为每个jQuery方法返回的JQuery对象本身，那么在Promise里，其实每个Promise的then方法里面返回的都是一个全新的promise，原理如下：

class MyPromise {
    constructor(callback) {
        this.status = 'pending';//状态——pending-等待，fulfilled-成功，rejected-失败
        this.onRejectedCallback = [];//失败回调集合
        this.onFulfilledCallback = [];//成功回调集合
        this.value = undefined;//成功回调
        this.reason = undefined;//失败回调
        try {
            callback(this.resolve.bind(this), this.reject.bind(this))
        } catch (err) {
            this.reject(err)
        }
    }
    resolve(res) {
        if (res instanceof MyPromise) {
            return res.then(res.resolve.bind(this),res.reject.bind(this));
        }
        if (this.status === 'pending') {
            this.status = 'fulfilled';
            this.value = res;
            this.onFulfilledCallback.forEach((item) => {
                item(this.value);
            })
        }
    }

    reject(err) {
        if (this.status === 'pending') {
            this.status = 'rejected';
            this.reason = err;
            this.onRejectedCallback.forEach((item) => {
                item(this.reason);
            })
        }
    }

    resolvePromise(returnPromise, x, resolve, reject) {
        let then;
        //如果x就是returnPromise
        if (returnPromise === x) {
            return reject(new TypeError('循环引用'));
        }
        if (x instanceof MyPromise||x instanceof Promise) {
            if(x instanceof Promise){
                x.then(function (val) {
                    resolve(val)
                })
            }else{
                if (x.status == 'pending') {
                    x.then(function (y) {
                        this.resolvePromise(returnPromise, y, resolve, reject);
                    }, reject);
                } else if (x.status == 'fulfilled') {
                    resolve(x.value);
                } else if (x.status == 'rejected') {
                    reject(x.reason);
                }
            }

        } else if (x != null && (typeof x == 'object' || typeof x == 'function')) {
            try {
                then = x.then;
                if (typeof then == 'function') {
                    then.call(x, function (y) {
                        this.resolvePromise(returnPromise, y, resolve, reject)
                    }, reject);
                }
            } catch (e) {
                reject(e);
            };
        } else {
            resolve(x);
        }
    }

    then(resolve, reject) {
        resolve = typeof resolve == 'function' ? resolve : function (value) {
            return value
        };
        reject = typeof reject == 'function' ? reject : function (reason) {
            throw reason;
        };
        this.resolve = resolve;
        this.reject = reject;
        let returnPromise;//返回的新promise
        let self = this;
        if (this.status == 'pending') {//等待状态
           //创建返回的新的MyPromise
           //这里通过returnPromise，returnResolve，returnReject等命名主要是为了区分是之前的与新的返回的MyPromise对象的属性
            returnPromise = new MyPromise(function (returnResolve, returnReject) {
                self.onFulfilledCallback.push(function () {
                    let x = resolve(self.value);
                    self.resolvePromise(returnPromise, x, returnResolve, returnReject);
                });
                self.onRejectedCallback.push(function () {
                    let x = reject(self.reason);
                    self.resolvePromise(returnPromise, x, returnResolve, returnReject);
                });
            });
        }
        if (this.status == 'fulfilled') {//成功
           //创建返回的新的MyPromise
            returnPromise = new MyPromise(function (returnResolve, returnReject) {
                let x = resolve(self.value);
                self.resolvePromise(returnPromise, x, returnResolve, returnReject);
            });
        }
        if (this.status == 'rejected') {//失败
            //创建返回的新的MyPromise
            returnPromise = new MyPromise(function (returnResolve, returnReject) {
                let x = reject(self.reason);
                self.resolvePromise(returnPromise, x, returnResolve, returnReject);
            });
        }
         //返回新的MyPromise
        return returnPromise;
    }
}

//测试代码
let test=new MyPromise(function (resolve,reject) {
        setTimeout(function () {
            resolve(1000)
        },1000)
})
test.then(res=>{
    console.log(res)
    return res+200
},err=>{
    console.log(err+'err')
}).then(res=>{
    console.log(res);
})


按照以上代码一样，每个then方法都返回一个全新的MyPromise方法，于是就基本实现了一个ES6中Promise的链式调用。


Promise.all

在我们的ES6中还有Promise.all这样一个方法，该方法主要是传入一个promise集合，返回一个全新的Promise实例，该全新的Promise实例的返回值为当集合当中所有的集合的所有的Promise都成功时才会返回一个对应的每个Promise成功的返回值的集合，但是只要有一个Promise失败，就会马上走到整个Promise.all包装后的新Promise对象的失败里面，ES6的使用方法如下：

1.全成功
var winnerPromise = new Promise(function (resolve,reject) {
    setTimeout(function () {
        resolve('this is winner');
    }, 800);
});
var loserPromise = new Promise(function (resolve,reject) {
    setTimeout(function () {
        resolve('this is loser');
    }, 1000);
});
Promise.all([winnerPromise, loserPromise]).then(function (value) {
    console.log(value);    // => 'this is winner'
}).catch(err=>{
    console.log(err);
});
//输出结果
[ 'this is winner', 'this is loser' ]
2.有一个失败
var winnerPromise = new Promise(function (resolve,reject) {
    setTimeout(function () {
        resolve('this is winner');
    }, 800);
});
var loserPromise = new Promise(function (resolve,reject) {
    setTimeout(function () {
        reject('this is loser');
    }, 1000);
});
Promise.all([winnerPromise, loserPromise]).then(function (value) {
    console.log(value);    // => 'this is winner'
}).catch(err=>{
    console.log(err);
});
//输出
this is loser

对其原理解析：

因为该方法不需要实例化就能使用，于是在我们原本的 MyPromise类上面添加这样一个静态方法
static all(arr) {
        if(!(arr instanceof Array&&arr.constructor == Array)){//判断是否是数组
            return new MyPromise((resolve,reject)=>{
                reject('参数类型只能是数组')
            })
        }
        return new MyPromise((resolve, reject) => {
            let result = [];
            let resolveIndex = 0;
            let resolved = function (index) {
                return function (data) {
                    result[index] = data;
                    resolveIndex++;
                    if (resolveIndex === arr.length) {
                        resolve(result)
                    }
                }
            };
            arr.forEach((item, index) => {
                item.then(resolved(index), err => {
                    reject(err)
                })
            });
        })
    }

以上代码就在我前面写的MyPromise类中实现了一个ES6的all方法。


Promise.race

在我们的ES6中还有Promise.race这样一个方法，该方法主要是传入一个promise集合，返回一个全新的Promise实例，与Promise.all很相似，但是不同的是，Promise.race方法只要传入集合中有一个成功或者失败，返回的全新的Promise实例就马上成功或者失败。

ES6代码如下：

var winnerPromise = new Promise(function (resolve,reject) {
    setTimeout(function () {
        resolve('this is winner');
    }, 800);
});
var loserPromise = new Promise(function (resolve,reject) {
    setTimeout(function () {
        reject('this is loser');
    }, 1000);
});
Promise.race([winnerPromise, loserPromise]).then(function (value) {
    console.log(value);    // => 'this is winner'
}).catch(err=>{
    console.log(err);
});
//输出
this is winner

因为该race方法不需要实例化就能使用，于是同样在我们的MyPromise上面添加一个static方法，原理解析代码片段如下：

static race(arr) {
        if(!(arr instanceof Array&&arr.constructor == Array)){//判断是否是数组
            return new MyPromise((resolve,reject)=>{
                reject('参数类型只能是数组')
            })
        }
        return new MyPromise((resolve, reject) => {
            arr.forEach((item, index) => {
                item.then(res => {
                    resolve(res);
                }, err => {
                    reject(err)
                })
            });
        })
    }

Promise.catch

ES6中Promise.catch方法其实就是和then方法的reject方法是一样的应用场景，就是当Promise实例在只能reject的回调函数,ES6代码如下:

let  test=new Promise(function (resolve, reject) {
  setTimeout(function () {
      reject(2000)
  },2000)
})

test.then(res=>{
  console.log(res)
}).catch(err=>{
  console.log(err);
})
//输出2000

在MyPromise当中进行原理解析，代码片段如下：

catch(catchFunc) {
        return this.then(null, catchFunc);
    }


以上就是我对于ES6当中Promise的一些理解，当然在代码当中肯定有很多的不足，欢迎大家多多交流，多多指正，

完整代码Github地址：github.com/RanCW/promis

参考文献：

JavaScript Promise迷你书（中文版）

developer.mozilla.org/e

嘿_那个谁
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【ES6】Promise
在热爱技术的路上一直前行。
04-26 2204
一、概述 Promise是ES6引入的异步编程的新解决方案。语法上Promise是一个构造函数，用来封装异步操作并可以获取其成功或失败的结果。 解读： （1）当在setTimeout中使用resolve（）方法的时候，会调用p.then方法中的第一个回调函数； （2） 当在setTimeout中使用reject（）方法的时候，会调用p.then方法中的第二个回调函数； 二、应用实例 1、使用Promise封装读取.md后缀的文件 2、使用Promise封装Ajax请求 ...
js进阶4 Es6新特性
weixin_45838066的博客
03-12 252
ES6介绍# 阮一峰es6文档地址:ES6 入门教程 ECMAScript 6.0（以下简称 ES6）是 JavaScript 语言的下一代标准，已经在 2015 年 6 月正式发布了也叫ECMAScript 2015。它的目标，是使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言 (一) let 命令和const命令# 知识点:# let的用法类似于var，用于变量的声明 使用let就会产生块级作用域, let命令只在块级作用域内(也就是大括号内).
ES6-阮一峰
MichaelAn的博客
02-13 5845
ES6-阮一峰 ES6补充 0.浏览器中的ES6 方法一：引入文件相关js文件 <script src="traceur.js"></script> <script src="bootstrap.js"></script> <script type="mod...
阮一峰ES6文档学习--let与const
最新发布
qq_60518899的博客
12-06 1001
let与const详解
promise用法
weixin_44671184的博客
04-19 159
常用api promise的使用 promise 实际上是一个对象，通过。then获取对象的返回值 小程序为例： // 获取用户信息 getMemberInfo: (data) => { return request('/api/member/member', true, 'get', data) }, 将request 封装成一个方法 return new Pro...
ES6新特性六：promise对象实例详解
12-10
then方法返回一个新的Promise对象，因此可以链式调用。每个then方法都可以指定成功和失败的回调，当上一个Promise被解决（成功或失败）时，会触发下一个then中的回调。这种链式调用使得异步操作的流程清晰，易于...
ES6中的Promise代码详解
08-29
在JavaScript的世界里，ES6（ECMAScript 2015）引入了许多新特性，其中Promise是解决异步编程复杂性的一个重要工具。Promise代表了一个可能还未完成的异步操作的结果，它有两种状态：fulfilled（已成功）和rejected...
ES6新特性八：async函数用法实例详解
08-30
ES6新特性八：async函数用法实例详解 async函数是ES6新特性八中的一种新的异步编程方式，它可以让异步编程变得更加简洁和易于理解。async函数的出现主要是为了解决异步编程中的一些问题，例如异步操作的结果无法...
ES6关于Promise的用法详解
08-27
ES6 Promise 的用法详解 ES6 中的 Promise 是一个异步操作的最终完成或失败及其结果值的表示。它是用于处理异步操作的，异步处理成功了就执行成功的操作，异步处理失败了就捕获错误或者停止后续操作。 Promise ...
15-Promise
我的一篇的博客
05-15 676
异步编程问题 如何让异步程序按顺序执行？ 如何请求具有依赖关系的内容？ Promise : ES6提出的异步编程解决方案？ //检测机构 //resolve : 表示成功的状态 //reject : 表示失败的状态 new Promise((resolve,reject) => { if(处理异步程序){ resolve([参数]); }else{ reject([参数]);
ES6入门基础-阮一峰
04-10
《ECMAScript 6 入门》是一本开源的 JavaScript 语言教程，全面介绍 ECMAScript 6 新引入的语法特性。
vue 函数（三）：Promise函数
w_t_y_y的博客
09-13 8604
一、介绍： 通过打印可以看出Promise是一个构造函数，有all、reject、resolve、then、catch等方法。这样用Promise new出来的对象肯定就有then、catch等方法。 二、用法： created() { var p = new Promise(function (resolve, reject) { //做一些异步操作 setTimeout(function () { console.log('Promise执行.
ES6面试、复习干货知识点汇总
程序员成长指北
07-05 1164
点击上方程序员成长指北，关注公众号回复1，加入高级Node交流群作者：StevenLikeWatermelon https://juejin.cn/post/68449037344644...
Es6新特性：关于Promise的保姆级教程
weixin_58498354的博客
03-15 164
文章目录1.Promise是什么？2.Promise的三种状态3.创建Promise对象4.执行promise的回调函数6.Promise对象的作用是什么？7.扩展：利用promise封装AJAX函数 1.Promise是什么？ Promise是最早由社区提出和实现的一种解决异步编程的方案，比其他传统的解决方案（回调函数和事件）更合理和更强大。 ES6 将其写进了语言标准，统一了用法，原生提供了Promise对象。 2.Promise的三种状态 1.初始化状态：pending（进行中） 2.当调用re
es6新特性（四之Promise ）
04-02 191
Promise 字面意思是承诺,但具体用法和场景呢 一、首先了解Promise对象和Promise的调用，其中涉及到关键词resolve、reject、和then resolve和reject是函数里的参数翻译过来是解决和决绝，简单来理解即表示成功和失败的回调函数。 Promise对象的调用方式需要用到then方法 例如： let p=new Promise(function...
ES6 新特性 总结
nirvana_cx的博客
05-24 2万+
ES6的新特性的学习笔记整理
ES6系列40道基础题（含答案）
热门推荐
祥哥的说
06-13 3万+
强烈推荐30个原生JavaScript的demo，包括canvas时钟特效、自定义视频播放器、搜索栏快速匹配、fetch访问资源、console调试技巧等，先fork后学习，详见点击打开链接，欢迎点赞~~~谢谢，共同进步学习！ ES6系列40道基础题（含答案） ps：每道题解析的蓝色链接，需要按住ctrl+点击，即可访问。 1.下面不属于ECMAScript规范的范围的是：（ ） A...
ES6新特性思维导图（部分）
Tiger's blog
09-22 255
Promise不会？？看这里！！！史上最通俗易懂的Promise！！！
weixin_33704234的博客
05-19 1万+
一、什么是Promise？我们用Promise来解决什么问题？Promise 是异步编程的一种解决方案： 从语法上讲，promise是一个对象，从它可以获取异步操作的消息；从本意上讲，它是承诺，承诺它过一段时间会给你一个结果。 promise有三种状态：pending(等待态)，fulfiled(成功态)，rejected(失败态)；状态一旦改变，就不会再变。创造promise实例后，它会立即执行...
ES6语法规范.docx
08-14
ES6，全称ECMAScript 2015，是JavaScript语言的一个重要更新版本，引入了许多新的语法特性，极大地提高了开发效率和代码可读性。以下将对其中的一些关键特性进行详细介绍。 1. **let命令**：let关键字用于声明变量...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值