什么是Promise
Promise是一个对象,代表了异步操作的最终完成或者失败。
下图为MDN中的Promise流程图
Promise存在三种状态分别为:
其中fulfill和reject状态也被称之为已敲定(settled),即非pending状态
- pending(等待中):初始状态,还没有确定的结果
- fulfill(已兑现):成功状态,操作已完成
- reject(已拒绝):失败状态,操作未完成
thenable
Promises/A+ 对于thenable的定义是:一个定义
then 方法的对象或函数
例如:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21
| const thenableFn = () => { return { then: (resolve, reject) => [ resolve('thenableFn Success') ] } }
const thenableobj = { then: (resolve, reject) => { resolve('thenableFn Success') } }
thenableFn().then((res) => { console.log(res); })
thenableobj.then((res) => { console.log(res); })
|
Promise中的方法有哪些
实例方法
then
then方法接受两个参数,分别用于Promise在fulfilled与reject情况下的回调函数,then也会返回一个promise对象,这也就是为什么可以实现链式调用的原因
1 2 3 4 5 6 7 8 9 10 11 12 13 14
| const promise = new Promise((resolve, reject) => { resolve('resolved1'); })
promise.then((value) => { console.log(value); return 'resolved2'; }).then((value) => { console.log(value); return 'resolved3'; }).then((value) => { console.log(value); });
|
catch
catch是在promise被拒绝时使用的一个函数,它也会返回一个promise对象。
1 2 3 4 5 6 7 8 9 10 11
| const promise = new Promise((resolve, reject) => { reject('error'); })
promise.then((res) => { console.log('first then:', res); }).catch((err) => { console.log(err); }).then((res) => { console.log('second then:', res); })
|
finally
finally在promise敲定(settled,无论是resolve还是reject)后执行,同时它也返回一个promise,在后面依旧可以进行链式调用。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
| const promise = new Promise((resolve, reject) => { reject('error'); })
promise.then((res) => { console.log('first then:', res); }).catch((err) => { console.log(err); }).then((res) => { console.log('second then:', res); }).finally(() => { console.log('finally'); }).then((res) => { console.log('third then:', res); });
|
静态方法
reslove
返回一个promise对象,并附带兑现的值
reject
返回一个promise对象,并附带拒绝的原因
all
接收一个promise可迭代对象,并返回一个promise。在所有传入的promise兑现后,返回一个包含所有promise对象兑现值的数组;如果其中有promise被拒绝,那么返回第一个promise被拒绝的原因
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
| const promiseA = new Promise((resolve, reject) => { resolve('successA'); })
const promiseB = new Promise((resolve, reject) => { resolve('successB'); })
const promiseC = new Promise((resolve, reject) => { resolve('successC'); })
Promise.all([promiseA, promiseB, promiseC]).then((res) => { console.log(res); }).catch((err) => { console.log(err); });
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
| const promiseA = new Promise((resolve, reject) => { resolve('successA'); })
const promiseB = new Promise((resolve, reject) => { reject('errorB'); })
const promiseC = new Promise((resolve, reject) => { resolve('successC'); })
Promise.all([promiseA, promiseB, promiseC]).then((res) => { console.log(res); }).catch((err) => { console.log(err); });
|
allSettled
接收一个promise的可迭代对象,返回每个promise结果描述的数组
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21
| const promiseA = new Promise((resolve, reject) => { resolve('successA'); })
const promiseB = new Promise((resolve, reject) => { reject('errorB'); })
const promiseC = new Promise((resolve, reject) => { resolve('successC'); })
Promise.allSettled([promiseA, promiseB, promiseC]).then((res) => { console.log(res); })
|
race
接收一个promise可迭代对象,返回一个promise,哪个promise先敲定就先返回哪个(无论是resolve还是reject)
1 2 3 4 5 6 7 8 9 10 11 12 13
| const promise1 = new Promise((resolve, reject) => { setTimeout(resolve, 500, 'one'); });
const promise2 = new Promise((resolve, reject) => { setTimeout(resolve, 100, 'two'); });
Promise.race([promise1, promise2]).then((value) => { console.log(value); });
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
| const promise1 = new Promise((resolve, reject) => { setTimeout(resolve, 500, 'one'); });
const promise2 = new Promise((resolve, reject) => { setTimeout(reject, 100, 'two'); });
const promise3 = new Promise((resolve, reject) => { setTimeout(resolve, 200, 'three'); });
Promise.race([promise1, promise2, promise3]).then((value) => { console.log(value); }).catch((err) => { console.log(err); });
|
any
接收一个promise可迭代对象,返回第一个被兑现(resolve)promise的兑现值(会忽略之前的reject),如果所有promise都被拒绝,那么以数组的形式返回所有被拒绝的原因。
如果文中有任何错误欢迎指正~还是建议直接看官网理解可能会更好
Promise
- JavaScript | MDN
Promises/A+
45道Promise题