promise对象的基本使用

promise对象的基本使用

1.第一次使用

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <script src="QF.js"></script>
    <script>
        // ES6中提供了一种异步代码的解决方案 Promise
        // 这是一个类 它可以将异步代码的回调写法 改为同步代码的写法

        // ajax发送
        // QF.get("./a.php", {}, function (data) {
     
        //     if (!data.error) {
     
        //         alert("1")
        //     } else {
     
        //         alert("2")
        //     }
        // })

        // 使用Promise封装它
        // 1 var p = new Promise()
        // 2 传递一个函数当作参数 这个函数里面发送异步请求 
        //      这个函数有两个参数  
        //             resolve  这是一个函数     执行的时候会把Promise实例的状态变为成功并且可以传递一个参数(只能传递一个) resolved  fulfilled
        //             reject   这也是一个函数   执行的时候会把Promise实例的状态变为失败并且可以传递一个参数(只能传递一个) rejected
        // 3 p这个对象是一个Promsie的实例 
        //      它有3个状态 1 pending 2 resolved\fulfilled 3 rejected
        //      它的状态变化  pending => resolved  或者 pending => rejected 
        //      变化之后不再发生改变 
        //   p这个对象有3个方法 then catch finally 
        //       then(successCallback,  failedCallback) 接收两个参数 分别表示成功时、失败时的回调函数 
        //              successCallback  
        //                  可以有一个参数 是resolve() 传递的参数
        //              failedCallback
        //                  可以有一个参数 是reject() 传递的参数





         var p = new Promise(function(resolve, reject) {
     
         // 发送异步请求
            QF.get("./a.php", {
     }, function(data) {
     
                 if (!data.error) {
     
                   resolve(data.data, 123); // 这里只能传递一个参数
                 } else {
     
                     reject();
                }
             });
         });

        p.then(function(msg, num) {
     
             // 这个函数是Promise实例状态变为成功时执行的函数
             console.log("成功" + msg);
             console.log(num) // undefined
         }, function(msg) {
     
             // 这个函数是Promise实例状态变为失败时执行的函数
             console.log("失败" + msg)
         })

        // console.log(p)



       
</body>

</html>

2.回调地狱的解决

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <script src="QF.js"></script>
    <script>
        function sendAjax1() {
     
            return new Promise(function(resolve, reject) {
     
                QF.get("http://localhost/day3(promise)/a.php", {
     }, function(data) {
     
                    if (!data.error) {
     
                        resolve(data);
                    } else {
     
                        reject(data);
                    }
                })
            })
        }

        function sendAjax2() {
     
            return new Promise(function(resolve, reject) {
     
                QF.get("http://localhost/day3(promise)/b.php", {
     }, function(data) {
     
                    if (!data.error) {
     
                        resolve(data);
                    } else {
     
                        reject(data);
                    }
                })
            })
        }

        function sendAjax3() {
     
            return new Promise(function(resolve, reject) {
     
                QF.get("http://localhost/day3(promise)/c.php", {
     }, function(data) {
     
                    if (!data.error) {
     
                        resolve(data);
                    } else {
     
                        reject(data);
                    }
                })
            })
        }
        console.log('ajax1发送出去了');
        var p = sendAjax1();
        p.then(function(data) {
     
            console.log('ajax1回来了');
            console.log(data.msg);
            console.log('ajax2发送出去了');
            return sendAjax2();
        }).then(function(data) {
     
            console.log('ajax2回来了');
            console.log(data.msg);
            console.log('ajax3发送出去了');
            return sendAjax3();
        }).then(function(data) {
     
            console.log('ajax3回来了');
            console.log(data.msg);
        })
    </script>
</body>

</html>

你可能感兴趣的:(js,js)