说出示例代码执行结果(Promise)

97 阅读2分钟

示例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);

执行结果 image.png

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);
});

image.png

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); 
});

image.png

当 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); 
});

image.png

在 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); 
});

image.png

示例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); 
})

image.png

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);

image.png

// 补充示例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);

image.png