promise 练习题（一）基础题型

//1、
const promise1 = new Promise((resolve, reject) => {
  console.log('promise1')
})
console.log('1', promise1);

分析过程

• 从上至下，先遇到new Promise，执行该构造函数中的代码promise1
• 然后执行同步代码1，此时promise1没有被resolve或者reject，因此状态还是pending

执行结果

'promise1'
'1' Promise{<pending>}

————————————————————————————————————————

//2、
const promise = new Promise((resolve, reject) => {
  console.log(1);
  resolve('success')
  console.log(2);
});
promise.then(() => {
  console.log(3);
});
console.log(4);

分析过程

• 从上至下，先遇到new Promise，执行其中的同步代码1
• 再遇到resolve('success')， 将promise的状态改为了resolved并且将值保存下来
• 继续执行同步代码2
• 跳出promise，往下执行，碰到promise.then这个微任务，将其加入微任务队列
• 执行同步代码4
• 本轮宏任务全部执行完毕，检查微任务队列，发现promise.then这个微任务且状态为resolved，执行它。

执行结果

1 2 4 3

————————————————————————————————————————

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

分析过程

• 和题目二相似，只不过在promise中并没有resolve或者reject
• 因此promise.then并不会执行，它只有在被改变了状态之后才会执行。

执行结果

1 2 4

————————————————————————————————————————

//4、
const promise1 = new Promise((resolve, reject) => {
  console.log('promise1')
  resolve('resolve1')
})
const promise2 = promise1.then(res => {
  console.log(res)
})
console.log('1', promise1);
console.log('2', promise2);

分析过程

• 从上至下，先遇到new Promise，执行该构造函数中的代码promise1
• 碰到resolve函数, 将promise1的状态改变为resolved, 并将结果保存下来
• 碰到promise1.then这个微任务，将它放入微任务队列
• promise2是一个新的状态为pending的Promise
• 执行同步代码1， 同时打印出promise1的状态是resolved
• 执行同步代码2，同时打印出promise2的状态是pending
• 宏任务执行完毕，查找微任务队列，发现promise1.then这个微任务且状态为resolved，执行它。

执行结果

'promise1'
'1' Promise{<resolved>: 'resolve1'}
'2' Promise{<pending>}
'resolve1'

————————————————————————————————————————

//5、
const fn = () => (new Promise((resolve, reject) => {
  console.log(1);
  resolve('success')
}))
fn().then(res => {
  console.log(res)
})
console.log('start')

分析过程

• fn函数它是直接返回了一个new Promise

执行结果

'start'
'success'

————————————————————————————————————————

//6、基于第五题做的变形
const fn = () =>
  new Promise((resolve, reject) => {
    console.log(1);
    resolve("success");
  });
console.log("start");
fn().then(res => {
  console.log(res);
});

分析过程

执行结果

"start"
1
"success"