前面我们已经对then方法的链式调用做了解释，那么then可以返回一个普通值，也可以返回一个promise对象，如果返回当前then方法返回的promise对象，那么就会出现循环调用，这种情况是不允许的。这句话有点绕，不好理解，结合代码：
promise.then(value => { // 1
console.log("首次调用>>>", value);
return other (); // 2.retrun promise.then()...
}, reason => {
console.log("首次调用失败>>>", reason);
return 200;
}).then(value => {
console.log("链式调用打印>>>", value);
}, reason => {
console.log("链式调用失败>>>", reason);
})
上述代码，如果此时在第1行调用的then方法中，return 当前这个then方法返回的promise对象，而不是other方法，那么就出现了循环调用的情况，死循环的情况在程序中是不允许的。
那么先用标准promise调用来看下这种情况：
新建测试html文件test.html：
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Promise 测试</title> </head> <body> <script> var promise = new Promise(function (resolve, reject) { resolve(100); }) // 测试 var p1 = promise.then(function (value) { console.log(value); return p1; }) p1.then(function () {}, function (reason) { console.log(reason.message); }) </script> </body></html>
控制台报错提示：不能循环调用promise
现在需要在我们自己的testPromise中加入对这部分异常的处理，
解决思路：
判断链式调用的then方法中，判断之前使用x变量存储的then方法返回值，是否和当前返回的promise对象相等，如果相等，那就是调用错误，拦截代码执行，并抛出TypeError，那么就可以检测到上述的循环调用。
以下是testPromise代码中新增逻辑：
class testPromise {
// 此处省略...字，这里只添加改动代码，后续的完整代码，我会在文章最后给出
then (successCallback, failCallback) {
let promise2 = new testPromise ((resolve, reject) => {
if (this.status === FULFILLED) {
// 异步处理，因为如果直接传入promise2，还没执行完，
// 需要在new testPromise执行完后才能得到promise2，所以这里改完异步执行
setTimeout(() => {
let x = successCallback(this.value);
/**
* 传入promise2用于和x做判断，这里会有个问题就是，如果是异步执行那么这里是在then执行中传入，
* 那么此时就会找不到这个promise2，所以这里调整为异步执行，在当前then方法执行完后再传入返回的promise2
*/
resolvePromise(promise2, x, resolve, reject);
}, 0)
} else if (this.status === REJECTED) {
// setTimeout(() => {
let y = failCallback(this.reason);
reject(y);
// }, 0)
} else {
this.successValue.push(successCallback);
this.failReason.push(failCallback);
return;
}
})
// 1.返回promise对象
return promise2
}
}
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>"));
}
if (x instanceof testPromise) {
// x.then(value => resolve(value), reason => reject(reason))
// 可简化为
x.then(resolve, reject);
} else {
// 普通值
resolve(x)
}
}
index.js中调用测试：
// 5.拦截then方法中循环调用回调的then方法
var p1 = promise.then(function (value) {
return p1;
});
p1.then(value => {
console.log("成功的回调>>>", value);
}, reason => {
console.log("失败的回调>>>", reason);
})
执行结果：
根据执行结果看，我们的执行拦截是生效的。
那么现在得到的完整代码如下：
testPromise.js：
// 定义状态
const PENDING = "pending";
const FULFILLED = "fulfilled";
const REJECTED = "rejected";
class testPromise {
/**
* 通过构造函数constructor接收传入的回调函数
* 构造函数不能被直接调用，必须通过new运算符在创建对象时才会自动调用，
* 当我们外部调用new myPromise()生成实例时，consctructor构造方法会执行，executor执行器立即执行
*
* executor代表执行器，会立即执行
*/
constructor (executor) {
// 执行器接收两个参数
executor(this.resolve, this.reject);
}
/**
* 初始状态为等待
* 每个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()(this.value);
}
// 调用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()(this.reason);
}
/**
* then方法
* 判断状态
* 定义在promise原型对象上的，
* 作用是指定resolved状态的回调函数或者rejected状态的回调函数。
* 也就是说resolve或reject方法更改promise的状态后，根据当前的状态，调用相应的回调函数
*/
then (successCallback, failCallback) {
/**
* 判断状态，并根据状态指定相应的回调函数
* 那么成功后的值，失败后的值在哪呢，就是resolve和reject方法在调用后传递的值
*
* 普通链式调用见下面1、2、3步
*/
let promise2 = new testPromise ((resolve, reject) => {
if (this.status === FULFILLED) {
setTimeout(() => {
// 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);
}, 0)
} else if (this.status === REJECTED) {
// setTimeout(() => {
let y = failCallback(this.reason);
reject(y);
// }, 0)
} else {
/**
* 在此处理异步情况，因为如果异步调用，此时promise状态为等待
* 此时调用不了成功或失败，因为不知道是成功还是失败
* 那么就需要把成功回调和失败回调存储，调用2s结束后，再调用相应的回调
*/
// 存储成功or失败的值，存储后就需要再2s后调用resolve方法，那么就需要在resolve方法中判断是否有successCallback
// this.successValue = successCallback;
// this.failReason = failCallback;
/**
* then方法重复调用，非链式调用
* 如果是同步，那么就有明确的状态，即走上面的fulfilled判断或者rejected判断即可
* 如果是异步，就需要存储这些异步的回调，在2s后依次执行
* 多个then方法调用，就需要使用数组存储
*/
this.successValue.push(successCallback);
this.failReason.push(failCallback);
return;
}
})
// 1.返回promise对象
return promise2
}
}
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;
index.js：只填写测试用例
const testPromise = require ("./test-promise");
let promise = new testPromise ((resolve, reject) => {
resolve("成功");
// reject("失败");
})
// 5.拦截then方法中循环调用回调的then方法
var p1 = promise.then(function (value) {
return p1;
});
p1.then(value => {
console.log("成功的回调>>>", value);
}, reason => {
console.log("失败的回调>>>", reason);
})
