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

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

01.promise基本操作

  1. <!--
  2.     Created by wangyang on 2019-05-22.
  3.     itwangyang@gmail.com
  4.     http://www.itwangyang.xyz
  5. -->
  6. <!DOCTYPE html>
  7. <html lang="en">
  8. <head>
  9.   <meta charset="UTF-8">
  10.   <meta http-equiv="X-UA-Compatible" content="IE=Edge">
  11.   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  12.   <meta name="apple-mobile-web-app-capable" content="yes">
  13.   <meta name="apple-mobile-web-app-status-bar-style" content="black">
  14.   <meta name="format-detection" content="telephone=no">
  15.   <title>Title</title>
  16.   <meta name="description" content="">
  17.   <meta name="keywords" content="">
  18.   <!--所有的IE都起作用：-->
  19.   <!--[if IE]>  <link rel="stylesheet" type="text/css" href="all-ie-only.css/> <![endif]-->
  21. </head>
  22. <body>
  26. <script>
  27.   /*
  29.     为什么要有promise：解决（回调地狱）的问题
  31.     回调地狱：
  33.         //跟以前的if条件地狱很像
  34.         // if(){
  35.         //     if(){
  36.         //         if(){
  37.         //         }
  38.         //     }
  39.         // }
  41.         $.get("/getUser",function(res){
  42.             $.get("/getUserDetail",function(){
  43.                 $.get("/getCart",function(){
  44.                     $.get("/getBooks",function(){
  45.                         //...
  46.                     })
  47.                 })
  48.             })
  49.         })
  51.       //node开发：读取文件；开个服务器、接收一个请求、请求路径、访问数据库
  54.   * */
  57.   //把异步操作封装在一个promise对象中
  58.   function fn() {
  59.     return new Promise(function (resolve,reject) {
  60.       setTimeout(()=> {
  61.         console.log("您好");
  62.         //其实异步逻辑，到这款其实已经执行完毕了，就可以告诉外界，可以执行其他操作了，如果让外界得知？
  63.         resolve();
  64.       },1000)
  65.     })
  66.   }
  68.   //调用了这个函数，
  69.   fn().then(res =>{
  70.     //执行到下一步
  71.     console.log("下一步");
  72.     fn().then(res=>{
  73.       console.log("执行第二步")
  74.     })
  75.   })
  76.   //输出顺序：
  77.   //你好
  78.   //下一步
  79.   //你好
  80.   //执行第二步
  82. </script>
  83. </body>
  84. </html>

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

  1. <!--
  2.     Created by wangyang on 2019-05-22.
  3.     itwangyang@gmail.com
  4.     http://www.itwangyang.xyz
  5. -->
  6. <!DOCTYPE html>
  7. <html lang="en">
  8. <head>
  9.   <meta charset="UTF-8">
  10.   <meta http-equiv="X-UA-Compatible" content="IE=Edge">
  11.   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  12.   <meta name="apple-mobile-web-app-capable" content="yes">
  13.   <meta name="apple-mobile-web-app-status-bar-style" content="black">
  14.   <meta name="format-detection" content="telephone=no">
  15.   <title>Title</title>
  16.   <meta name="description" content="">
  17.   <meta name="keywords" content="">
  18.   <!--所有的IE都起作用：-->
  19.   <!--[if IE]>  <link rel="stylesheet" type="text/css" href="all-ie-only.css/> <![endif]-->
  21. </head>
  22. <body>
  26. <script>
  27.   function f1() {
  28.     return new Promise(resolve => {
  29.       setTimeout(()=>{
  30.         console.log("第一步");
  31.         //异步逻辑已经执行完，必须要告诉外界我执行完了
  32.         resolve();
  33.       },1000)
  34.     })
  35.   }
  37.   function f2() {
  38.     return new Promise(resolve => {
  39.       setTimeout(()=>{
  40.         console.log("第二步");
  41.         //异步逻辑已经执行完，必须要告诉外界我执行完了
  42.         resolve();
  43.       },1000)
  44.     })
  45.   }
  47.   f1().then(res=>{
  48.     //返回一个新的promise对象，然后链式调用then方法
  49.     return f2();
  50.   }).then(res=>{
  51.    return f1();
  52.   }).then(res=>{
  53.     return f2();
  54.   }).then(res=>{
  55.     console.log("结束");
  56.   })
  61.   /*
  62.   Promise函数基本用法
  64.     var promise=new Promise((resolve,reject)=>{
  65.         //b 把需要执行的异步操作放在这里
  66.         $.get("/getUser",res=>{
  67.             //获取数据的异步操作已经执行完毕了，等待下一步的执行，通过执行resolve函数，告诉外界你可以执行下一步操作了
  68.             //c、
  69.             resolve(res)
  70.             //而执行的下一步操作，其实就是写在then的回调函数中的
  71.         })
  72.     })
  73.     //a、
  74.     promise.then(res=>{
  75.         //d、执行后续的操作
  76.         console.log(res);
  77.     })
  79.    */
  82. </script>
  83. </body>
  84. </html>

03-2.promise传参

  1. <!--
  2.     Created by wangyang on 2019-05-22.
  3.     itwangyang@gmail.com
  4.     http://www.itwangyang.xyz
  5. -->
  6. <!DOCTYPE html>
  7. <html lang="en">
  8. <head>
  9.   <meta charset="UTF-8">
  10.   <meta http-equiv="X-UA-Compatible" content="IE=Edge">
  11.   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  12.   <meta name="apple-mobile-web-app-capable" content="yes">
  13.   <meta name="apple-mobile-web-app-status-bar-style" content="black">
  14.   <meta name="format-detection" content="telephone=no">
  15.   <title>Title</title>
  16.   <meta name="description" content="">
  17.   <meta name="keywords" content="">
  18.   <!--所有的IE都起作用：-->
  19.   <!--[if IE]>  <link rel="stylesheet" type="text/css" href="all-ie-only.css/> <![endif]-->
  21. </head>
  22. <body>
  26. <script>
  27.   function getUser() {
  28.     return new Promise(resolve => {
  29.       $.get("/getUser",res=>{
  30.         //res是从服务端中接收到的数据
  31.         //把数据传到下一步操作中
  32.         //告诉外界本次的异步操作已经执行完毕了
  33.         resolve(res);
  34.       });
  36.     })
  37.   }
  38.   getUser().then(res=>{
  39.     //res就表示上一个异步操作返回的参数值：从服务器中获取的数据
  40.   })
  41. </script>
  42. </body>
  43. </html>

03-3 promis错误处理

  1. <!--
  2.     Created by wangyang on 2019-05-22.
  3.     itwangyang@gmail.com
  4.     http://www.itwangyang.xyz
  5. -->
  6. <!DOCTYPE html>
  7. <html lang="en">
  8. <head>
  9.   <meta charset="UTF-8">
  10.   <meta http-equiv="X-UA-Compatible" content="IE=Edge">
  11.   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  12.   <meta name="apple-mobile-web-app-capable" content="yes">
  13.   <meta name="apple-mobile-web-app-status-bar-style" content="black">
  14.   <meta name="format-detection" content="telephone=no">
  15.   <title>Title</title>
  16.   <meta name="description" content="">
  17.   <meta name="keywords" content="">
  18.   <!--所有的IE都起作用：-->
  19.   <!--[if IE]>  <link rel="stylesheet" type="text/css" href="all-ie-only.css/> <![endif]-->
  21. </head>
  22. <body>
  26. <script>
  27.   function getBook() {
  28.     return new Promise((resolve,reject) => {
  29.       $.ajax({
  30.         url:'/getBook',
  31.         success(res){
  32.           //成功获取数据
  33.           resolve(res);//resolve();表示异步操作是成功的
  34.         },
  35.         error(resError){//res表示错误信息
  36.           //如果失败就会执行
  37.           reject(resError);//reject();表示异步操作是失败的
  38.         }
  39.       });
  40.     })
  41.   }
  43. /*  //第一种处理错误的方式
  44.   getBook().then(res=>{
  45.     //这里的res是表示请求成功时候获取到的数据
  46.   },resError=>{
  47.     console.log(resError);
  48.   });
  49.   */
  52.   //第二种处理错误的方式
  53.   getBook().then(res=>{
  54.     //成功了
  55.   }).catch(res=>{
  56.     //这里也可以获取到错误信息
  57.   })
  59.   //上面2种错误处理的方式，第二种更加推荐
  60.   //第二种方式更强大的地方在于：
  61.   //a、不仅仅可以捕获到reject传递的参数
  62.   //b、还可以捕获到：成功的回调中发生的错误
  63. </script>
  64. </body>
  65. </html>

04-4.promise捕获错误

  1. <!--
  2.     Created by wangyang on 2019-05-22.
  3.     itwangyang@gmail.com
  4.     http://www.itwangyang.xyz
  5. -->
  6. <!DOCTYPE html>
  7. <html lang="en">
  8. <head>
  9.   <meta charset="UTF-8">
  10.   <meta http-equiv="X-UA-Compatible" content="IE=Edge">
  11.   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  12.   <meta name="apple-mobile-web-app-capable" content="yes">
  13.   <meta name="apple-mobile-web-app-status-bar-style" content="black">
  14.   <meta name="format-detection" content="telephone=no">
  15.   <title>Title</title>
  16.   <meta name="description" content="">
  17.   <meta name="keywords" content="">
  18.   <!--所有的IE都起作用：-->
  19.   <!--[if IE]>  <link rel="stylesheet" type="text/css" href="all-ie-only.css/> <![endif]-->
  21. </head>
  22. <body>
  26. <script>
  27.   function f1(name) {
  28.     return new Promise((resolve,reject) => {
  29.       setTimeout(()=>{
  30.         if (name == "a"){
  31.           resolve("成功");
  32.         } else {
  33.           reject("失败");
  34.         }
  35.       },1000)
  36.     })
  37.   }
  39.   // f1("a").then(res=>{console.log(res)});
  40.   f1("b").then(res=>{
  41.     console.log(res)
  42.   }).catch(res=>{
  43.     console.log("失败了");
  44.   })
  50. </script>
  51. </body>
  52. </html>

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

  1. <!--
  2.     Created by wangyang on 2019-05-22.
  3.     itwangyang@gmail.com
  4.     http://www.itwangyang.xyz
  5. -->
  6. <!DOCTYPE html>
  7. <html lang="en">
  8. <head>
  9.   <meta charset="UTF-8">
  10.   <meta http-equiv="X-UA-Compatible" content="IE=Edge">
  11.   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  12.   <meta name="apple-mobile-web-app-capable" content="yes">
  13.   <meta name="apple-mobile-web-app-status-bar-style" content="black">
  14.   <meta name="format-detection" content="telephone=no">
  15.   <title>Title</title>
  16.   <meta name="description" content="">
  17.   <meta name="keywords" content="">
  18.   <!--所有的IE都起作用：-->
  19.   <!--[if IE]>  <link rel="stylesheet" type="text/css" href="all-ie-only.css/> <![endif]-->
  21. </head>
  22. <body>
  26. <script>
  27.   new Promise((resolve,reject)=>{
  28.     setTimeout(()=>{
  29.       console.log("第一步");
  30.       resolve("第一步完成");
  31.     },100)
  32.   }).then(res=>{
  33.     console.log(res);
  34.     return new Promise((resolve, reject) => {
  35.       setTimeout(()=>{
  36.         console.log("第二步");
  37.         reject("第二步失败");
  38.       },100)
  39.     })
  40.   }).then(res=>{
  41.     console.log(res);
  42.     console.log("不会执行到这里");
  43.   }).catch(res=>{
  44.     console.log(res);
  45.     console.log("失败");
  46.   });
  49.   //fetch是新浏览器自带的。。。。。。。。。。。。。。。。
  50.   //axios就是一个基于Promise封装出来的进行ajax请求的库
  51.   axios.get("/getUser").then(res=>{
  52.     return axios.get("/getUserDetail");
  53.   })
  54. </script>
  55. </body>
  56. </html>

06-6.promise里面的返回值

  1. <!--
  2.     Created by wangyang on 2019-05-22.
  3.     itwangyang@gmail.com
  4.     http://www.itwangyang.xyz
  5. -->
  6. <!DOCTYPE html>
  7. <html lang="en">
  8. <head>
  9.   <meta charset="UTF-8">
  10.   <meta http-equiv="X-UA-Compatible" content="IE=Edge">
  11.   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  12.   <meta name="apple-mobile-web-app-capable" content="yes">
  13.   <meta name="apple-mobile-web-app-status-bar-style" content="black">
  14.   <meta name="format-detection" content="telephone=no">
  15.   <title>Title</title>
  16.   <meta name="description" content="">
  17.   <meta name="keywords" content="">
  18.   <!--所有的IE都起作用：-->
  19.   <!--[if IE]>  <link rel="stylesheet" type="text/css" href="all-ie-only.css/> <![endif]-->
  21. </head>
  22. <body>
  26. <script>
  27.   new Promise((resolve, reject)=>{
  28.     setTimeout(()=>{
  29.       resolve("第一步");
  30.     },1000)
  31.   }).then(res=>{
  32.     return 100;
  33.   }).then(res=>{
  34.     console.log(res);
  35.   })
  36. </script>
  37. </body>
  38. </html>

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

发表评论

表情：
评论列表 （有 0 条评论，409人围观）

还没有评论，来说两句吧...

相关阅读

    相关 ES6 Promise

    Promise promise对象从语法上来看呢，是一个构造函数，用来生成Promise实例，用来封装异步操作，并提供成功后或失败后的结果 所谓Promise，简单说

    怼烎@怼烎@/ 0 赞/ 307 阅读

    相关 ES6 Promise

    promise是一种解决异步函数传递数据问题 回调函数解决---->回调地狱 .Promise Promise是一个对象， 使用时需要创建这个对象 new P

    r囧r小猫r囧r小猫/ 0 赞/ 286 阅读

    相关 es6 Promise

    传统实现异步操作就是采用回调函数，回调函数方式本身没有什么问题，但是在多重回调层层嵌套的情况下，那么代码的可阅读性就会出现问题。 Promise对象是一个新的异步操作解决方

    曾经终败给现在曾经终败给现在/ 0 赞/ 339 阅读

    相关 ES6-Promise

    Promise what? 在我看来Promise就相当于一个承诺容器，将所要执行的事件存贮在promise容器中。 Promise在ES6中被统一规范，由浏览

    深碍√TFBOYSˉ_深碍√TFBOYSˉ_/ 0 赞/ 634 阅读