ES6-----promise的详细用法

约定不等于承诺〃 2022-01-28 00:35 338阅读 0赞

# 01.promise基本操作 #

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=Edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
      <meta name="apple-mobile-web-app-capable" content="yes">
      <meta name="apple-mobile-web-app-status-bar-style" content="black">
      <meta name="format-detection" content="telephone=no">
      <title>Title</title>
      <meta name="description" content="">
      <meta name="keywords" content="">
      
      
    
    </head>
    <body>
    
    
    
    <script>
      /*
    
        为什么要有promise：解决（回调地狱）的问题
    
        回调地狱：
    
            //跟以前的if条件地狱很像
            // if(){
            //     if(){
            //         if(){
            //         }
            //     }
            // }
    
            $.get("/getUser",function(res){
                $.get("/getUserDetail",function(){
                    $.get("/getCart",function(){
                        $.get("/getBooks",function(){
                            //...
                        })
                    })
                })
            })
    
          //node开发：读取文件；开个服务器、接收一个请求、请求路径、访问数据库
    
    
      * */
    
    
      //把异步操作封装在一个promise对象中
      function fn() {
        return new Promise(function (resolve,reject) {
          setTimeout(()=> {
            console.log("您好");
            //其实异步逻辑，到这款其实已经执行完毕了，就可以告诉外界，可以执行其他操作了，如果让外界得知？
            resolve();
          },1000)
        })
      }
    
      //调用了这个函数，
      fn().then(res =>{
        //执行到下一步
        console.log("下一步");
        fn().then(res=>{
          console.log("执行第二步")
        })
      })
      //输出顺序：
      //你好
      //下一步
      //你好
      //执行第二步
    
    </script>
    </body>
    </html>

# 02-1.promise如任何解决回调地狱的 #

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=Edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
      <meta name="apple-mobile-web-app-capable" content="yes">
      <meta name="apple-mobile-web-app-status-bar-style" content="black">
      <meta name="format-detection" content="telephone=no">
      <title>Title</title>
      <meta name="description" content="">
      <meta name="keywords" content="">
      
      
    
    </head>
    <body>
    
    
    
    <script>
      function f1() {
        return new Promise(resolve => {
          setTimeout(()=>{
            console.log("第一步");
            //异步逻辑已经执行完，必须要告诉外界我执行完了
            resolve();
          },1000)
        })
      }
    
      function f2() {
        return new Promise(resolve => {
          setTimeout(()=>{
            console.log("第二步");
            //异步逻辑已经执行完，必须要告诉外界我执行完了
            resolve();
          },1000)
        })
      }
    
      f1().then(res=>{
        //返回一个新的promise对象，然后链式调用then方法
        return f2();
      }).then(res=>{
       return f1();
      }).then(res=>{
        return f2();
      }).then(res=>{
        console.log("结束");
      })
    
    
    
    
      /*
      Promise函数基本用法
    
        var promise=new Promise((resolve,reject)=>{
            //b 把需要执行的异步操作放在这里
            $.get("/getUser",res=>{
                //获取数据的异步操作已经执行完毕了，等待下一步的执行，通过执行resolve函数，告诉外界你可以执行下一步操作了
                //c、
                resolve(res)
                //而执行的下一步操作，其实就是写在then的回调函数中的
            })
        })
        //a、
        promise.then(res=>{
            //d、执行后续的操作
            console.log(res);
        })
    
       */
    
    
    </script>
    </body>
    </html>

# 03-2.promise传参 #

# 03-3 promis错误处理 #

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=Edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
      <meta name="apple-mobile-web-app-capable" content="yes">
      <meta name="apple-mobile-web-app-status-bar-style" content="black">
      <meta name="format-detection" content="telephone=no">
      <title>Title</title>
      <meta name="description" content="">
      <meta name="keywords" content="">
      
      
    
    </head>
    <body>
    
    
    
    <script>
      function getBook() {
        return new Promise((resolve,reject) => {
          $.ajax({
            url:'/getBook',
            success(res){
              //成功获取数据
              resolve(res);//resolve();表示异步操作是成功的
            },
            error(resError){//res表示错误信息
              //如果失败就会执行
              reject(resError);//reject();表示异步操作是失败的
            }
          });
        })
      }
    
    /*  //第一种处理错误的方式
      getBook().then(res=>{
        //这里的res是表示请求成功时候获取到的数据
      },resError=>{
        console.log(resError);
      });
      */
    
    
      //第二种处理错误的方式
      getBook().then(res=>{
        //成功了
      }).catch(res=>{
        //这里也可以获取到错误信息
      })
    
      //上面2种错误处理的方式，第二种更加推荐
      //第二种方式更强大的地方在于：
      //a、不仅仅可以捕获到reject传递的参数
      //b、还可以捕获到：成功的回调中发生的错误
    </script>
    </body>
    </html>

04-4.promise捕获错误

# 05-5.promise多层异步使用catch #

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=Edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
      <meta name="apple-mobile-web-app-capable" content="yes">
      <meta name="apple-mobile-web-app-status-bar-style" content="black">
      <meta name="format-detection" content="telephone=no">
      <title>Title</title>
      <meta name="description" content="">
      <meta name="keywords" content="">
      
      
    
    </head>
    <body>
    
    
    
    <script>
      new Promise((resolve,reject)=>{
        setTimeout(()=>{
          console.log("第一步");
          resolve("第一步完成");
        },100)
      }).then(res=>{
        console.log(res);
        return new Promise((resolve, reject) => {
          setTimeout(()=>{
            console.log("第二步");
            reject("第二步失败");
          },100)
        })
      }).then(res=>{
        console.log(res);
        console.log("不会执行到这里");
      }).catch(res=>{
        console.log(res);
        console.log("失败");
      });
    
    
      //fetch是新浏览器自带的。。。。。。。。。。。。。。。。
      //axios就是一个基于Promise封装出来的进行ajax请求的库
      axios.get("/getUser").then(res=>{
        return axios.get("/getUserDetail");
      })
    </script>
    </body>
    </html>

# 06-6.promise里面的返回值 #

promise,暂时写到这些，目前就是用到这些