promise介绍

promise的作用
用来解决异步编程中回调地狱问题的。

回调地狱：
在异步js中，回调函数嵌套的太多，这就形成了回调地狱。

回调地狱的缺点：
1.不便于阅读
2.不利于维护。
例子
向对象求婚。
1.女朋友要考虑一秒钟再答复你，
2.同意后，让女孩父亲考虑一秒，再答复你，
3.同意后，让女孩母亲考虑一秒，再答复你，
4.同意后，让女孩姐姐考虑一秒钟，同意后，
5.让家里的小黄也得喜欢你，
6.恭喜你，进入了爱情的坟墓。

js代码

setTimeout(()=>{
      //考虑一秒钟
      if(Math.round(Math.random())){      //Math.round(Math.random()) 随机生成 01     0为false  1为真
        console.log("女孩同意了");
        setTimeout(()=>{
          if(Math.round(Math.random())){
            console.log("女孩父亲同意了");
            setTimeout(()=>{
              if(Math.round(Math.random())){
                console.log("女孩母亲同意了");
                setTimeout(()=>{
                  if(Math.round(Math.random())){
                    console.log("女孩姐姐同意了");
                    setTimeout(()=>{
                      if(Math.round(Math.random())){
                        console.log("小黄也喜欢你！");
                        console.log("恭喜你，进入了爱情的坟墓。");
                      }else{
                        console.log("汪汪");
                      }
                    },1000)
                  }else{
                    console.log("姐姐说：你要给我介绍男朋友");
                  }
                },1000)
              }else{
                console.log("女孩母亲说：彩礼三十万");
              }
            },1000)
          }else{
            console.log("女孩父亲说：城里买房了吗");
          }
        },1000)
      }else{
        console.log("女孩说：你是一个好人");
      }
      
    },1000)

Promise介绍
Promise是ES6新增的一门技术
1.promise是一个构造函数
2.promise 对象用来封装异步代码 可以获取成功/失败的返回值
代码示例

 //resolve 成功后执行的操作 reject失败后执行的操作
         const p = new Promise((resolve,reject)=>{
             //异步代码 如果成功就去执行resollve函数，失败 执行reject
             if(Math.round(Math.random())){
                 resolve()
             }else{
                 reject();
             }
         });
         //then函数中的实参就是resolve
         p.then(()=>{
             console.log("成功了");
         });

         p.catch(()=>{
             console.log("失败了");
         })

promise的状态
promise对象 本质上代表的是一个未完成，但预计将要完成的操作
三种状态
pending 初始值
fulfilled 成功的状态
rejected 失败的状态

    promise构造函数中需要传入一个回调函数 该函数有两个参数 resolve 和 reject
    resolve 函数：会将promise对象的状态从peding变为fulfilled
    reject函数： 会将promise对象从pending变为rejected

如图

promise改进上面代码

   function getAllow(data,err){
            return new Promise((resolve,reject)=>{
                setTimeout(()=>{
                    if(Math.round(Math.random())){
                        //成功了
                        resolve(data)
                    }else{
                        //失败了
                        reject(err);
                    }
                },1000)
            })
        }
        //结果是一个promise对象
        getAllow("女孩同意了","女孩说:你是个好人").then((data)=>{
            console.log(data);
            return getAllow("父亲同意了","父亲说：城里买房了吗？");
        }).then((data)=>{
            console.log(data);
            return getAllow("母亲同意了","母亲说：彩礼三十万");
        }).then((data)=>{
            console.log(data);
            return getAllow("姐姐同意了","姐姐说：你要给我介绍男盆友");
        }).then((data)=>{
            console.log(data);
            return getAllow("小黄也喜欢你","汪汪");
        }).then((data)=>{
             console.log(data);
             return getAllow("恭喜你!进入爱情的坟墓")
        }).catch((err)=>{
            console.log(err);
        })

promise方法

  //resolve方法返回一个成功状态的promise对象
        let p1 = Promise.resolve("ok");
         console.log(p1);
        // reject方法返回一个失败状态的promise对象
        let p2 = Promise.reject("error");
         console.log(p2);
        let p4 = Promise.reject("123");


        // all接受一个包含多个promise对象的数组 返回值 如果传入的promise对象
        let p3 = Promise.all([p1,p2,p4]);
         console.log(p3);

        let p5 = Promise.resolve("成功");
        //let p3 = Promise.all([p1,p5]);
        //console.log(p3);

        //promise.all 用于需要多個异步操作都成功的时候 比如：分段读取一个文件等。

asyc介绍

async 异步 用来声明异步函数 该函数会返回一个promise对象 函数前面必须要有async关键字
示例

  async function fn(){
             if(Math.round(Math.random())){
                 //默认返回一个成功状态的promise对象 该结果是有 return来决定的
                 return "ok"
             }else{
                 //抛出错误时，返回一个失败状态的promise对象
                 throw new Error("失败了");
             }
         }
         let p = fn();
         p.then((data)=>{
             //获取成功的值 在then的回调函数中定义一个形参接受
             console.log(data); //ok
         }).catch((err)=>{
             console.log(err);
         })
         console.log(p);

await表达式
asyn + await 能让我们以写同步代码的格式 来写异步代码
awit的用法
1.await的关键字必须写在async函数中。但是async函数可以没有await
2.await右侧书写表达式，表达式一般返回值为promise对象
3.await返回的是promise成功的结果
4.await的promise失败了，就会抛出异常，可以通过tryCatch来处理异常
示例

  const p = new Promise((resolve,reject)=>{
          if (Math.round(Math.random())) {
        resolve("成功了")
      }  else {
        reject("失败了")
      }
      
    });


         async function fn(){
             try{
                 //res的值就是promise成功的值
                 let res = await p;
                 console.log(res); //成功了
             }catch(error){
                //error就是promise对象失败时，传入的值
                console.log(error);
             }
         }
        
         fn();

await+async案例

  function getAllow(data,err){
            return new Promise((resolve,reject)=>{
                setTimeout(()=>{
                    if(Math.round(Math.random())){
                        //成功了
                        resolve(data)
                    }else{
                        //失败
                        reject(err);
                    }
                },100)
            })
        }
        async function main(){
            try{
                //如果成功，gril变量中的就是成功后的结果  18行的data
        let gril = await getAllow("女孩同意了", "你是一个好人");
        console.log(gril);
        let father = await getAllow("女孩父亲同意了", "女孩父亲：城里买房了吗");
        console.log(father);
        let mather = await getAllow("母亲同意了", "母亲说：彩礼三十万");
        console.log(mather);
        let sister = await getAllow("姐姐同意了", "姐姐说：你要给我介绍男朋友");
        console.log(sister);
        let smallYellow = await getAllow("小黄也喜欢你", "汪汪");
        console.log(smallYellow);
        console.log("恭喜你，进入了爱情的坟墓。");
            }catch (error){
                console.log(error);
            }
        }
        main();