初步了解promise

最新推荐文章于 2024-08-15 18:19:19 发布

lyy_0522

最新推荐文章于 2024-08-15 18:19:19 发布

阅读量353

点赞数 1

分类专栏： JavaScript 文章标签：前端 javascript

本文链接：https://blog.csdn.net/lyy_0522/article/details/124068381

版权

JavaScript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

本文介绍了JavaScript中的Promise如何解决回调地狱问题，通过实例展示了如何使用Promise链式调用来组织异步操作，包括抽奖示例和Ajax请求。重点讲解了Promise的resolve和reject方法以及then和catch的用法。

摘要由CSDN通过智能技术生成

众所周知，promise在js中主要是解决回调地狱问题。那什么是回调地狱呢？回调地狱就是我们异步任务中顺序执行代码的过程中不断的嵌套回调函数，这样会导致我们的代码臃肿，耦合性太高。使用promise的链式调用就可以很好的解决这一问题。

最近初步了解了promise的内容，跟着视频里做了些笔记和跟着视频敲了些例子。

  <style>
        #button {
            width: 200px;
            height: 100px;
        }
    </style>
</head>

<body>
    <button id="button">点击抽奖</button>
    <script>
        function rand(m, n) {
            return Math.ceil(Math.random() * (n - m + 1)) + m - 1;
        }
        const btn = document.querySelector('#button');
           //promise 形式实现
          //resolve 解决 函数类型的数据
           //reject 失败  函数类型的数据
           //promise作用：封装异步操作；获取异步任务当中成功和失败的结果值(n)
        btn.addEventListener('click', function () {
            const p = new Promise((resolve, reject) => {
                setTimeout(() => {
                    //获取1-100的随机一个数
                    let n = rand(1, 100);
                    if (n <= 30) {
                        resolve(n); //将promise对象的状态设置为 成功
                    } else {
                        reject(n);//将promise对象的状态设置为 失败
                    }
                }, 1000);
            });
            p.then((value) => {
                alert('成功！,您的中奖数字为:'+value);
            }, (reason) => {
                alert('失败！,您的号码为:'+reason);
            });
        });
    </script>
</body>

还有就是使用promise发送ajax请求。

 <style>
        #button {
            width: 200px;
            height: 100px;
        }
    </style>
</head>

<body>
    <button id="button">发送请求</button>
    <script>
        const btn = document.querySelector('#button');
        btn.onclick = function () {
            var p = new Promise((resolve, reject) => {
                const xhr = new XMLHttpRequest();
                xhr.open('get', 'https://api.apiopen.top/getJoke');
                xhr.send();
                xhr.onreadystatechange = function () {
                    if (xhr.readyState === 4) {
                        if (xhr.status >= 200 && xhr.status < 300) {
                            // console.log(xhr.reponse);
                            resolve(xhr.response);
                        } else {
                            // console.log(xhr.status);
                            reject(xhr.status);
                        }
                    }
                }
            })
            p.then(value => {
                console.log(value);
            }, (reason) => {
                console.log(reason);
            })
        }


        // let p1 =Promise.resolve(521);
        // console.log(p1);
    </script>
</body>

lyy_0522

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
初步了解promise

众所周知，promise在js中主要是解决回调地狱问题。那什么是回调地狱呢？回调地狱就是我们异步任务中顺序执行代码的过程中不断的嵌套回调函数，这样会导致我们的代码臃肿，耦合性太高。使用promise的链式调用就可以很好的解决这一问题。最近初步了解了promise的内容，跟着视频里做了些笔记和跟着视频敲了些例子。 <style> #button { width: 200px; height: 100px; .
复制链接

扫一扫

专栏目录