**finally**方法:
-
无论当前promise对象的状态是成功还是失败,
finally方法的回调函数始终会被执行一次 -
finally方法的后边可使用then方法链式调用 -
finally不是静态方法,这个方法定义在testPromise这个类的原型上 -
finally方法对异步的处理
解决思路:
finally方法接收一个参数,这个参数是回调函数,定义为callback。- 要怎样得到当前
promise的这个状态?then方法可以得到此状态,在成功和失败的回调中都调用callback。 finally后可以使用then链式调用,即finally方法返回一个promise对象,后续即可链式调用then方法。- 异步代码如果直接执行返回值,那么异步代码就会不执行,这里借助
resolve方法,无论是什么值,转为promise执行,那么我们已有的逻辑中对promise异步已经做了处理。返回resolve方法并传入callback执行函数。
**testPromise.js**中:
/**
* 无论当前的promise的状态是成功还是失败,finally方法的回调函数始终会被执行一次
* finally方法可使用then方法链式调用
* finally不是静态方法
*/
finally(callback) {
return this.then((value) => {
return testPromise.resolve(callback().then(() => value));
// 直接return value异步代码不会执行
// return value;
}, reason => {
return testPromise.resolve(callback().then(() => {throw reason}));
})
}
**index.js**中:
// 9.promise.finally方法
function p1 () {
return new testPromise(function (resolve, reject) {
setTimeout(() => {
resolve("p1")
}, 2000);
})
}
function p2 () {
return new testPromise(function (resolve, reject) {
// reject("失败")
resolve("p2 成功")
})
}
p2().finally(() => {
console.log("finally");
return p1();
}).then(value => {
console.log(value);
}, reason => {
console.log(reason);
})
至此,test.Promise.js中代码应该如下:
// 定义状态
const PENDING = "pending";
const FULFILLED = "fulfilled";
const REJECTED = "rejected";
class testPromise {
/**
* 通过构造函数constructor接收传入的回调函数
* 构造函数不能被直接调用,必须通过new运算符在创建对象时才会自动调用,
* 当我们外部调用new myPromise()生成实例时,consctructor构造方法会执行,executor执行器立即执行
*
* executor代表执行器,会立即执行
*/
constructor (executor) {
try {
// 执行器接收两个参数
executor(this.resolve, this.reject);
} catch (error) {
this.reject(error);
}
}
/**
* 初始状态为等待
* 每个promise独有的
*/
status = PENDING;
// 定义成功的值
value = undefined;
// 定义失败的值
reason = undefined;
// 定义异步中【等待】状态的存储成功回调函数
// successValue = undefined;
// 重复调用then,使用数组存储
successValue = [];
// 定义异步中【等待】状态的存储失败回调函数
failReason = [];
// 调用resolve后传递成功的值
resolve = value => {
// resolve作用是修改状态为成功且不可更改,修改状态之前需要判断当前状态是否为等待,如果不是就返回
if (this.status !== PENDING) return;
this.status = FULFILLED;
// 保存成功之后的值
this.value = value;
// 处理异步,判断successValue是否有值,如果有就调用successCallback方法,并传入此时调用的值参数
// console.log("successValue>>>", this.successValue); // [Function (anonymous)]
/**
* 1.此时的successValue存放的是successCallback这个回调函数,
* 在调用2s后,执行resolve方法后,状态变为fulfilled,
* 那么调用then方法,即调用成功后的回调函数,此时this.successValue就是这个回调函数
* if (this.successValue) this.successValue(this.value);
*
* 2.重复调用then方法,那么就需要把存储在数组中的回调函数依次执行
* 且倒叙排列,让第一个进入数组的先执行
* while (this.successValue.length) this.successValue.shift()(this.value);
*/
while (this.successValue.length) this.successValue.shift()();
}
// 调用reject后传递失败的原因
reject = reason => {
if (this.status !== PENDING) return;
this.status = REJECTED;
// 保存失败原因
this.reason = reason;
// 异步调用
// if (this.failReason) this.failReason(this.reason);
while (this.failReason.length) this.failReason.shift()();
}
/**
* then方法
* 判断状态
* 定义在promise原型对象上的,
* 作用是指定resolved状态的回调函数或者rejected状态的回调函数。
* 也就是说resolve或reject方法更改promise的状态后,根据当前的状态,调用相应的回调函数
*/
then (successCallback, failCallback) {
successCallback = successCallback ? successCallback : value => value;
failCallback = failCallback ? failCallback : reason => reason;
/**
* 判断状态,并根据状态指定相应的回调函数
* 那么成功后的值,失败后的值在哪呢,就是resolve和reject方法在调用后传递的值
*
* 普通链式调用见下面1、2、3步
*/
let promise2 = new testPromise ((resolve, reject) => {
if (this.status === FULFILLED) {
setTimeout(() => {
try {
// 2.保存上一次then方法回调函数的返回值
let x = successCallback(this.value);
// 3.将上一次回到函数的返回值作为参数,传递给下一个then方法调用
// resolve(x);
/**
* 如果这里传入的是普通值,那么直接调用resolve方法,并把当前值传递给下一个promise对象
* 如果传入的是promise对象,那么需要先判断下promise状态,根据状态决定调用resolve还是reject,
* 并把相应的成功值或失败原因传给下一个promise对象
*
* 这里如果是异步还有重复调用resolve或reject方法,那么就把这个方法单独写出来,即用即调
* 此方法需要的参数即我们这里提到的三个:x、resolve、reject
*
* 传入promise2用于和x做判断,这里会有个问题就是,如果是异步执行那么这里是在then执行中传入,
* 那么此时就会找不到这个promise2,所以这里调整为异步执行,在当前then方法执行完后再传入返回的promise2
*/
resolvePromise(promise2, x, resolve, reject);
} catch (error) {
// 这里调用的是下一个then方法的reject方法,而不是this.reject
reject(error);
}
}, 0)
} else if (this.status === REJECTED) {
setTimeout(() => {
try {
let y = failCallback(this.reason);
reject(y);
} catch (error) {
reject(error);
}
}, 0)
} else {
/**
* 在此处理异步情况,因为如果异步调用,此时promise状态为等待
* 此时调用不了成功或失败,因为不知道是成功还是失败
* 那么就需要把成功回调和失败回调存储,调用2s结束后,再调用相应的回调
*/
// 存储成功or失败的值,存储后就需要再2s后调用resolve方法,那么就需要在resolve方法中判断是否有successCallback
// this.successValue = successCallback;
// this.failReason = failCallback;
/**
* then方法重复调用,非链式调用
* 如果是同步,那么就有明确的状态,即走上面的fulfilled判断或者rejected判断即可
* 如果是异步,就需要存储这些异步的回调,在2s后依次执行
* 多个then方法调用,就需要使用数组存储
*/
// try..catch中无法处理,所以改为push一个方法进去,在这个方法对回调函数进行异常捕获
// this.successValue.push(successCallback);
// this.failReason.push(failCallback);
this.successValue.push(() => {
setTimeout(() => {
try {
let x = successCallback(this.value);
resolvePromise(promise2, x, resolve, reject);
} catch (error) {
reject(error);
}
}, 0)
});
this.failReason.push(() => {
setTimeout(() => {
try {
let y = failCallback(this.reason);
reject(y);
} catch (error) {
reject(error);
}
}, 0)
});
return;
}
})
// 1.返回promise对象
return promise2
}
/**
* all方法
* 静态方法使用static关键字声明
* 1.接收数组作为参数,这里定义形参为array
* 2.返回的对象是promise对象
* 3.循环数组,判断当前的传入值是普通值还是promise对象,如果是普通值直接调用resolve方法返回
* 4.如何判断,即判断当前传入值是否在这个testPromsie类中
* 5.且需要一个数组接收处理后的promise对象
*/
static all (array) {
let result = [];
let index = 0;
return new testPromise((resolve, reject) => {
// 定义方法将promise放到result数组
function addData (key, value) {
result[key] = value;
// 对异步逻辑进行处理
index ++;
if (index === array.length) {
resolve(result);
}
}
for (let i = 0; i < array.length; i++) {
// array[i]是否是testPromise的一个实例
if (array[i] instanceof testPromise) {
// promise对象
array[i].then(value => addData(i, value), reason => reject(reason));
} else {
// 普通值
addData(i, array[i])
}
}
// 这里循环完立即执行,异步逻辑就不会处理,会导致这个异步没有执行
// resolve(result);
})
}
/**
* resolve方法
* 同样为静态方法
* 1.将给定值返回一个promise对象
* 2.返回的promise对象中包裹这个给定值
* 3.如果给定值是promise对象 直接返回
* 4.如果给定值是普通值,返回一个promise对象,包裹这个值
* 5.异步也可以执行
*/
static resolve (value) {
if (value instanceof testPromise) return value;
return new testPromise((resolve, reject) => { resolve(value) })
}
/**
* 无论当前的promise的状态是成功还是失败,finally方法的回调函数始终会被执行一次
* finally方法可使用then方法链式调用
* finally不是静态方法
*/
finally(callback) {
return this.then((value) => {
return testPromise.resolve(callback().then(() => value));
// 直接return value异步代码不会执行
// return value;
}, reason => {
return testPromise.resolve(callback().then(() => {throw reason}));
})
}
}
function resolvePromise(promise2, x, resolve, reject) {
// console.log(promise2 === x);
// 拦截循环调用then方法返回的promise对象
if (promise2 === x) {
return reject(new TypeError("Chaining cycle detected for promise #<Promise>"));
}
/**
* 判断普通值
* 方法:判断这个x是不是属于testPromise类的一个实例即可
*/
if (x instanceof testPromise) {
/**
* promise对象,需要调用这个promise对象的then方法,
* 那么then方法前面提过,接收成功和失败的回调函数作为参数,并把相应的value和reason传递下去
*/
// x.then(value => resolve(value), reason => reject(reason))
// 可简化为
x.then(resolve, reject);
} else {
// 普通值
resolve(x)
}
}
module.exports = testPromise;