Promise 是异步编程的一种解决方案: 从语法上讲,promise是一个对象,从它可以获取异步操作的消息;从本意上讲,它是承诺,承诺它过一段时间会给你一个结果。 promise有三种状态:pending(等待态),fulfiled(成功态),rejected(失败态);状态一旦改变,就不会再变。创造promise实例后,它会立即执行。
我相信大家经常写这样的代码:
- // 当参数a大于10且参数fn2是一个方法时 执行fn2
- function fn1(a, fn2) {
- if (a > 10 && typeof fn2 == 'function') {
- fn2()
- }
- }
- fn1(11, function() {
- console.log('this is a callback')
- })
一般来说我们会碰到的回调嵌套都不会很多,一般就一到两级,但是某些情况下,回调嵌套很多时,代码就会非常繁琐,会给我们的编程带来很多的麻烦,这种情况俗称——回调地狱。
这时候我们的promise就应运而生、粉墨登场了
promise是用来解决两个问题的:
Promise是一个构造函数,自己身上有all、reject、resolve这几个眼熟的方法,原型上有then、catch等同样很眼熟的方法。
那就new一个
- let p = new Promise((resolve, reject) => {
- //做一些异步操作
- setTimeout(() => {
- console.log('执行完成');
- resolve('我是成功!!');
- }, 2000);
- });
Promise的构造函数接收一个参数:函数,并且这个函数需要传入两个参数:
所以,从表面上看,Promise只是能够简化层层回调的写法,而实质上,Promise的精髓是“状态”,用维护状态、传递状态的方式来使得回调函数能够及时调用,它比传递callback函数要简单、灵活的多。所以使用Promise的正确场景是这样的:
- p.then((data) => {
- console.log(data);
- })
- .then((data) => {
- console.log(data);
- })
- .then((data) => {
- console.log(data);
- });
把Promise的状态置为rejected,这样我们在then中就能捕捉到,然后执行“失败”情况的回调。看下面的代码。
- let p = new Promise((resolve, reject) => {
- //做一些异步操作
- setTimeout(function(){
- var num = Math.ceil(Math.random()*10); //生成1-10的随机数
- if(num<=5){
- resolve(num);
- }
- else{
- reject('数字太大了');
- }
- }, 2000);
- });
- p.then((data) => {
- console.log('resolved',data);
- },(err) => {
- console.log('rejected',err);
- }
- );
-
then中传了两个参数,then方法可以接受两个参数,第一个对应resolve的回调,第二个对应reject的回调。所以我们能够分别拿到他们传过来的数据。多次运行这段代码,你会随机得到下面两种结果:或者
我们知道Promise对象除了then方法,还有一个catch方法,它是做什么用的呢?其实它和then的第二个参数一样,用来指定reject的回调。用法是这样:
- p.then((data) => {
- console.log('resolved',data);
- }).catch((err) => {
- console.log('rejected',err);
- });
效果和写在then的第二个参数里面一样。不过它还有另外一个作用:在执行resolve的回调(也就是上面then中的第一个参数)时,如果抛出异常了(代码出错了),那么并不会报错卡死js,而是会进到这个catch方法中。请看下面的代码:
- p.then((data) => {
- console.log('resolved',data);
- console.log(somedata); //此处的somedata未定义
- })
- .catch((err) => {
- console.log('rejected',err);
- });
在resolve的回调中,我们console.log(somedata);而somedata这个变量是没有被定义的。如果我们不用Promise,代码运行到这里就直接在控制台报错了,不往下运行了。但是在这里,会得到这样的结果:
也就是说进到catch方法里面去了,而且把错误原因传到了reason参数中。即便是有错误的代码也不会报错了,这与我们的try/catch语句有相同的功能
Promise的all方法提供了并行执行异步操作的能力,并且在所有异步操作执行完后才执行回调。看下面的例子:
- let Promise1 = new Promise(function(resolve, reject){})
- let Promise2 = new Promise(function(resolve, reject){})
- let Promise3 = new Promise(function(resolve, reject){})
-
- let p = Promise.all([Promise1, Promise2, Promise3])
-
- p.then(funciton(){
- // 三个都成功则成功
- }, function(){
- // 只要有失败,则失败
- })
-
有了all,你就可以并行执行多个异步操作,并且在一个回调中处理所有的返回数据,是不是很酷?有一个场景是很适合用这个的,一些游戏类的素材比较多的应用,打开网页时,预先加载需要用到的各种资源如图片、flash以及各种静态文件。所有的都加载完后,我们再进行页面的初始化。
race的使用场景:比如我们可以用race给某个异步请求设置超时时间,并且在超时后执行相应的操作,代码如下:
- //请求某个图片资源
- function requestImg(){
- var p = new Promise((resolve, reject) => {
- var img = new Image();
- img.onload = function(){
- resolve(img);
- }
- img.src = '图片的路径';
- });
- return p;
- }
- //延时函数,用于给请求计时
- function timeout(){
- var p = new Promise((resolve, reject) => {
- setTimeout(() => {
- reject('图片请求超时');
- }, 5000);
- });
- return p;
- }
- Promise.race([requestImg(), timeout()]).then((data) =>{
- console.log(data);
- }).catch((err) => {
- console.log(err);
- });
-
requestImg函数会异步请求一张图片,我把地址写为"图片的路径",所以肯定是无法成功请求到的。timeout函数是一个延时5秒的异步操作。我们把这两个返回Promise对象的函数放进race,于是他俩就会赛跑,如果5秒之内图片请求成功了,那么遍进入then方法,执行正常的流程。如果5秒钟图片还未成功返回,那么timeout就跑赢了,则进入catch,报出“图片请求超时”的信息。运行结果如下:
好了,我相信大家对用法已经懂了,那么我们来手写一款自己的promise吧
要实现上面代码中的功能,也是promise最基本的功能。首先,需要创建一个构造函数promise,创建一个promisel类,在使用的时候传入了一个执行器executor,executor会传入两个参数:成功(resolve)和失败(reject)。之前说过,只要成功,就不会失败,只要失败就不会成功。所以,默认状态下,在调用成功时,就返回成功态,调用失败时,返回失败态。代码如下:
- class Promise {
- constructor (executor){
- //默认状态是等待状态
- this.status = 'panding';
- this.value = undefined;
- this.reason = undefined;
- //存放成功的回调
- this.onResolvedCallbacks = [];
- //存放失败的回调
- this.onRejectedCallbacks = [];
- let resolve = (data) => {//this指的是实例
- if(this.status === 'pending'){
- this.value = data;
- this.status = "resolved";
- this.onResolvedCallbacks.forEach(fn => fn());
- }
-
- }
- let reject = (reason) => {
- if(this.status === 'pending'){
- this.reason = reason;
- this.status = 'rejected';
- this.onRejectedCallbacks.forEach(fn => fn());
- }
- }
- try{//执行时可能会发生异常
- executor(resolve,reject);
- }catch (e){
- reject(e);//promise失败了
- }
-
- }
promise A+规范规定,在有异常错误时,则执行失败函数。
- constructor (executor){
- ...... try{
- executor(resolve,reject);
- }catch(e){
- reject(e);
- }
- }
-
then方法是promise的最基本的方法,返回的是两个回调,一个成功的回调,一个失败的回调,实现过程如下:
- then(onFulFilled, onRejected) {
- if (this.status === 'resolved') { //成功状态的回调
- onFulFilled(this.value);
- }
- if (this.status === 'rejected') {//失败状态的回调
- onRejected(this.reason);
- }
- }
- let p = new Promise(function(){
- resolve('我是成功');
- })
- p.then((data) => {console.log(data);},(err) => {});
- p.then((data) => {console.log(data);},(err) => {});
- p.then((data) => {console.log(data);},(err) => {});
-
返回的结果是:
- 我是成功
- 我是成功
- 我是成功
-
为了实现这样的效果,则上一次的代码将要重新写过,我们可以把每次调用resolve的结果存入一个数组中,每次调用reject的结果存入一个数组。这就是为何会在上面定义两个数组,且分别在resolve()和reject()遍历两个数组的原因。因此,在调用resolve()或者reject()之前,我们在pending状态时,会把多次then中的结果存入数组中,则上面的代码会改变为:
- then(onFulFilled, onRejected) {
- if (this.status === 'resolved') {
- onFulFilled(this.value);
- }
- if (this.status === 'rejected') {
- onRejected(this.reason);
- }
- // 当前既没有完成 也没有失败
- if (this.status === 'pending') {
- // 存放成功的回调
- this.onResolvedCallbacks.push(() => {
- onFulFilled(this.value);
- });
- // 存放失败的回调
- this.onRejectedCallbacks.push(() => {
- onRejected(this.reason);
- });
- }
- }
Promise A+规范中规定then方法可以链式调用
在promise中,要实现链式调用返回的结果是返回一个新的promise,第一次then中返回的结果,无论是成功或失败,都将返回到下一次then中的成功态中,但在第一次then中如果抛出异常错误,则将返回到下一次then中的失败态中
链式调用成功时
链式调用成功会返回值,有多种情况,根据举的例子,大致列出可能会发生的结果。因此将链式调用返回的值单独写一个方法。方法中传入四个参数,分别是p2,x,resolve,reject,p2指的是上一次返回的promise,x表示运行promise返回的结果,resolve和reject是p2的方法。则代码写为:
- function resolvePromise(p2,x,resolve,reject){
- ....
- }
-
- var p = new Promise((resovle,reject) => {
- return p; //返回的结果不能是自己,
- })
-
当返回结果是自己时,永远也不会成功或失败,因此当返回自己时,应抛出一个错误
- function resolvePromise(p2,x,resolve,reject){
- if(px===x){
- return reject(new TypeError('自己引用自己了'));
- }
- ....
- }
-
- function resolvePromise(promise2,x,resolve,reject){
- //判断x是不是promise
- //规范中规定:我们允许别人乱写,这个代码可以实现我们的promise和别人的promise 进行交互
- if(promise2 === x){//不能自己等待自己完成
- return reject(new TypeError('循环引用'));
- };
- // x是除了null以外的对象或者函数
- if(x !=null && (typeof x === 'object' || typeof x === 'function')){
- let called;//防止成功后调用失败
- try{//防止取then是出现异常 object.defineProperty
- let then = x.then;//取x的then方法 {then:{}}
- if(typeof then === 'function'){//如果then是函数就认为他是promise
- //call第一个参数是this,后面的是成功的回调和失败的回调
- then.call(x,y => {//如果Y是promise就继续递归promise
- if(called) return;
- called = true;
- resolvePromise(promise2,y,resolve,reject)
- },r => { //只要失败了就失败了
- if(called) return;
- called = true;
- reject(r);
- });
- }else{//then是一个普通对象,就直接成功即可
- resolve(x);
- }
- }catch (e){
- if(called) return;
- called = true;
- reject(e)
- }
- }else{//x = 123 x就是一个普通值 作为下个then成功的参数
- resolve(x)
- }
-
- }
也就是当调用成功就不能再调用失败了,如果两个都调用的时候,哪个先调用就执行哪一个。代码部分还是上面那部分
个人认为,这个地方比较绕,需要慢慢的一步一步的理清楚。
根据promise A+规范原理,promise在自己的框架中,封装了一系列的内置的方法。
最后给大家附上全部源码,供大家仔细品读。
- function resolvePromise(promise2,x,resolve,reject){
- //判断x是不是promise
- //规范中规定:我们允许别人乱写,这个代码可以实现我们的promise和别人的promise 进行交互
- if(promise2 === x){//不能自己等待自己完成
- return reject(new TypeError('循环引用'));
- };
- // x是除了null以外的对象或者函数
- if(x !=null && (typeof x === 'object' || typeof x === 'function')){
- let called;//防止成功后调用失败
- try{//防止取then是出现异常 object.defineProperty
- let then = x.then;//取x的then方法 {then:{}}
- if(typeof then === 'function'){//如果then是函数就认为他是promise
- //call第一个参数是this,后面的是成功的回调和失败的回调
- then.call(x,y => {//如果Y是promise就继续递归promise
- if(called) return;
- called = true;
- resolvePromise(promise2,y,resolve,reject)
- },r => { //只要失败了就失败了
- if(called) return;
- called = true;
- reject(r);
- });
- }else{//then是一个普通对象,就直接成功即可
- resolve(x);
- }
- }catch (e){
- if(called) return;
- called = true;
- reject(e)
- }
- }else{//x = 123 x就是一个普通值 作为下个then成功的参数
- resolve(x)
- }
-
- }
-
- class Promise {
- constructor (executor){
- //默认状态是等待状态
- this.status = 'panding';
- this.value = undefined;
- this.reason = undefined;
- //存放成功的回调
- this.onResolvedCallbacks = [];
- //存放失败的回调
- this.onRejectedCallbacks = [];
- let resolve = (data) => {//this指的是实例
- if(this.status === 'pending'){
- this.value = data;
- this.status = "resolved";
- this.onResolvedCallbacks.forEach(fn => fn());
- }
-
- }
- let reject = (reason) => {
- if(this.status === 'pending'){
- this.reason = reason;
- this.status = 'rejected';
- this.onRejectedCallbacks.forEach(fn => fn());
- }
- }
- try{//执行时可能会发生异常
- executor(resolve,reject);
- }catch (e){
- reject(e);//promise失败了
- }
-
- }
- then(onFuiFilled,onRejected){
- //防止值得穿透
- onFuiFilled = typeof onFuiFilled === 'function' ? onFuiFilled : y => y;
- onRejected = typeof onRejected === 'function' ? onRejected :err => {throw err;}
- let promise2;//作为下一次then方法的promise
- if(this.status === 'resolved'){
- promise2 = new Promise((resolve,reject) => {
- setTimeout(() => {
- try{
- //成功的逻辑 失败的逻辑
- let x = onFuiFilled(this.value);
- //看x是不是promise 如果是promise取他的结果 作为promise2成功的的结果
- //如果返回一个普通值,作为promise2成功的结果
- //resolvePromise可以解析x和promise2之间的关系
- //在resolvePromise中传入四个参数,第一个是返回的promise,第二个是返回的结果,第三个和第四个分别是resolve()和reject()的方法。
- resolvePromise(promise2,x,resolve,reject)
- }catch(e){
- reject(e);
- }
- },0)
- });
- }
- if(this.status === 'rejected'){
- promise2 = new Promise((resolve,reject) => {
- setTimeout(() => {
- try{
- let x = onRejected(this.reason);
- //在resolvePromise中传入四个参数,第一个是返回的promise,第二个是返回的结果,第三个和第四个分别是resolve()和reject()的方法。
- resolvePromise(promise2,x,resolve,reject)
- }catch(e){
- reject(e);
- }
- },0)
-
- });
- }
- //当前既没有完成也没有失败
- if(this.status === 'pending'){
- promise2 = new Promise((resolve,reject) => {
- //把成功的函数一个个存放到成功回调函数数组中
- this.onResolvedCallbacks.push( () =>{
- setTimeout(() => {
- try{
- let x = onFuiFilled(this.value);
- resolvePromise(promise2,x,resolve,reject);
- }catch(e){
- reject(e);
- }
- },0)
- });
- //把失败的函数一个个存放到失败回调函数数组中
- this.onRejectedCallbacks.push( ()=>{
- setTimeout(() => {
- try{
- let x = onRejected(this.reason);
- resolvePromise(promise2,x,resolve,reject)
- }catch(e){
- reject(e)
- }
- },0)
- })
- })
- }
- return promise2;//调用then后返回一个新的promise
- }
- catch (onRejected) {
- // catch 方法就是then方法没有成功的简写
- return this.then(null, onRejected);
- }
- }
- Promise.all = function (promises) {
- //promises是一个promise的数组
- return new Promise(function (resolve, reject) {
- let arr = []; //arr是最终返回值的结果
- let i = 0; // 表示成功了多少次
- function processData(index, data) {
- arr[index] = data;
- if (++i === promises.length) {
- resolve(arr);
- }
- }
- for (let i = 0; i < promises.length; i++) {
- promises[i].then(function (data) {
- processData(i, data)
- }, reject)
- }
- })
- }
- // 只要有一个promise成功了 就算成功。如果第一个失败了就失败了
- Promise.race = function (promises) {
- return new Promise((resolve, reject) => {
- for (var i = 0; i < promises.length; i++) {
- promises[i].then(resolve,reject)
- }
- })
- }
- // 生成一个成功的promise
- Promise.resolve = function(value){
- return new Promise((resolve,reject) => resolve(value);
- }
- // 生成一个失败的promise
- Promise.reject = function(reason){
- return new Promise((resolve,reject) => reject(reason));
- }
- Promise.defer = Promise.deferred = function () {
- let dfd = {};
- dfd.promise = new Promise( (resolve, reject) => {
- dfd.resolve = resolve;
- dfd.reject = reject;
- });
- return dfd
- }
- module.exports = Promise;
-
关于这篇promise A+规范的总结,肯定会存在很多不足的地方,欢迎各位提出宝贵的意见或建议,也希望能帮助到你从中获得一些知识!