【前端进阶】Promise 学习笔记

学习参考：B站尚硅谷Promise进阶学习教程

什么是Promise

1. 理解
   Promise是JS中执行异步任务的新的解决方案
   从语法上来书：Promise是一个构造函数
   从功能上来说：Promise对象用来封装一个异步操作并可以获取其结果
2. Promise的状态
   初始化状态：pending
   成功状态：resolved
   失败状态：rejected
   状态改变：
   pending ——> resolved
   pending——>rejected
   Promise的状态变化只有这以上两种，且Promise对象值只能改变一次，无论成功或失败，都只有一个结果数据。
   成功的结果数据一般称为value，失败的结果数据一般称为reason
3. Promise的基本流程
   new Promise()时的状态时是pending状态
4. Promise的基本使用

 const promise = new Promise((resolve,reject)=>{
     //往执行器函数传入两个函数参数
        setTimeout(()=>{
     
                const num = Math.random();//返回0~1之间的数据
                if(num>0.5){
     
                    resolve('成功的数据,num=' + num);//回调函数
                }else{
     
                    reject('失败的数据，num=' + num);//回调函数
                }
            },1000)
        });
        promise.then(
        value=>{
     //onResolve函数
            console.log('成功的回调',value);
        },
        reason =>{
     //onReject函数
            console.log('失败的回调',reason);
        })

为什么要使用Promise

Promise比旧的纯回调函数的优势：

1. 指定回调函数的方式更加灵活
   旧的纯回调函数：必须在启动异步任务前指定
   promise：启动异步任务——>返回promise对象——>给Promise对象指定回调函数（甚至可以在异步任务结束之后指定）

 const promise = new Promise((resolve,reject)=>{
     //往执行器函数传入两个函数参数
 //在这里打印一下
 console.log('执行器函数开始执行');
        setTimeout(()=>{
     
                const num = Math.random();//返回0~1之间的数据
                if(num>0.5){
     
                    resolve('成功的数据,num=' + num);//回调函数
                }else{
     
                    reject('失败的数据，num=' + num);//回调函数
                }
            },1000)
        });
        //打印一下new Promise()之后
        console.log('new Promise()之后');
        //延迟执行回调函数，在得到结果之后再执行，依然可以取到promise的结果,
       //所以给Promise对象指定回调函数（甚至可以在异步任务结束之后指定），执行器函数执行的就是异步任务
        setTimeout({
     
        promise.then(
        value=>{
     //onResolve函数
            console.log('成功的回调',value);
        },
        reason =>{
     //onReject函数
            console.log('失败的回调',reason);
        })},2000);
        //回调函数在异步任务完成1秒之后再去取结果，依然可以取到
        

1. 支持链式调用，可以解决回调地狱的问题
   啥是回调地狱呢？
   回调地狱就是在回调函数中嵌套多个回调函数，导致代码阅读性差，难于理解
   
   如何使用promise解决回调地狱？因为promise支持链式调用，所以可以解决回调地狱
   
   但解决回调地狱的最终极办法并不是promise，因为在promise中还是存在回调函数，解决回调地狱的终极方案是使用async/await
   

如何使用Promise

1. promise的API/promise的语法
   
   Promise resolve/reject/then/catch方法的使用

    const p1 = new Promise((resolve,reject) => {
     
        resolve(1);
    })
    const p2 = Promise.resolve(2);
    const p3 = Promise.reject(3);
    p1.then(
        value => {
     
            console.log('成功' + value);
        }
    )
    p2.then(
        value => {
     
            console.log('成功' + value);
        }
    )
    p3.then(null,
        reason =>{
     
            console.log('失败' + reason)
        }
    )
    //p3也可以这样输出
    // p3.catch(
    //     reason =>{
     
    //         console.log('失败' + reason)
    //     }
    // )

promise all/race方法的使用

 const p1 = new Promise((resolve,reject) => {
     
        setTimeout(() => {
     resolve(1);},100);
        
    })
    const p2 = Promise.resolve(2);
    const p3 = Promise.reject(3);
    //promise race方法 其结果取决于最先完成并返回结果的promise
    const pRace = Promise.race([p1,p2,p3]);
    //const pRace = Promise.race([p3,p1,p2]);
    pRace.then(
        value => {
     
            console.log('成功' + value);
        },
        reason => {
     
            console.log('失败' + reason);
        }
    )

 //all方法传入一个数组，这个数组里是多个promise对象
    //其结果是 假如传入的promise对象数组中有一个对象是失败结果，那pAll的结果就是失败
    const pAll = Promise.all([p1,p2,p3]);
    //const pAll = Promise.all([p1,p2]);
    //全部promise对象是成功结果，那就返回一个成功结果的数组
    pAll.then(
        values => {
     
            console.log('多个成功结果' + values);
        },
        reason => {
     
            console.log('失败' + reason);
        }
    )