关于promise的一些例题(运行步骤详细说明)

关于promise的一些例题(详细说明)

基本例题

// 直接运行 输出 1 2
const promise = new Promise((resolve, reject) => {console.log(1);resolve();console.log(2);
});// then后面放入微队列
promise.then(() => {console.log(3);
});// 输出4 之后没有代码了所以运行为队列中的 输出3
console.log(4);// 1 2 4 3

基础例题

// 1. 输出1
const promise = new Promise((resolve, reject) => {console.log(1);// 2. 放入宏队列// 4. 运行 输出 2 3setTimeout(() => {console.log(2);resolve();console.log(3);});
});
// 5. 上一个promise完成了 这个放入为队列然后直接运行 输出4
promise.then(() => {console.log(4);
});
// 3. 输出5
console.log(5);// 1 5 2 3 4

较为基础(考察promise的状态改变)

const promise1 = new Promise((resolve, reject) => {// 1. 发生计时 计时完成之后放入宏队列// 5. 计时一秒完成 promise1的状态为fulfilledsetTimeout(() => {resolve();}, 1000);
});// 2. promise1 未完成
// 6. promise1的状态为fulfilled 后续无对应状态的处理所以promise2的状态和前状态一致
const promise2 = promise1.catch(() => {return 2;
});// 3. 因为promise1未resolve 所以为pending, 故promise2 和上一个promise 一致,为pending. 输出 pending pending
console.log("promise1", promise1);
console.log("promise2", promise2);// 4. 计时2秒后加入宏队列
// 7. 计时2秒完成 输出 fulfilled fulfilled
setTimeout(() => {console.log("promise1", promise1);console.log("promise2", promise2);
}, 2000);// pending pending fulfilled fulfilled

async 和 await的使用

async function m() {const n = await 1;console.log(n);
}// 1. await 左边等于放入then中 await1 立即完成log(n)放入微队列
// 3. 执行栈没有代码了 运行微队列输出1
m();
// 2. 输出2
console.log(2);// 2 1

较为简单

// 函数定义不看
async function m() {// 2. log 1 直接放入微队列const n = await 1;// 5. 执行栈无其他函数 输出 1console.log(n);
}//立即执行函数
(async () => {// 1. 运行mawait m();// 3. 等待m运行完成// 6. m运行完成 输出2console.log(2);
})();// 4. 输出 3
console.log(3);// 3 1 2

不是很难就是有点绕(注意await后面的会直接运行前面的等于放在then里面)

// 函数定义不看
async function m1() {return 1;
}async function m2() {// 3. 运行m1 await左边等于在then中运行 微队列放入1// 8. 运行m1 await左边等于在then中运行 微队列放入1const n = await m1();console.log(n);return 2;
}async function m3() {// 2. m2 因为标记了async所以必定返回promise,但是目前m2并未执行完毕所以 n为pending// 7. 与上面理由相同const n = m2();// 4. 输出pending// 9. 输出pendingconsole.log(n);// 相当于 Promise.resolve(3)return 3;
}// 1. 运行m3
m3().then((n) => {console.log(n); // 5. 微队列放入3
});// 6. 运行m3
m3();// 10. 输出 4
console.log(4);
// 11. 依次运行微队列 1 3 1// pending pending 4 1 3 1

在这里插入图片描述

这个没遇到过是真的不知道

// then中只能接受函数 如果不是函数就不用管
Promise.resolve(1).then(2).then(Promise.resolve(3)).then(console.log);
// 输出 1

这个较为直观没有很绕(知道值是怎么赋值的就行)

var a;
var b = new Promise((resolve, reject) => {// 1. 输出 promise1console.log("promise1");// 2. 计时一秒后进入宏队列setTimeout(() => {resolve();}, 1000);
}).then(() => {console.log("promise2");}).then(() => {console.log("promise3");}).then(() => {console.log("promise4");});a = new Promise(async (resolve, reject) => {// 3. a未完成赋值为 undefinedconsole.log(a);// 5. 等待b一秒结束 then全部完成 依次输出 promise2 promise3 promise4await b; // 要等待b结束 但是程序不会卡住 就直接完成赋值了// 6. a现在未完成为pending.console.log(a);// 7. 输出after1console.log("after1");// 8. 等待自己但是永远不会完成后面的不运行await a;resolve(true);console.log("after2");
});// 4. 输出 end
console.log("end");// promise1 undefined end promise2 promise3 promise4 pending after1

哪年的面试题啊忘记了

async function async1() {// 3. 输出 async1 startconsole.log("async1 start");await async2();// 5. 放入微队列console.log("async1 end");
}
async function async2() {// 4. 输出 async2console.log("async2");
}// 1. 输出 script start
console.log("script start");// 2. 放入宏队列 setTimeout
setTimeout(function () {console.log("setTimeout");
}, 0);async1();new Promise(function (resolve) {// 6. 输出promise1console.log("promise1");resolve();
}).then(function () {// 7. 放入微队列console.log("promise2");
});
// 8. 输出 script end
console.log("script end");// 9. 结算微队列和宏队列得
//  script start async1 start async2 promise1 script end async1 end promise2 setTimeout