promise对象的基本使用

最新推荐文章于 2023-06-02 20:05:52 发布

江呱呱

最新推荐文章于 2023-06-02 20:05:52 发布

阅读量175

点赞数

分类专栏： js 文章标签： js

本文链接：https://blog.csdn.net/weixin_46500485/article/details/108628812

版权

js 专栏收录该内容

76 篇文章 2 订阅

订阅专栏

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>

江呱呱

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
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><b
复制链接

扫一扫

专栏目录