关于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 3
	setTimeout(() => {
		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的状态为fulfilled
	setTimeout(() => {
		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. 执行栈无其他函数 输出 1
	console.log(n);
}

//立即执行函数
(async () => {
  // 1. 运行m
	await m();
  // 3. 等待m运行完成
  // 6. m运行完成 输出2
	console.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中运行 微队列放入1
	const 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. 输出pending
	console.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. 输出 promise1
	console.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未完成赋值为 undefined
	console.log(a);
  // 5. 等待b一秒结束 then全部完成 依次输出 promise2 promise3 promise4
	await b; // 要等待b结束 但是程序不会卡住 就直接完成赋值了
  // 6. a现在未完成为pending.
	console.log(a);
  // 7. 输出after1
	console.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 start
	console.log("async1 start");
	await async2();
  // 5. 放入微队列
	console.log("async1 end");
}
async function async2() {
  // 4. 输出 async2
	console.log("async2");
}

// 1. 输出 script start
console.log("script start");

// 2. 放入宏队列 setTimeout
setTimeout(function () {
	console.log("setTimeout");
}, 0);

async1();

new Promise(function (resolve) {
  // 6. 输出promise1
	console.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

输出那栏表示的是没有算入宏/微队列的输出完整答案再加上队列中的就行