-
Promise 的状态和值
-
状态
- Pending（进行中）
- Resolved（已成功）
- Rejected（已失败）
状态只能由 pending 到 resolved 或 rejected，且改变后将一直保持这个状态。
-
值
- 状态改变时传递给回调函数的值
- 初始值为 undefined
-
-
基本结构
new Promise((resolve, reject) => {
setTimeout(() => {
resolve('Resolved')
},1000)
})
- 代码实现 constructor
const Pending = 'Pending';
const Resolved = 'Resolved';
const Rejected = 'Rejected';
class MyPromise {
constructor(handler){
if(typeof handler !== 'function'){
throw new Error('MyPromise handler should be function')
}
//添加值和状态
this._value = undefined;
this._status = Pending;
try{
handler(this._resolve.bind(this),this._reject.bind(this))
}
catch(e){
this.reject(e)
}
}
_resolve(val){
this._value = val;
this._status = Resolved;
}
_reject(val){
this._value = val;
this._status = Rejected;
}
}
- 实现 then 方法
class MyPromise{
constructor(handler){
//...
}
//...
//接收两个可选参数
then(onFulfiled, onRejected){
const { _status, _value } = this;
switch(_status){
//当状态为 pending，将 then 方法回调函数加入执行队列等待执行
case Pending：
this._resolvedQueues.push(onResolved);
this._rejectedQueues.push(onRejected);
break;
//当状态发生改变，则执行对应的回调函数
case Resolved:
onResolved(_value);
break;
case Rejected:
onRejected(_value);
break;
}
//返回一个新的 Promise 实例，供链式调用
return new MyPromise((resolve,reject) => {
})
}
}
- 补充 catch 和 finally
class MyPromise{
constructor(){
//...
}
then(){
//...
}
catch(onRejected){
//...
}
finally (cb) {
return this.then(
value => MyPromise.resolve(cb()).then(() => value),
reason => MyPromise.resolve(cb()).then(() => { throw reason })
);
};
}
- 补充静态方法 resolve、reject、all、race
class MyPromise{
constructor(){
//...
}
then(){
//...
}
catch(onRejected){
//...
}
static resolve(value){
// 如果参数是MyPromise实例，直接返回这个实例
if (value instanceof MyPromise) return value
return new MyPromise(resolve => resolve(value))
}
static reject(value){
return new MyPromise((resolve ,reject) => reject(value))
}
static all(){
//...
}
static race(){
//...
}
}
- 完整代码
// 判断变量否为function
const isFunction = variable => typeof variable === 'function'
// 定义Promise的三种状态常量
const PENDING = 'PENDING'
const Resolved = 'Resolved'
const REJECTED = 'REJECTED'
class MyPromise {
constructor (handle) {
if (!isFunction(handle)) {
throw new Error('MyPromise must accept a function as a parameter')
}
// 添加状态
this._status = PENDING
// 添加状态
this._value = undefined
// 添加成功回调函数队列
this._resolvedQueues = []
// 添加失败回调函数队列
this._rejectedQueues = []
// 执行handle
try {
handle(this._resolve.bind(this), this._reject.bind(this))
} catch (err) {
this._reject(err)
}
}
// 添加resovle时执行的函数
_resolve (val) {
const run = () => {
if (this._status !== PENDING) return
// 依次执行成功队列中的函数，并清空队列
const runResolved = (value) => {
let cb;
while (cb = this._resolvedQueues.shift()) {
cb(value)
}
}
// 依次执行失败队列中的函数，并清空队列
const runRejected = (error) => {
let cb;
while (cb = this._rejectedQueues.shift()) {
cb(error)
}
}
/* 如果resolve的参数为Promise对象，则必须等待该Promise对象状态改变后,
当前Promsie的状态才会改变，且状态取决于参数Promsie对象的状态
*/
if (val instanceof MyPromise) {
val.then(value => {
this._value = value
this._status = Resolved
runResolved(value)
}, err => {
this._value = err
this._status = REJECTED
runRejected(err)
})
} else {
this._value = val
this._status = Resolved
runResolved(val)
}
}
// 为了支持同步的Promise，这里采用异步调用
setTimeout(run, 0)
}
// 添加reject时执行的函数
_reject (err) {
if (this._status !== PENDING) return
// 依次执行失败队列中的函数，并清空队列
const run = () => {
this._status = REJECTED
this._value = err
let cb;
while (cb = this._rejectedQueues.shift()) {
cb(err)
}
}
// 为了支持同步的Promise，这里采用异步调用
setTimeout(run, 0)
}
// 添加then方法
then (onResolved, onRejected) {
const { _value, _status } = this
// 返回一个新的Promise对象
return new MyPromise((onResolvedNext, onRejectedNext) => {
// 封装一个成功时执行的函数
let resolved = value => {
try {
if (!isFunction(onResolved)) {
onResolvedNext(value)
} else {
let res = onResolved(value);
if (res instanceof MyPromise) {
// 如果当前回调函数返回MyPromise对象，必须等待其状态改变后在执行下一个回调
res.then(onResolvedNext, onRejectedNext)
} else {
//否则会将返回结果直接作为参数，传入下一个then的回调函数，并立即执行下一个then的回调函数
onResolvedNext(res)
}
}
} catch (err) {
// 如果函数执行出错，新的Promise对象的状态为失败
onRejectedNext(err)
}
}
// 封装一个失败时执行的函数
let rejected = error => {
try {
if (!isFunction(onRejected)) {
onRejectedNext(error)
} else {
let res = onRejected(error);
if (res instanceof MyPromise) {
// 如果当前回调函数返回MyPromise对象，必须等待其状态改变后在执行下一个回调
res.then(onResolvedNext, onRejectedNext)
} else {
//否则会将返回结果直接作为参数，传入下一个then的回调函数，并立即执行下一个then的回调函数
onResolvedNext(res)
}
}
} catch (err) {
// 如果函数执行出错，新的Promise对象的状态为失败
onRejectedNext(err)
}
}
switch (_status) {
// 当状态为pending时，将then方法回调函数加入执行队列等待执行
case PENDING:
this._resolvedQueues.push(resolved)
this._rejectedQueues.push(rejected)
break
// 当状态已经改变时，立即执行对应的回调函数
case Resolved:
resolved(_value)
break
case REJECTED:
rejected(_value)
break
}
})
}
// 添加catch方法
catch (onRejected) {
return this.then(undefined, onRejected)
}
// 添加静态resolve方法
static resolve (value) {
// 如果参数是MyPromise实例，直接返回这个实例
if (value instanceof MyPromise) return value
return new MyPromise(resolve => resolve(value))
}
// 添加静态reject方法
static reject (value) {
return new MyPromise((resolve ,reject) => reject(value))
}
// 添加静态all方法
static all (list) {
return new MyPromise((resolve, reject) => {
/**
* 返回值的集合
*/
let values = []
let count = 0
for (let [i, p] of list.entries()) {
// 数组参数如果不是MyPromise实例，先调用MyPromise.resolve
this.resolve(p).then(res => {
values[i] = res
count++
// 所有状态都变成resolved时返回的MyPromise状态就变成resolved
if (count === list.length) resolve(values)
}, err => {
// 有一个被rejected时返回的MyPromise状态就变成rejected
reject(err)
})
}
})
}
// 添加静态race方法
static race (list) {
return new MyPromise((resolve, reject) => {
for (let p of list) {
// 只要有一个实例率先改变状态，新的MyPromise的状态就跟着改变
this.resolve(p).then(res => {
resolve(res)
}, err => {
reject(err)
})
}
})
}
finally (cb) {
return this.then(
value => MyPromise.resolve(cb()).then(() => value),
reason => MyPromise.resolve(cb()).then(() => { throw reason })
);
}
}
