Promise基本使用及方法介绍

含义

Promise是异步编程的一种解决方案，用于一个异步操作的最终完成(或失败)及其结果值的表示，比传统的回调函数方案更加合理。

描述

  1. Promise 对象是一个代理对象（代理一个值），被代理的值在Promise对象创建时可能是未知的。它允许你为异步操作的成功和失败分别绑定相应的处理方法（handlers）。
  2. 一个 Promise有以下几种状态:
    (1) pending: 意味着操作正在进行。
    (2) fulfilled: 意味着操作成功。
    (3) rejected: 意味着操作失败。
  3. pending 状态的 Promise 对象可能触发fulfilled 状态并传递一个值给相应的状态处理方法，也可能触发失败状态（rejected）并传递失败信息。当其中任一种情况出现时，Promise 对象的then 方法绑定的处理方法（handlers ）就会被调用（then方法包含两个参数：onfulfilled 和 onrejected（可选参数），它们都是 Function 类型。

语法

var promise = new Promise((resolve, reject) => {/* executor函数 */
    // ... some code
    if (/* 异步操作成功 */){
        resolve(value);
    } else {
        reject(error);
    }
});
promise.then((value) => {
    //success
}, (error) => {
    //failure
})
  1. 参数
    executor 函数在Promise构造函数执行时同步执行，被传递 resolve 和 reject 函数（executor函数在Promise构造函数返回新建对象前被调用）。
    executor 内部通常会执行一些异步操作，一旦完成，可以调用resolve函数来将promise状态改成fulfilled(完成)，或者将promise的状态改为rejected(失败)。
    如果在executor函数中抛出一个错误，那么该promise 状态为rejected。executor函数的返回值被忽略。
  2. 简单使用
function timeout(ms) {
    return new Promise((resolve, reject) => {
        setTimeout(resolve, ms, 'done');
    });
}

timeout(2000).then((value) => {
    console.log(value); //done
});

细节

  1. Promise对象在创建后立即执行，then方法指定的回调函数，将在当前脚本所有同步任务执行完才会执行。
let promise = new Promise((resolve, reject) => {
    console.log('Promise1');
    resolve();
    console.log('Promise2')
});

promise.then(() => {
    console.log('resolved.');
});

console.log('Hi!');

// Promise1
// Promise2
// Hi!
// resolved
  1. 如果调用resolve函数和reject函数时带有参数，那么它们的参数会被传递给回调函数。reject函数的参数通常是Error对象的实例，表示抛出的错误；resolve函数的参数除了正常的值以外，还可能是另一个Promise 实例。
var p1 = new Promise((resolve, reject) => {
    setTimeout(() => reject(new Error('fail')), 3000)
})

var p2 = new Promise((resolve, reject) => {
    setTimeout(() => resolve(p1), 1000)
})

p2
    .then(result => console.log(result))
    .catch(error => console.log(error))// Error: fail

如果p2的resolve方法将p1作为参数，p1的状态决定了p2的状态。如果p1的状态是pending，那么p2的回调函数就会等待p1的状态改变；如果p1的状态已经是resolved或者rejected，那么p2的回调函数将会立刻执行。
由于p2返回的是另一个 Promise，导致p2自己的状态无效了，由p1的状态决定p2的状态。
注意：resolve函数传递不同参数生成Promise对象的不同情况可以参考Promise.resolve的用法。reject函数传递不同参数生成Promise对象的不同情况可以参考Promise.reject的用法。

var p1 = Promise.resolve(value);
// 等价于
var p1 = new Promise(resolve => resolve(value));

var p2 = Promise.reject('err');
// 等同于
var p2 = new Promise((resolve, reject) => reject('err'));

原型方法

Promise.prototype.then(onFulfilled, onRejected)

  1. 语法
    p.then(onFulfilled, onRejected);
    p.then((value) => {// fulfillment}, (reason) => {// rejection});
  2. 含义
    为 Promise实例添加状态改变时的回调函数。then方法的第一个参数是resolved状态的回调函数，第二个参数（可选）是rejected状态的回调函数。
  3. 链式操作
    then方法返回的是一个新的promise，因此可以采用链式写法，即then方法后面再调用另一个then方法。
new Promise(resolve => {
    resolve(1);
})
    .then(result => console.log(result)) //1
    .then(result => {
        console.log(result);              //undefined
        return 2;
    })
    .then(result => {
        console.log(result);             //2
        throw new Error("err");
    })
    .then((result) =>{
        console.log(result);            
    }, (err)=>{
        console.log(err);                //Error: err
        return 3;
    })
    .then((result) => {
        console.log(result);            //3
    })

注意：①不管是then方法的onfulfilled函数参数执行还是onrejected（可选参数）函数参数执行，then方法返回的都是一个新的Promise对象，都可以继续采用链式写法调用另一个then方法。②Promise.prototype.catch()方法返回的也是一个Promise对象。then方法和catch方法可以链式操作。

  1. 返回值
    then方法返回一个Promise，而它的行为与then中的被调用的回调函数(onfulfilled函数/onrejected函数)的返回值有关。
    (1) 如果then中的回调函数返回一个值，那么then返回的Promise将会成为接受状态，并且将返回的值作为接受状态的回调函数的参数值。
new Promise((resolve, reject) => {
    reject();
})
    .then( () => 99, () => 42 )
    .then( result => console.log(result)); // 42

(2) 如果then中的回调函数抛出一个错误，那么then返回的Promise将会成为拒绝状态，并且将抛出的错误作为拒绝状态的回调函数的参数值。

new Promise((resolve, reject) => {
    resolve();
})
    .then( () => {throw new Error('err')}, () => {})
    .then( () => {}, (err) => {console.log(err)}); //Error: err

(3) 如果then中的回调函数返回一个已经是接受状态的Promise，那么then返回的Promise也会成为接受状态，并且将那个Promise的接受状态的回调函数的参数值作为该被返回的Promise的接受状态回调函数的参数值。

new Promise((resolve, reject) => {
    resolve();
})
    .then( () => {
        return new Promise(resolve => resolve('ok'));
    })
    .then( (result) => {console.log(result)}); //ok

(4) 如果then中的回调函数返回一个已经是拒绝状态的Promise，那么then返回的Promise也会成为拒绝状态，并且将那个Promise的拒绝状态的回调函数的参数值作为该被返回的Promise的拒绝状态回调函数的参数值。

new Promise((resolve, reject) => {
    resolve();
})
    .then( () => {
        return new Promise((resolve, reject) => {
           reject(new Error('err'));
        });
    })
    .then( () => {}, (err) => {console.log(err)}); //Error: err

(5) 如果then中的回调函数返回一个未定状态（pending）的Promise，那么then返回Promise的状态也是未定的，并且它的终态与那个Promise的终态相同；同时，它变为终态时调用的回调函数参数与那个Promise变为终态时的回调函数的参数是相同的。

new Promise((resolve, reject) => {
    resolve();
})
    .then(() => {
        return new Promise(resolve => {
            setTimeout(resolve, 2000, 'ok');
        });
    })
    .then( (result) => {console.log(result)}); //ok

注意：这里是then方法中被调用回调函数的返回值与then方法返回的Promise对象状态之间的关系。

Promise.prototype.catch(onRejected)

  1. 语法
p.catch(onRejected);

p.catch(function(reason) {
    // 拒绝
});
  1. 含义
    Promise.prototype.catch方法是.then(null, rejection)的别名，用于指定发生错误时的回调函数，返回一个新的promise对象。
  2. 用法
const p = new Promise((resolve,reject) => {
    return reject(new Error('err')); //reject方法的作用，等同于抛出错误
    //throw new Error('err');
});

p.then(null, (err) => {
    console.log(err);  //Err: err
});

//--------等价写法---------
p.catch(err => {
    console.log(err); //Err: err
})

注意：由于.catch方法是.then(null, rejection)的别名，故.then中的链式操作(3)、返回值(4)等语法在.catch中都适用。

  1. 一般总是建议，Promise 对象后面要跟catch方法，这样可以处理 Promise内部发生的错误。catch方法返回的还是一个 Promise 对象，因此后面还可以接着调用then方法。
  2. Promise对象的错误具有“冒泡”性质，会一直向后传递，直到被捕获为止。也就是说，错误总是会被下一个catch语句捕获。 即：当前catch方法可以捕获上一个catch方法(包括上一个catch)到当前catch(不包括当前catch)方法之间所有的错误，如果没有错误，则当前catch方法不执行。
new Promise(() => {
    throw new Error('err1');
})
    .then(() => {console.log(1);})
    .then(() => {console.log(2);})
    .catch((err) => {
        console.log(err); //Err: err1
        throw  new Error('err2');
    })
    .catch((err) => {console.log(err);})//Err: err2
  1. 一般来说，不要在then方法里面定义Reject状态的回调函数（即then的第二个参数），总是使用catch方法。
// bad
new Promise()
    .then((data) => {/* success */ }, (err) => {/* error */ });

// good
new Promise()
    .then((data) => { /* success */ })
    .catch((err) => {/* error */ });

上面代码中，第二种写法要好于第一种写法，理由是第二种写法可以捕获前面then方法执行中的错误，也更接近同步的写法。

  1. 与传统的try/catch代码块不同的是，即使没有使用catch方法指定错误处理的回调函数，Promise 对象抛出的错误也不会中止外部脚本运行。
new Promise((resolve) => {
    // 下面一行会报错，因为x没有声明
    resolve(x + 2);
}).then(() => {
    console.log('ok');
});
setTimeout(() => {console.log('over')});
//Uncaught (in promise) ReferenceError: x is not defined
//over
  1. 在异步函数中抛出的错误不会被catch捕获到
new Promise((resolve, reject) => {
    setTimeout(() => {
        throw 'Uncaught Exception!';
    }, 1000);
}).catch(() => {
    console.log('err'); //不会执行
});

new Promise((resolve, reject) => {
    setTimeout(() => {
        reject();
    }, 1000);
}).catch(() => {
    console.log('err'); //err
});
  1. 在resolve()后面抛出的错误会被忽略
new Promise((resolve, reject) => {
    resolve();
    throw 'Silenced Exception!';
}).catch(function(e) {
    console.log(e); // 不会执行
});

静态方法

Promise.all(iterable)

  1. 语法
    var p = Promise.all([p1, p2, p3]);
  2. 含义
    Promise.all方法接受一个数组作为参数，p1、p2、p3都是 Promise 实例，如果不是，就会先调用下面讲到的Promise.resolve方法，将参数转为 Promise 实例，再进一步处理。（Promise.all方法的参数可以不是数组，但必须具有 Iterator 接口，且返回的每个成员都是 Promise 实例。）
    p的状态由p1、p2、p3决定，分成两种情况。
    (1) 只有p1、p2、p3的状态都变成fulfilled，p的状态才会变成fulfilled，此时p1、p2、p3的返回值组成一个数组，传递给p的回调函数。
    (2) 只要p1、p2、p3之中有一个被rejected，p的状态就变成rejected，此时第一个被reject的实例的返回值，会传递给p的回调函数。
  3. 用法
const p1 = 'p1-ok';
const p2 = Promise.resolve('p2-ok');
const p3 = new Promise((resolve) => setTimeout(resolve, 3000, 'p3-ok'));
const p4 = Promise.reject('p4-err');
Promise.all([p1, p2, p3])
    .then((resolves) => {
      resolves.forEach(resolve => {
          console.log(resolve); //p1-ok   p2-ok  p3-ok
      });
    })
    .catch(() => {
      console.log('err');
    });

Promise.all([p1, p2, p3, p4])
    .then(() => {
      console.log('ok');
    })
    .catch((err) => {
       console.log(err); //p4-err
    })

Promise.race(iterable)

  1. 语法
    var p = Promise.race([p1, p2, p3]);
  2. 含义
    Promise.race方法同样是将多个Promise实例，包装成一个新的Promise实例。只要p1、p2、p3之中有一个实例率先改变状态，p的状态就跟着改变。那个率先改变的 Promise 实例的返回值，就传递给p的回调函数。
    Promise.race方法的参数与Promise.all方法一样，如果不是 Promise 实例，就会先调用下面讲到的Promise.resolve方法，将参数转为Promise实例，再进一步处理。
  3. 用法
var p1 = new Promise(resolve => {setTimeout(resolve, 500, "one");});
var p2 = new Promise(resolve => {setTimeout(resolve, 100, "two");});
Promise.race([p1, p2])
    .then(value => {
        console.log(value); // "two"
    });

var p3 = new Promise(resolve => {setTimeout(resolve, 100, "three");});
var p4 = new Promise((resolve, reject) => {setTimeout(reject, 500, "four");});

Promise.race([p3, p4])
    .then((value) => {
        console.log(value); // "three"
    })
    .catch(err => {
        // 未被调用  
    });

var p5 = new Promise(resolve => {setTimeout(resolve, 500, "five");});
var p6 = new Promise((resolve, reject) => {
          setTimeout(reject, 100, "six");
      });

Promise.race([p5, p6])
    .then((value) => {
      // 未被调用             
    }).catch((reason) => {
        console.log(reason); // "six"
    });

Promise.resolve(value)

  1. 语法
Promise.resolve(value);
Promise.resolve(promise);
Promise.resolve(thenable);

Promise.resolve等价于下面的写法。

Promise.resolve(value) ;
// 等价于
new Promise(resolve => resolve(value));
  1. 含义
    返回一个状态由给定value决定的Promise实例。
  2. 用法
    (1) 如果该值是一个Promise对象，则直接返回该对象；
const p = new Promise((resolve) => {resolve()});
const p2 = Promise.resolve(p);
console.log(p === p2); //true

(2) 如果参数是thenable对象(即带有then方法的对象)，则返回的Promise对象的最终状态由then方法的执行决定；

const thenable = {
    then(resolve, reject) {
        resolve(42);
    }
};
Promise.resolve(thenable)
    .then((value) => {
        console.log(value);  // 42
    });

(3) 如果参数是不具有then方法的对象或基本数据类型，则返回的Promise对象的状态为fulfilled，并且将该参数传递给then方法。

Promise.resolve('Hello')
    .then((s) => {
        console.log(s); //Hello
    });

(4) 如果不带有任何参数，则返回的Promise对象的状态为fulfilled，并且将undefined作为参数传递给then方法。

Promise.resolve()
    .then((s) => {
        console.log(s); //undefined
    });
  1. 通常而言，如果你不知道一个值是否是Promise对象，使用Promise.resolve(value) 来返回一个Promise对象,这样就能将该value以Promise对象形式使用。
  2. 立即resolve的Promise对象，是在本轮“事件循环”（event loop）的结束时，而不是在下一轮“事件循环”的开始时。
setTimeout(function () {
    console.log('three');
}, 0);

Promise.resolve().then( () => {
    console.log('two');
});

console.log('one');
// one 
// two
// three

注释：JavaScript 宏任务和微任务
注意：setTimeout为新开一个宏任务，Promise.resolve()为添加一个微任务。

Promise.reject(reason)

  1. 语法
Promise.reject(reason);

Promise.reject等价于下面的写法。

var p = Promise.reject(reason);
// 等同于
var p = new Promise((resolve, reject) => reject(reason));
  1. 含义
    返回一个状态为rejected的Promise对象，并将给定的失败信息传递给对应的处理方法。

注意：Promise.resolve(value)方法返回的Promise实例的状态由value决定，可能是fulfilled，也可能是rejected。Promise.reject(reason)方法返回的Promise实例的状态一定是rejected。

  1. 用法
Promise.reject("Testing static reject")
    .then((value) => {
        // 未被调用
    }).catch((reason) => {
        console.log(reason); // Testing static reject
    });

Promise.reject(new Error("fail"))
    .then((value) => {
        // 未被调用
    }).catch((error) => {
        console.log(error); // Error: fail
    });
  1. Promise.reject()方法的参数，会原封不动地作为reject的理由，变成后续方法的参数。这一点与Promise.resolve方法不一致。
const thenable = {
    then(resolve) {
        resolve('ok');
    }
};

Promise.resolve(thenable)
    .then(e => {
        console.log(e === 'ok'); //true
    });

Promise.reject(thenable)
    .catch(e => {
        console.log(e === thenable); // true
    });

总结

  1. then()方法、catch()方法是Promise()对象的原型方法，被Promise对象调用，返回值是一个Promise对象。
  2. all()、race()、reject()、resolve()方法是Promise类的静态方法，被Promise类调用，返回值也是一个Promise对象。
  3. 使用new Promise((resolve, reject)=>{});的方式创建Promise对象时，如果构造函数中传递的不是function类型，则会报错。
  4. new Promise((resolve, reject)=>{})的方式创建Promise对象时，调用resolve或reject函数时传递不同参数类型时该Promise对象的状态分析及其参数传递的不同情况分析。
  5. p.then((result)=>{})或p.catch((err)=>{})方法调用时返回的Promise对象的状态及其参数传递的不同情况分析。
  6. Promise.resolve(value)方法调用时返回的Promise对象的状态及其参数传递的不同情况分析。

参考

ECMAScript 6 入门
MDN-Promise

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 157,012评论 4赞 359
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 66,589评论 1赞 290
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 106,819评论 0赞 237
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 43,652评论 0赞 202
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 51,954评论 3赞 285
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 40,381评论 1赞 210
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 31,687评论 2赞 310
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 30,404评论 0赞 194
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 34,082评论 1赞 238
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,355评论 2赞 241
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,880评论 1赞 255
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 28,249评论 2赞 250
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 32,864评论 3赞 232
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,007评论 0赞 8
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,760评论 0赞 192
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 35,394评论 2赞 269
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 35,281评论 2赞 259

推荐阅读更多精彩内容

  • Promise 对象
    Promise 对象 Promise 的含义 Promise 是异步编程的一种解决方案，比传统的解决方案——回调函...
    neromous阅读 8,551评论 1赞 56
  • 史上最易读懂的 Promise 实现
    本文适用的读者 本文写给有一定Promise使用经验的人，如果你还没有使用过Promise，这篇文章可能不适合你，...
    HZ充电大喵阅读 7,240评论 6赞 19
  • Promise 对象
    一、Promise的含义 Promise在JavaScript语言中早有实现，ES6将其写进了语言标准，统一了用法...
    Alex灌汤猫阅读 797评论 0赞 2
  • ES6新特性Promise详解
    在ES6当中添加了很多新的API其中很值得一提的当然少不了Promise，因为Promise的出现，很轻松的就给开...
    嘿_那个谁阅读 3,596评论 2赞 3
  • ES6之Promise
    特点 Promise能将回调分离出来,在异步操作执行之后,用链式方法执行回调,虽然es5用封装函数也能实现,但是如...
    一二三kkxx阅读 596评论 0赞 1