示例1
// Promise 实例和同步代码一起执行
const promise = new Promise((resolve, reject)=>{
console.log(1);
resolve(5);
console.log(2);
});
promise.then((res)=>{
console.log(3, res);
})
console.log(4);
执行结果
Promise 创建后立即执行,输出1,2,4。 resolve 或 reject 函数在同步代码之后执行,等到 resolve 或 reject 执行后,进入 then 或 catch 函数,所以最后输出3。
示例2
// 同一个Promise 实例内 resolve和 reject 执行先后
const promise = new Promise((resolve, reject)=>{
resolve(1);
reject(2);
resolve(3);
});
promise.then((res)=>{
console.log("then:",res);
}).catch(err=>{
console.log("catch",err);
});
Promise 状态的变更只有一次,当执行 resolve 或者 reject,就完成一次状态变更。输出结果 【then: 1】。
示例3
// promise实例重复执行
const promise = new Promise((resolve, reject) => {
setTimeout(() => {
console.log(1);
resolve(2);
}, 1000);
});
const start = Date.now();
promise.then((res) => {
console.log(res, Date.now() - start);
});
promise.then(res => {
console.log(res, Date.now() - start);
});
当 Promise 实例变更状态后,就会触发所有的 then 或者 catch 函数,上面的代码中第一个 then 和第二个 then 函数执行的结果是一样的。输出【1,2 1012,2 1012】。
示例4
// 在then函数返回一个异常
const promise = new Promise((resolve, reject) => {
resolve(20);
});
promise.then((res) => {
console.log(res);
return new Error("Error")
}).then(res => {
console.log(22);
console.log('then', res);
}).catch(err => {
console.log("Error", err);
});
在 then 中 return 的异常,和 Promise 没有联系,所以不会触发 catch 函数。而是按照正常流程执行下去,把 then 中 return 的异常作为下一个 then 函数的的数据源。
注意:返回异常和抛出异常是不同概念的,如果是抛出异常就会被 catch 函数捕获,代码如下:
const promise = new Promise((resolve, reject) => {
resolve(20);
});
promise.then((res) => {
console.log(res);
throw new Error("Error1");
}).then(res => {
console.log(22);
console.log('then', res);
}).catch(err => {
console.log("Error2", err);
});
示例5
// then 的参数不是函数
const promise = new Promise((resolve, reject) => {
resolve(20);
});
promise.then(21) .then(res => {
console.log('then', res);
}).then(Promise.resolve(34)).catch(err => {
console.log("Error", err);
})
Promise 的 then 函数或 catch 函数接收的是一个函数,如果传入其他值,会产生穿透现象。也就是传入非函数的值会被忽略掉,执行后面的函数。
// 补充示例1
setTimeout(()=>{
console.log(1);
});
const promise = new Promise((resolve, reject)=>{
console.log(2);
resolve();
});
promise.then(()=>{
console.log(3);
});
console.log(4);
// 补充示例2
const promise1 = new Promise((resolve, reject) => {
setTimeout(() => {
reject();
}, 1000);
});
const promise2 = promise1.catch(() => {
return 2;
});
console.log('promise1', promise1);
console.log('promise2', promise2);
setTimeout(() => {
console.log('promise1-2000', promise1);
console.log('promise2-2000', promise2);
}, 2000);