ES6 Promise实际项目用法 (避免回调地狱)

最新推荐文章于 2020-05-24 14:42:03 发布

一个造轮者

最新推荐文章于 2020-05-24 14:42:03 发布

阅读量887

点赞数 1

分类专栏： js jq vue html css css3 h5

本文链接：https://blog.csdn.net/qq_35254907/article/details/78091053

版权

vue 同时被 3 个专栏收录

8 篇文章 0 订阅

订阅专栏

7 篇文章 0 订阅

订阅专栏

css

7 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8" />
  <title>Document</title>
 </head>
 <body>
  <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
  <script type="text/javascript">

		//需要需要同步执行多个异步函数，请使用Promise.all() 
	
	//Promise好处，优化异步，分离代码。
	//说明： 此例只是异步之间的依赖
	//这个直接会输出整个promise的目录



         console.dir(Promise);

      
         function run(){      //步骤1
            let p =new Promise(function(resolve,reject){

                 $.ajax({
                    type:"post",
                    url:"http://jspang.com/DemoApi/typeGoods.php",
                    dataType:"json", //返回格式
                    success: function (data) {
                     console.log(data[0][0].price); // 18
                        // 执行成功保存下值 (为了后面的函数使用)
                        resolve(data[0][0].price);  // 18
                    },
                    error: function () {
                        msg0.text("亲，出错了");
                    }
                });



             });
             // console.log(p);
            return p;

         }
          // 步骤  4
        function run1(data1){
            let p11 =new Promise(function(resolve,reject){

                 $.ajax({
                    type:"get",
                    url:"https://gsp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?cb=callback&wd="+data1+"&sc=hao123&_=1506355261424",
                    dataType:"jsonp", //返回格式
                      jsonp: "cd",
                     jsonpCallback:"callback",
                    success: function (data) {
                         console.log(data);  // Object {q: "18", p: false, s: Array[10]}
                         resolve(data.p);    // 把false保存起来
                    },
                    error: function () {
                        msg0.text("亲，出错了");
                    }
                });



             });
             // console.log(p);
            return p11;
        }
         //步骤 6
        function run2(data1){  //data1=false;
            let p12 =new Promise(function(resolve,reject){

                 $.ajax({
                    type:"get",
                    url:"https://gsp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?cb=callback&wd="+data1+"&sc=hao123&_=1506355261424",
                    dataType:"jsonp", //返回格式
                      jsonp: "cd",
                     jsonpCallback:"callback",
                    success: function (data) {
                         console.log(data); //Object {q: "false", p: false, s: Array[10]}
                         // 到此结束   没有需求 就不用resolve了
                        // resolve(data[0][0].price);
                    },
                    error: function () {
                        msg0.text("亲，出错了");
                    }
                });



             });
             // console.log(p);
            return p12;
        }





        //  步骤 2
         run().then(function(data){

            // 因为run() 是一个构造函数  所以有then这个属性
            //
            //  此时的data为第一个函数的值(也就是resolve()里面的值)
            console.log(data+"dsddffds");   // 18dsddffds
            // 然后第一个异步成功执行后执行第一个异步函数  (也就是直接返回第二个函数)
            return run1(data);  //步骤 3  把第一个函数的值作为第二个异步函数的参数参过去并执行
         }).then(function(val){
            // 此时的val就是上面resolve保存的值
             console.log(val);   //false
            return run2(val);   //步骤 5  接着执行  run2();  把false 传过去
         });



    </script>
 </body>
</html>