如何秒杀Promise面试题

如果你在面试的时候技术面给你出了点关于Promise的面试题首先不要慌，先问候他爹妈一套问候语！

然后切记不要(ps:这是病句别在意!🤣) 自己想找他要纸和笔

首先关于promise的面试题无非就是 promise 的状态和宏队列、微队列

看一道题：(小试牛刀😀)

js 复制代码

const promise = new Promise((resolve, reject) => {
  console.log(1);
  resolve(5);
  console.log(2);
});
promise.then(() => {
  console.log(3);
});
console.log(4);
// The output is 1, 2, 4, 3.

Remeber：在javascript中代码都是一行一行执行的什么队列任务都是噱头

解析：

开始执行任务
第一步声明 
第二步new Promise 传入回调函数 并且赋值 （传入的回调就直接执行了 输出1  promise状态为pending）
第三步resolve(5)  promise状态为fulfilled 
第四步 输出2
第五步 promise.then  当promise成功后请执行他的回调 但是注意 promise的then方法是要放入微队列的
第六步 不管队列 继续跑全局任务队列 输出4
第七步 执行微队列 输出3
所以答案是：1，2，4，3.

经过上面的学习我们知道

js首先执行全局任务遇到then 放到微队列中继续执行全局任务当全局任务没有任务后执行微队列！

看一道题：(小试牛刀😀)

js 复制代码

const promise = new Promise((resolve, reject) => {
    console.log(1);
    setTimeout(() => {
      console.log(2);
      resolve();
      console.log(3);
    },1000);
  });
  promise.then(() => {
    console.log(4);
  });
  console.log(5);

解析：

new --> 输出1 --> setTimeout加入宏任务 --> 等待setTimeout执行到resolve then加入微队列 --> 输出5
注意 执行顺序 全局任务 --> 微任务 --> 宏任务 (当微任务没有可以执行的任务的时候才会先执行宏任务)
答案为：1，5，2，3，4
why？当执行到setTimeout加入宏任务 人家then还没加微任务呢 此刻微任务为空 咋不执行宏任务呢是不是！

经过上面的学习我们知道

执行顺序全局任务 --> 微任务 --> 宏任务

看一道题：(小试牛刀😀)

js 复制代码

setTimeout(() => {
  console.log(1);
}, 1000);
const promise = new Promise((resolve, reject) => {
  console.log(2);
  resolve();
});
promise.then(() => {
  console.log(3);
});
console.log(4);

解析：

setTimeout进入宏任务 --> new直接执行 输出2 完成promise --> then进入微任务 --> 输出4
答案：2 4 3 1

看一道题：(小试牛刀😀)

js 复制代码

const promise1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve();
  }, 1000);
});
const promise2 = promise1.catch(() => {
  return 2;
});
console.log("promise1:", promise1);
console.log("promise2:", promise2);
setTimeout(() => {
  console.log("promise1:", promise1);
  console.log("promise2:", promise2);
}, 2000);

解析：

promise1 :pending
一秒后运行回调
promise1失败后运行回调
promise2：pending
console.log("promise1:", promise1);--->pending
console.log("promise2:", promise2);--->pending
两秒后运行回调
现在一秒到了 promise1:fulfilled
console.log("promise1:", promise1);--->fulfilled值为undefine
console.log("promise2:", promise2);--->现在promise1完成了你promise2没有对成功处理 所以你promise2 直接就用promise1的状态去处理 所以为 fulfilled值为undefine

上面的案例教会我们：

catch 方法返回的是一个新的 Promise 对象其状态由捕获的promise决定

看一道题：(小试牛刀😀)

js 复制代码

async function m() {
  const res = await 1;
  console.log(res);
}
m();
console.log(2);

解析：

javascript 复制代码

//改个写法你就知道了
function m() {
  return Promise.resolve(1).then((n) => {
    console.log(n);
  });
}
m();
console.log(2);
//.then 怎么样会进入微队列 暂不执行 先输出2 执行微队列然后输出1

看一道题：(小试牛刀😀)

js 复制代码

async function m() {
  console.log(0);
  const n = await 1;
  console.log(n);
}
(async () => {
  await m();
  console.log(2);
})();
console.log(3);

解析：

立即执行函数执行 等待m运行完成 m开始运行 输出0 n进入微队列等待输出1 输出1不执行 m就一直等待 现在到全局执行 输出3
输出完成后是 0 3 然后执行微任务队列 输出1 此时m运行完成 立即执行函数 内部的m也就完成了 也就输出2 了
也就是 0 3 1 2

看一道题：(小试牛刀😀)

js 复制代码

async function m1() {
  return 1;
}

async function m2() {
  const n = await m1();
  console.log(n);
  return 2;
}

async function m3() {
  const n = m2();
  console.log(n);
  return 3;
}

m3().then((n) => {
  console.log(n);
});
m3();
console.log(4);

解析：

m3().then()执行后 ：
m3调用m2 m2调用m1；
当本次调用来到m2的时候 他会进行await 不管你是什么状态都要进入微队列里面   console.log(n);也就是输出1 进入微队列；
当本次调用来到m3的时候 他没有用await 他不会等待直接输出 console.log(n); m2是用async标记的 直接就是返回一个promise <pending>(m2现在还在微队列中呢，没有完成)；
当来到m3().then()的时候 又进入了微队列等待输出3

小总结：m3().then()调用后 会输出一个 promise <pending> 微任务队列：等待输出1 等待输出3

m3()执行后：
m3调用m2 m2调用m1；
m2等待输出1进入微队列 m3直接输出promise <pending> 

所以结果是：

promise <pending> 
promise <pending> 
4
1
3
1

看一道题：(小试牛刀😀)

js 复制代码

Promise.resolve(1).then(2).then(Promise.resolve(3)).then(console.log);

秒杀小知识：当你看到Then的时候如果你发现传递的不是一个函数你就可以删掉就完事了！上面的then(2)删掉

js 复制代码

Promise.resolve(1).then(console.log);//就这样看 Promise.resolve(3)是一个对象不是函数

答案等于：1

js 复制代码

Promise.resolve(1).then((res) => {
  console.log(res);
});
Promise.resolve(1).then(console.log);

上面这俩哥们是等价的！

看一道题：(小试牛刀😀)

js 复制代码

var a;
var b = new Promise((res, rej) => {
  console.log("Promise1");
  setTimeout(() => {
    res();
  }, 1000);
})
  .then(() => {
    console.log("Promise2");
  })
  .then(() => {
    console.log("Promise3");
  })
  .then(() => {
    console.log("Promise4");
  });

a = new Promise(async (res, rej) => {
  console.log(a);
  await b;
  console.log(a);
  console.log("after1");
  await a;
  res(true);
  console.log("after2");
});
console.log("end");

解析：

await a;

res(true); 你等待不到结果的别想了 after2不能输出

new 的时候直接输出   console.log("Promise1");
宏任务：
微任务：  await b;
前期输出为：
Promise1
undefinde
end
Promise2
Promise3
Promise4
Promise<pending> 
after1

看一道题：(小试牛刀😀)

js 复制代码

async function async1() {
  console.log("async1 start");
  await async2();
  console.log("async1 end");
}

async function async2() {
  console.log("async2");
}
console.log("srript start");

setTimeout(() => {
  console.log("timeout");
}, 0);

async1();

new Promise((resolve, reject) => {
  console.log("promise1");
  resolve();
}).then(function () {
  console.log("promise2");
});
console.log("script end");

解析：

console.log("srript start");
console.log("async1 start");
console.log("async2");
console.log("promise1");
console.log("script end");
console.log("async1 end");
console.log("promise2");
console.log("timeout");

宏任务： console.log("timeout");
微任务： console.log("async1 end"); console.log("promise2");