Promise的用法以及一些练习题,彻底搞懂异步操作

217 阅读3分钟

Promise:

1.event loop执行顺序:同步代码->宏任务队列->微队伍队列

2.微任务:Promise.then(),catch()以及Promise为基础开发的其他技术,V8垃圾回收过程...

宏任务:script,setTimeout,setInterval...

3.Promise的初始状态为pending->reject/resolve

4.then,catch,finally的用法
then和.catch都会返回一个新的Promise。

在Promise中,返回任意一个非 promise 的值都会被包裹成 promise 对象,例如return 2会被包装为return Promise.resolve(2)

then方法是能接收两个参数的,第一个是处理成功的函数,第二个是处理失败的函数,再某些时候你可以认为catch是.then第二个参数的简便写法,相当于只能接收reject状态

.finally方法也是返回一个Promise,他在Promise结束的时候,无论结果为resolved还是rejected,都会执行里面的回调函数。

7.Promise.all()和Promise.race()的用法。

总的来说race和all 都是将多个Promise 封装成一个新的Promise。

all 所有Promise的结果都返回resolve才会执行then,返回结果为一个存放所有结果的数组里,如果有任何一个返回reject,则执行catch,如果第一个Promise是有延迟执行的 则会等待执行完才继续

12.png

//1,2,3,[1,2,3] .all()后面的.then()里的回调函数接收的就是所有异步操作的结果。

. race的方法执行结果取决于第一个Promise的返回结果,reject则执行catch,resolve则执行then,不会等待定时器的执行,会将定时器时间执行时间短的结果返回

题目合集:

1.const promise1 = new Promise((resolve, reject) => {

  console.log('promise1')

})

console.log('1', promise1);

//1,pending

遇到变量 = new Promise直接执行,pending->success/resolve

 

2.const promise = new Promise((resolve, reject) => {

  console.log(1);

  resolve('success')

  console.log(2);

});

promise.then(() => {

  console.log(3);

});

console.log(4);

//1,2,4,3

遇到.then放入微任务队列中等待宏任务执行完毕再执行

 

3.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);

//promise1,1 resolved,2 pending,resolve1

先执行new promise中,把.then放入微队列中,执行同步任务,promise1的状态为resolve,promise2的状态为pending,最后执行微队列

 

4.const fn = () => (new Promise((resolve, reject) => {

  console.log(1);

  resolve('success')

}))

fn().then(res => {

  console.log(res)

})

console.log('start')

//1,start,success

这个题的不同之处在于其new promise是放在fn中的此时就要看fn在何处执行,fn.then()中先执行promise,然后同步任务,最后执行微任务

 

5.const fn = () =>

  new Promise((resolve, reject) => {

    console.log(1);

    resolve("success");

  });

console.log("start");

fn().then(res => {

  console.log(res);

});

//start,1,success

这里的fn在console.log后面执行

 

6.console.log('start')

setTimeout(() => {

  console.log('time')

})

Promise.resolve().then(() => {

  console.log('resolve')

})

console.log('end')

//start,end,resolve,time

刚开始整个脚本作为一个宏任务来执行,对于同步代码直接压入执行栈进行执行,因此先打印出start和end。

setTimout作为一个宏任务被放入宏任务队列(下一个)

Promise.then作为一个微任务被放入微任务队列

本次宏任务执行完,检查微任务,发现Promise.then,执行它

接下来进入下一个宏任务,发现setTimeout,执行。

//setTimeout是作为下一个宏任务才最后执行的

微任务和宏任务皆为异步任务,它们都属于一个队列

13.png  

7.const promise = new Promise((resolve, reject) => {

  console.log(1);

  setTimeout(() => {

    console.log("timerStart");

    resolve("success");

    console.log("timerEnd");

  }, 0);

  console.log(2);

});

promise.then((res) => {

  console.log(res);

});

console.log(4);

//1,2,4,start,end,succes