js promise 异步编程面试题解析

题目

let main = () => {
    
    
	console.log("A");
	setTimeout(() => {
    
    //setTimeout方法的 开始
		console.log("B");
			new Promise((resolve) => {
    
     //第一个promise异步 开始
				console.log("C");
				resolve();
			}).then(() => {
    
     // 第一个promise异步之后执行的then
				console.log("D");
			})
		console.log("E");
	});                 //setTimeout方法的 结束
	new Promise((resolve) => {
    
    //第二个promise异步 开始
		console.log("F");
		resolve();
	}).then(() => {
    
     //第二个promise异步的then
		console.log("G");
	})
	
	console.log("X");
}
main();
//请写出打印顺序
//答案：A F X     G B C E    D

1.什么是异步编程？

同步按你的代码顺序执行，异步不按照代码顺序执行。
Promise 是一个 ES6 提供的类，目的是更加优雅地书写复杂的异步任务。
Promise 对象，有三种状态：Pending（进行中）、Resolved（已完成）和 Rejected（已失败）。
Promise的参数为两个函数。
Promise 构造函数接受一个函数作为参数，该函数是同步的并且会被立即执行，所以我们称之为起始函数。起始函数包含两个参数 resolve 和 reject，分别表示 Promise 成功和失败的状态。

题目中resolve(data);,是为了将Promise异步状态改为Resolved已完成状态，之后就可以执行.then。
resolve(data)中的data是想then传递数据。

2.setTimeout(fn,time);

setTimeout也是回调函数的方法；
例如: setTimeout(print, 3000); //3秒后执行print方法。
setTimeout与Promise的区别：
Promise的回调函数书写时是竖着写回调函数，setTimeout是嵌套编写不利于后期维护。

3.解析题目

Promise构建后会立即执行（所以一般会将Promise用函数包裹将其return出去）。例子在下方。setTimeout是根据参数时间放入到主线程中。

function print(delay, message) {
    
    
    return new Promise(function (resolve, reject) {
    
    
        setTimeout(function () {
    
    
            console.log(message);
            resolve();
        }, delay);
    });
}

1）setTimeout会之后放到主线程中，所以主线程开始执行下面的代码，.then 也是回调函数，也是之后再执行

let main = () => {
    
    
	console.log("A");
	          //setTimeout方法的 结束
	new Promise((resolve) => {
    
    //第二个promise异步 开始
		console.log("F");
		resolve();
	})
	})
	
	console.log("X");
}
main();
//打印：A F X

2）因为第二个Promise在上一步已经构建执行，所以这次开始回调函数执行.then

.then(() => {
    
     //第二个promise异步的then
		console.log("G");
	})
//打印：A F X G

3）开始执行加在主线程后面的函数setTimeout

setTimeout(() => {
    
    //setTimeout方法的 开始
		console.log("B");
			new Promise((resolve) => {
    
     //第一个promise异步 开始
				console.log("C");
				resolve();
			})
		console.log("E");
	});    
	//打印：A F X G B C E

4）Promise同步线程的执行完后，执行第一个Promise异步的回调函数.then

.then(() => {
    
     // 第一个promise异步之后执行的then
				console.log("D");
			})
			//打印：A F X G B C E D