Promise基本使用及方法介绍

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);

}

});

((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) => {

(value); //done

});

细节

1.

Promise对象在创建后立即执行，then方法指定的回调函数，将在当前脚本所有同步任务执行完才会执行。

let promise = new Promise((resolve, reject) => {

('Promise1');

resolve();

('Promise2')

});

(() => {

('resolved.');

});

('Hi!');

// Promise1

// Promise2

// Hi!

// resolved

2.

如果调用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 => (result))

.catch(error => (error))// Error: fail

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

var p1 = e(value);

// 等价于

var p1 = new Promise(resolve => resolve(value));

var p2 = ('err');

// 等同于

var p2 = new Promise((resolve, reject) =>

reject('err'));

原型方法

(onFulfilled, onRejected)

1.

语法(onFulfilled, onRejected);((value)

=> {// fulfillment}, (reason) => {// rejection});

2.

含义为 Promise实例添加状态改变时的回调函数。then方法的第一个参数是resolved状态的回调函数，第二个参数（可选）是rejected状态的回调函数。

3.

链式操作then方法返回的是一个新的promise，因此可以采用链式写法，即then方法后面再调用另一个then方法。

new Promise(resolve => {

resolve(1);

})

.then(result => (result)) //1

.then(result => {

(result); //undefined

return 2;

})

.then(result => {

(result); //2

throw new Error("err");

})

.then((result) =>{

(result);

}, (err)=>{

(err); //Error: err

return 3;

})

.then((result) => {

(result); //3

})

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

4.

返回值then方法返回一个Promise，而它的行为与then中的被调用的回调函数(onfulfilled函数/onrejected函数)的返回值有关。(1) 如果then中的回调函数返回一个值，那么then返回的Promise将会成为接受状态，并且将返回的值作为接受状态的回调函数的参数值。

new Promise((resolve, reject) => {

reject();

})

.then( () => 99, () => 42 )

.then( result => (result)); // 42

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

new Promise((resolve, reject) => {

resolve();

})

.then( () => {throw new Error('err')}, () => {})

.then( () => {}, (err) => {(err)});

//Error: err

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

new Promise((resolve, reject) => {

resolve();

})

.then( () => {

return new Promise(resolve => resolve('ok'));

})

.then( (result) => {(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) => {(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) => {(result)}); //ok

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

(onRejected)

1.

语法

(onRejected);

(function(reason) {

// 拒绝

});

2.

含义方法是.then(null,

rejection)的别名，用于指定发生错误时的回调函数，返回一个新的promise对象。

3.

用法

const p = new Promise((resolve,reject) => {

return reject(new Error('err')); //reject方法的作用，等同于抛出错误

//throw new Error('err');

});

(null, (err) => {

(err); //Err: err

});

//--------等价写法---------

(err => {

(err); //Err: err

})

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

4.

一般总是建议，Promise 对象后面要跟catch方法，这样可以处理 Promise内部发生的错误。catch方法返回的还是一个 Promise 对象，因此后面还可以接着调用then方法。

5.

Promise对象的错误具有“冒泡”性质，会一直向后传递，直到被捕获为止。也就是说，错误总是会被下一个catch语句捕获。 即：当前catch方法可以捕获上一个catch方法(包括上一个catch)到当前catch(不包括当前catch)方法之间所有的错误，如果没有错误，则当前catch方法不执行。

new Promise(() => {

throw new Error('err1');

})

.then(() => {(1);})

.then(() => {(2);})

.catch((err) => {

(err); //Err: err1

throw new Error('err2');

})

.catch((err) => {(err);})//Err: err2

6.

一般来说，不要在then方法里面定义Reject状态的回调函数（即then的第二个参数），总是使用catch方法。

// bad

new Promise()

.then((data) => {/* success */ }, (err) => {/*

error */ });

// good

new Promise()

.then((data) => { /* success */ })

.catch((err) => {/* error */ });

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

7.

与传统的try/catch代码块不同的是，即使没有使用catch方法指定错误处理的回调函数，Promise 对象抛出的错误也不会中止外部脚本运行。

new Promise((resolve) => {

// 下面一行会报错，因为x没有声明

resolve(x + 2);

}).then(() => {

('ok');

});

setTimeout(() => {('over')});

//Uncaught (in promise) ReferenceError: x is not

defined

//over

8.

在异步函数中抛出的错误不会被catch捕获到

new Promise((resolve, reject) => {

setTimeout(() => {

throw 'Uncaught Exception!';

}, 1000);

}).catch(() => {

('err'); //不会执行

});

new Promise((resolve, reject) => {

setTimeout(() => {

reject();

}, 1000);

}).catch(() => {

('err'); //err

});

9.

在resolve()后面抛出的错误会被忽略

new Promise((resolve, reject) => {

resolve();

throw 'Silenced Exception!';

}).catch(function(e) {

(e); // 不会执行

});

静态方法

(iterable)

1.

语法var p = ([p1, p2, p3]);

2.

含义方法接受一个数组作为参数，p1、p2、p3都是 Promise 实例，如果不是，就会先调用下面讲到的e方法，将参数转为 Promise 实例，再进一步处理。（方法的参数可以不是数组，但必须具有 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 = e('p2-ok');

const p3 = new Promise((resolve) => setTimeout(resolve,

3000, 'p3-ok'));

const p4 = ('p4-err');

([p1, p2, p3])

.then((resolves) => {

h(resolve => {

(resolve); //p1-ok p2-ok p3-ok

});

})

.catch(() => {

('err');

});

([p1, p2, p3, p4])

.then(() => {

('ok');

})

.catch((err) => {

(err); //p4-err

})

(iterable)

1.

语法var p = ([p1, p2, p3]);

2.

含义方法同样是将多个Promise实例，包装成一个新的Promise实例。只要p1、p2、p3之中有一

个实例率先改变状态，p的状态就跟着改变。那个率先改变的 Promise 实例的返回值，就传递给p的回调函数。方法的参数与方法一样，如果不是 Promise 实例，就会先调用下面讲到的e方法，将参数转为Promise实例，再进一步处理。

3.

用法

var p1 = new Promise(resolve => {setTimeout(resolve,

500, "one");});

var p2 = new Promise(resolve => {setTimeout(resolve,

100, "two");});

([p1, p2])

.then(value => {

(value); // "two"

});

var p3 = new Promise(resolve => {setTimeout(resolve,

100, "three");});

var p4 = new Promise((resolve, reject) =>

{setTimeout(reject, 500, "four");});

([p3, p4])

.then((value) => {

(value); // "three"

})

.catch(err => {

// 未被调用

});

var p5 = new Promise(resolve => {setTimeout(resolve,

500, "five");});

var p6 = new Promise((resolve, reject) => {

setTimeout(reject, 100, "six");

});

([p5, p6])

.then((value) => {

// 未被调用

}).catch((reason) => {

(reason); // "six"

});

e(value)

1.

语法

e(value);

e(promise);

e(thenable);

e等价于下面的写法。

e(value) ;

// 等价于

new Promise(resolve => resolve(value));

2.

含义返回一个状态由给定value决定的Promise实例。

3.

用法(1) 如果该值是一个Promise对象，则直接返回该对象；

const p = new Promise((resolve) => {resolve()});

const p2 = e(p);

(p === p2); //true

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

const thenable = {

then(resolve, reject) {

resolve(42);

}

};

e(thenable)

.then((value) => {

(value); // 42

});

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

e('Hello')

.then((s) => {

(s); //Hello

});

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

e()

.then((s) => {

(s); //undefined

});

4.

通常而言，如果你不知道一个值是否是Promise对象，使用e(value) 来返回一个Promise对象,这样就能将该value以Promise对象形式使用。

5.

立即resolve的Promise对象，是在本轮“事件循环”（event loop）的结束时，而不是在下一轮“事件循环”的开始时。

setTimeout(function () {

('three');

}, 0);

e().then( () => {

('two');

});

('one');

// one

// two

// three

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

(reason)

1.

语法

(reason);

等价于下面的写法。

var p = (reason);

// 等同于

var p = new Promise((resolve, reject) =>

reject(reason));

2.

含义返回一个状态为rejected的Promise对象，并将给定的失败信息传递给对应的处理方法。

注意：e(value)方法返回的Promise实例的状态由value决定，可能是fulfilled，也可

能是rejected。(reason)方法返回的Promise实例的状态一定是rejected。

3.

用法

("Testing static reject")

.then((value) => {

// 未被调用

}).catch((reason) => {

(reason); // Testing static reject

});

(new Error("fail"))

.then((value) => {

// 未被调用

}).catch((error) => {

(error); // Error: fail

});

4.

()方法的参数，会原封不动地作为reject的理由，变成后续方法的参数。这一点与e方法不一致。

const thenable = {

then(resolve) {

resolve('ok');

}

};

e(thenable)

.then(e => {

(e === 'ok'); //true

});

(thenable)

.catch(e => {

(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.

((result)=>{})或((err)=>{})方法调用时返回的Promise对象的状态及其参数传递的不同情况分析。

6.

e(value)方法调用时返回的Promise对象的状态及其参数传递的不同情况分析。

参考

ECMAScript 6 入门MDN-Promise