Promise入门

1. Promise的基本概念

• 男女相爱了，女方向男方许下一个承诺怀孕new Promise，这是会产生两种结果怀上(resolve)和没怀上(reject)，resolve对应then，reject对应catch，无论是否怀上都会执行finally。

• 下面是一个图片的异步加载过程，当图片加载成功时执行resolve方法，将图片渲染到页面，加载失败时reject方法，输出加载错误。

2. Promise有几种状态?

• new Promise但是未执行resolve、reject，状态：pending
• 执行resolve 状态：fullfilled
• 执行reject状态：rejected

const promise1 = new Promise((resolve,reject)=>{});
const promise2 = new Promise((resolve,reject)=>{resolve()});
const promise3 = new Promise((resolve,reject)=>{reject()});
console.log(promise1,`promise1`);
console.log(promise2,`promise2`);
console.log(promise3,`promise3`);

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GHefBTrg-1678081565404)(D:/typoraImg/image-20230306115820468.png)]

3. Promise的状态是否可变?

​ 不可变，resolve和reject谁先执行，promise的状态就是那个。

4. Promise如何解决地域回调?

• 在then返回Promise实例，之后链式调用，来解决回调地狱。

       function request1(){return new Promise(resolve=>resolve(1));}function request2(){return new Promise(resolve=>resolve(2));}function request3(){return new Promise(resolve=>resolve(3));}request1().then(v=>{console.log(`第${v}层`);return request2();}).then(v=>{console.log(`第${v}层`);return request3();}).then(v=>{console.log(`第${v}层`);})
  

5. Promise有哪些方法?他们的应用场景是什么?(all/race)

• Promise.all([]) 里面传入数组，会返回一个Promise实例，执行then方法时：
  • 如果都是resolve，那么会按照，传入参数的顺序输出。如下：虽然promise3是最先执行结束的，但是打印出来是[1,2,3];
  • 如果有一个reject，那么立即执行reject,其他的不会支持性，如果有多个reject，只执行最先执行结束的。

            const promise1 = new Promise(resolve=>{setTimeout(()=>{resolve(1);},3000)})const promise2 = new Promise(resolve=>{setTimeout(()=>{resolve(2);},2000)})const promise3 = new Promise(resolve=>{setTimeout(()=>{resolve(3);},1000)})const promiseAll = Promise.all([promise1,promise2,promise3]);promiseAll.then(v=>{console.log(v);}).catch(v=>{console.log('catch',v);})

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6lKdGTDm-1678081565404)(D:/typoraImg/image-20230306131324825.png)]

• Promise.race() ：谁先执行结束，就执行谁，然后不在执行其他Promise，这里resolve和reject优先级相同。
• Promise.all() 原理解析及使用指南 - 掘金 (juejin.cn)
• 关于 Promise.all 和 async await 这档子事儿 - 掘金 (juejin.cn)

6. 如何让Promise顺序执行?(async/await)

            const promise1 = new Promise(resolve=>{setTimeout(()=>{resolve(1);},3000)})const promise2 = new Promise(resolve=>{setTimeout(()=>{resolve(2);},2000)})const promise3 = new Promise(resolve=>{setTimeout(()=>{resolve(3);},1000)})async function execute(){await promise1.then(v=>console.log(v));await promise2.then(v=>console.log(v));await promise3.then(v=>console.log(v));}execute();