首先介绍两个属于Promise函数对象的两个方法,在函数内部使用。
Promise.resolve()
语法:Promise.resolve(value);
注意,这里的参数value可以是一个Promise类型的对象,也可以是一个非Promise类型的对象;并且能够返回一个成功或失败的Promise对象。
第一种情况,value是Promise类型的对象。此时所返回的Promise对象的状态由所接受参数value的状态所决定,也就是在下面代码中,如果value的状态为失败则p也是失败的,反之如果value成功则p也成功;p成功或失败的状态值就是value成功或失败的值!
const value = new Promise((resolve,reject)=>{
resolve(11);
})
const p = Promise.resolve(value); // 状态为resolved
const value = new Promise((resolve,reject)=>{
reject(22);
})
const p = Promise.resolve(value); // 状态为rejected
其次如果是非Promise类型的对象,这里可以是数字、字符串或者undefined等等类型,甚至可以为空。那么此时所返回的Promise对象一定为成功的状态,并且传入的value值就是成功的状态值。
const p = Promise.resolve(undefined); // 状态为fulfilled,并且成功状态值为undefined
Promise.reject()
语法:Promise.reject(value);
注意,这里的参数value可以是一个Promise类型的对象,也可以是一个非Promise类型的对象;需要强调的是所返回的Promise对象的状态始终是失败的,传入的value值就是失败的状态值!
const value = new Promise((resolve,reject)=>{
resolve(11);
})
const p = Promise.resolve(value); // 状态为rejected
const value = new Promise((resolve,reject)=>{
reject(22);
})
const p = Promise.resolve(value); // 状态为rejected
const p = Promise.reject(undefined); // 状态为rejected,并且失败状态值为undefined
其次是两个属于Promise实例对象的方法,可以供实例对象p使用。
Promise.prototype.then()
语法:p.then(value => {...},reason => {...})
其最多接收两个参数,分别是成功或失败状态的回调函数。当p的状态变为成功或失败时,则调用相应的回调函数。
const p = new Promise((resolve,reject)=>{
resolve(111);
});
假设实例对象p的状态为成功(失败的情况大家可以自己测试一下),并且成功的值为111,那么一定会执行第一个参数指定的回调函数(这里为了代码简介没有指定失败状态的回调函数)。
具体的返回值返回规则如下:
-
没有返回值。那么then返回成功状态的Promise ,并且成功的状态值是undefined。
const res = p.then(value => { console.log(value); }) console.log(res);
-
有返回值。那么then返回成功状态的Promise,并且成功的状态值就是该返回值。
const res = p.then(value => { return 222; }) console.log(res);
-
抛出异常。那么then返回失败状态的Promise,并且失败的状态值是抛出的异常值。
const res = p.then(value => { throw '333'; }) console.log(res);
-
返回一个成功状态的Promise。那么then返回成功状态的Promise,并且成功的状态值就是返回Promise值决定!
const res = p.then(value => { return Promise.resolve(444); }) console.log(res);
-
返回一个失败状态的Promise。那么then返回失败状态的Promise,并且失败的状态值就是返回Promise值决定!
const res = p.then(value => { return Promise.reject(555); }) console.log(res);
-
返回一个pending状态的Promise。那么then返回的也是一个pending状态的Promise,并且该Promise终态与所返回的Promise终态保持一致。
Promise.prototype.catch()
语法:p.then(reason => {...})
相当于p.then(undefined,reason => {...})的语法糖。
如果回调函数中抛出错误或者返回一个失败状态的Promise,则catch返回的Promise也是失败状态的;否则则是成功状态。
最后是两个常用的函数对象方法。
Promise.all()
语法:Promise.all(.....)
接收的参数是一个可迭代对象,例如一个数组,并且数组中每个元素都是一个Promise实例对象。其返回值是一个新的Promise对象,如果数组中所有Promise都是成功状态,那么所返回的新的Promise也是成功状态,并且成功的状态值是是一个新的数组,该数组中每个元素是对应的数组中每个Promise对象成功的状态值!组要注意的是:主要传入数组中存在失败状态的Promise,那么所返回的新的Promise对象也是一个失败的状态,并且失败的状态值是数组中第一个变为失败状态的Promise的状态值!(注意这里有可能存在异步Promise)
- 全部成功
const p1 = new Promise((resolve,reject)=>{
setInterval(()=>{
resolve(111);
},1000)
})
const p2 = new Promise((resolve,reject)=>{
resolve(222);
})
const p3 = Promise.resolve(333);
const res = Promise.all([p1,p2,p3]);
console.log(res); // 状态为成功,并且成功的状态值是[111,222,333]
- 存在失败的Promise
const p1 = new Promise((resolve,reject)=>{
setInterval(()=>{
reject(111);
},1000)
})
const p2 = new Promise((resolve,reject)=>{
resolve(222);
})
const p3 = Promise.resolve(333);
const res = Promise.all([p1,p2,p3]);
console.log(res); // 状态为失败,并且失败的状态值是111
- 调用定时器生成失败的Promise
const p1 = new Promise((resolve,reject)=>{
setInterval(()=>{
reject(111);
},1000)
})
const p2 = new Promise((resolve,reject)=>{
reject(222);
})
const p3 = Promise.resolve(333);
const res = Promise.all([p1,p2,p3]);
console.log(res); // 状态为失败,失败的状态值是222
Promise.race()
语法:Promise.race(.....)
接收的参数是一个可迭代对象,例如一个数组,并且数组中每个元素都是一个Promise实例对象。返回值由第一个完成的Promise决定,而不是有第一个被调用的Promise所决定。如果数组中最先完成Promise状态为成功,那么该方法所返回的Promise状态也是成功,否则则失败。
- 全部是同步Promise
const p1 = new Promise((resolve,reject)=>{
resolve(111);
})
const p2 = new Promise((resolve,reject)=>{
resolve(222);
})
const p3 = Promise.resolve(333);
const res = Promise.race([p1,p2,p3]);
console.log(res); // 状态为成功,状态值为111
- 存在异步Promise
const p1 = new Promise((resolve,reject)=>{
setInterval(()=>{
resolve(111);
},1000)
})
const p2 = new Promise((resolve,reject)=>{
resolve(222);
})
const p3 = Promise.resolve(333);
const res = Promise.race([p1,p2,p3]);
console.log(res); // 状态为成功,状态值为222
这里主要介绍了六种常用的方法,更多详细的方法可以参考MDN文档:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise