Promise
对象用于呈现异步操作事件的完成/失败结果。 此篇文章翻译自Promise,原文章太长,因此自己在这里做了简化,以便自己加强认识和理解。 实际上Promise
的用法非常简单,自己不太理解的只是then()
finally()
catch()
在链式调用时缺省回调函数的情况
Promise
像某个值的代理,该值在promise
实例被创建时并不需要知道。它把某个异步行为的成功结果或失败原因关联到某个响应器(handler
)。它使得异步方法像同步方法一样返回值:但它并不完全像同步方法一样直接返回值,而是通过返回一个promise
实例,在未来的某个时候呈现返回值。
Promise
和promise
不是一个概念。大写的代表某个类,小写的表示某个具体的实例
Promise
总是在以下3种状态中变动:
pending
初始状态fulfilled
表示某项操作(方法)成功rejected
表示某项操作失败一个处于pending
状态的promise
实例,要么被fulfilled with a value
,要么rejected with a reason(error)
。上述两种情况发生时候,通过promise的then()
方法关联的响应器
当一个promise
处于settled
状态时,promise.then()
promise.catch()
promise.finally()
视情况被调用
settled
状态即fulfilled
或rejected
then()
方法有两个参数:
resolved
/fulfill
)rejrected
/reject
)注意该方法返回一个新生成的promise
对象,它的状态是pending
。
需要特别说明的是:当then()
缺少一个回调函数时,链式调用不会被影响,将会继续执行下一个动作(上一个then()
的返回值作为下一个then()
的入参)。这就是说在链式调用中可以不需要设置rejection callback function
,链式调用中的reject
动作可以被catch()
方法捕捉。
下面用代码说明上述的内容
const myPromise = new Promise((resolve, reject) => {
setTimeout(()=> {
resolve('foo');
}, 500);
});
myPromise.then( value => {
console.log(value); // print 'foo'
return 'hello';
}).then( value => {
console.log(value); // print 'hello'
return 'world';
}).then( value => {
console.log(value); // print 'world'
throw 'error!!!';
}).catch( value => {
console.log(value); // print 'error!!!'
});
Promise()
该构造函数返回一个状态为pending
的promise
对象,这个构造方法的最大作用是包装一个方法,使其能支持promise。该构造函数有一个executor
参数,该参数是一个回调函数。该回调参数有两个入参resolve
reject
,这两个入参函数的调用将改变产生的promise
的状态 - fulfilled
/ rejected
function myAsynchFunc(url) {
return new Promise((resolve, reject) => {
const xhr = new XMLHttpRequest();
xhr.open('GET', url);
// 定义请求成功时的回调函数,该函数执行resolve动作
xhr.onload = () => resolve(xhr.responseText);
// 定义请求失败时的回调函数,该函数执行reject动作
xhr.onerror = () => reject(xhr.statusText);
xhr.send();
});
}
Promise.resolve(value)
和Promise.reject(reason)
都将直接创建一个settled
的promise
对象
下面的三个方法都会返回一个新的promise
对象,用法比较简单,前面说过了,不细说了
Promise.prototype.then()
Promise.prototype.catch()
Promise.prototype.finally()
还有4个比较特殊的静态方法 - 用于promise对象组上的操作
Promise.all(iterable)
等待可迭代对象中的promise
对象都被resolved
或rejected
,
如果全部都是resolved
,则它的resolve handler
的入参是一个数组,该数组的值是所有promise
对象的resolve
时的返回值;
如果有一个rejected
了,那其rejected handler
的入参是第一个rejected
的promise
对象的reject
时的返回值
const promise1 = Promise.resolve(3);
const promise2 = 42;
const promise3 = new Promise((resolve, reject) => {
setTimeout(resolve, 100, 'foo');
});
Promise.all([promise1, promise2, promise3]).then((values) => {
console.log(values);
}, reason => {console.log(reason)});
// expected output: Array [3, 42, "foo"]
Promise.allSettled(iterable)
和Promise.all(iterable)
类似,等待所有的promise
对象都被settled
,但其入参是一个数组,数组中包含所有promise
对象的执行结果(不区分对待fulfilled
和rejected
)
const promise1 = Promise.resolve(3);
const promise2 = new Promise((resolve, reject) => setTimeout(reject, 100, 'foo'));
const promises = [promise1, promise2];
// results入参是一个数组
Promise.allSettled(promises).then((results) => results.forEach((result) => console.log(result.status)));
Promise.race(iterable)
只要其中任一一个promise
对象状态settlled
,则该方法产生的promise
对象的状态也立马settled
。 如果第一个settled
的promise
对象是resolved
,则该方法产生的promise
也立马resolved
,且值和所述的第一个promise
对象一样。如果第一个是rejected
,同理!
Promise.any(iterable)
只要其中任一一个promise
对象状态fulfilled
,则该方法产生的promise
对象的状态也立马resolved
本文系外文翻译,前往查看
如有侵权,请联系 cloudcommunity@tencent.com 删除。
本文系外文翻译,前往查看
如有侵权,请联系 cloudcommunity@tencent.com 删除。