使用promise的基本功能【四、Promise源码】

最新推荐文章于 2024-05-22 13:52:22 发布
最新推荐文章于 2024-05-22 13:52:22 发布
阅读量87 收藏
点赞数 3
分类专栏： # JavaScript 文章标签： javascript 开发语言 ecmascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hannah2233/article/details/125414160
版权

为手撸promise做的铺垫
配套笔记查看：promise的介绍与手撸的关键问题

文章目录

一、 Promise功能体验

1-1 Promise请求抽奖界面.html

在这里插入图片描述

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Promise请求抽奖界面</title>
</head>

<body>
    <div class="container">
        <div class="page-header">Promise初体验</div>
        <button class="btn btn-primary" id="btn">点击抽奖</button>
    </div>
    <script>
        // 生成随机数
        function rand(m, n) {
            return Math.ceil(Math.random() * (n - m + 1) + m - 1);
        }
        /* 
                点击按钮， 2 s后显示是否中奖（ 30 % 概率中奖）
                若中奖弹出 恭喜
                若未中奖弹出 再接再厉 */
        // 获取元素对象
        const btn = document.querySelector('#btn');
        // 绑定单击事件
        btn.addEventListener('click', function() {
            // setTimeout(() => {
            //     // 30%, 1-100 1 2 30
            //     // 获取从1-100的一个随机数
            //     let n = rand(1, 100);
            //     // 判断
            //     if (n <= 30) {
            //         alert('恭喜恭喜');
            //     } else {
            //         alert("zaijiezailin");
            //     }
            // }, 1000)

            const p = new Promise((resolve, reject) => {
                setTimeout(() => {
                    // 30%, 1-100 1 2 30
                    // 获取从1-100的一个随机数
                    let n = rand(1, 100);
                    // 判断
                    if (n <= 30) {
                        resolve(n); // 将promise对象的转台设置为成功
                    } else {
                        reject(n); // 将promise对象的状态设置为失败
                    }
                }, 1000)
            });
            console.log(p);
            // 调用then方法
            p.then((value) => {
                alert('恭喜恭喜，奖品为10万' + value);
            }, (reason) => {
                alert('再接再厉' + reason);
            })
        })

        // Promise 形式实现
        // resolve 解决  函数类型的数据
        // reject 拒绝  函数类型的数据
    </script>
</body>

</html>

1-2 fs读取文件.js

按照对应路径创建 content.txt

const fs = require('fs');

// 回调函数形式
// fs.readFile('./content.txt', (err, data) => {
//     // 如果出错，则抛出错误
//     if (err) throw err;
//     // 输出文件内容
//     console.log(data.toString());
// })

//Promise 形式
let p = new Promise((resolve, reject) => {
    fs.readFile('./content.txt', (err, data) => {
        // 如果出错，则抛出错误
        if (err) reject(err);
        // 输出文件内容
        resolve(data);
    })
})

p.then((value) => {
    console.log(value.toString());
}, reason => {
    console.log(reason);
})

1-3 Ajax请求.html

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Promise封装Ajax请求</title>
</head>



<body>
    <div class="container">
        <h2 class="page-header">Promise封装 AJAX 操作</h2>
        <button class="btn btn-primary" id="btn">点击发送 AJAX</button>
    </div>
    <script>
        const btn = document.querySelector('#btn');

        btn.addEventListener('click', function() {
            const p = new Promise((resolve, reject) => {
                const xhr = new XMLHttpRequest();
                xhr.open('GET', 'https://netease-cloud-music-api-crete722p-hannah-bingo.vercel.app/user/detail?uid=32953014');
                xhr.send();
                xhr.onreadystatechange = function() {
                    if (xhr.readyState === 4) {
                        if (xhr.status >= 200 && xhr.status < 300) {
                            resolve(xhr.response);
                        } else {
                            reject(xhr.status);
                        }
                    }
                }
            })
            p.then(value => {
                console.log(value);
            }, reason => {
                console.warn(reason);
            })
        })
    </script>
</body>

</html>

在这里插入图片描述

1-4 promise封装联系-fs模块

/* 
封装一个函数 mineReadFile 读取文件
参数： path  文件路径
返回： promise 对象 */

const { readFile } = require('fs');

function mineReadFile(path) {
    return new Promise((resolve, reject) => {
        // 读取文件
        require('fs').readFile(path, (err, data) => {
            // 判断
            if (err) reject(err);
            // 成功
            resolve(data);
        })
    })
}


mineReadFile('./content.txt')
    .then(value => {
        // 输出文件内容
        console.log(value.toString());
    }, reason => {
        console.log(reason);
    })

在这里插入图片描述

1-5 promise封装AJAX请求.html

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Promise封装Ajax请求</title>
</head>

<body>
    <!-- 封装一个函数sendAJAX发送 GET AJAX 请求
参数 URL
返回结果 Promise 对象 -->
    <script>
        function sendAJAX(url) {
            return new Promise((resolve, reject) => {
                // 创建一个异步调用对象
                const xhr = new XMLHttpRequest();
                // 指定该HTTP请求的方法，URL及验证信息
                xhr.open("GET", url);
                // 发送HTTP请求
                xhr.send();
                // 处理结果
                // 设置响应HTTP请求状态变化的函数
                xhr.onreadystatechange = function() {
                    if (xhr.readyState === 4) {
                        if (xhr.status >= 200 && xhr.status < 300) {
                            resolve(xhr.response);
                        } else {
                            reject(error);
                        }
                    }
                }
            })
        }



        sendAJAX('https://netease-cloud-music-api-crete722p-hannah-bingo.vercel.app/user/detail?uid=32953014')
            .then(value => {
                console.log(value);
            }, reason => {
                console.log(reason);
            })
    </script>
</body>

</html>

1-6 Promise的构造函数catch

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Promise API</title>
</head>

<body>
    <script>
        let p = new Promise((resolve, reject) => {
            // 同步调用的
            // console.log(111);
            // 修改promise 对象的状态
            reject('uu');
        })
        console.log(p);

        // 执行 catch方法
        p.catch(reason => {
            console.log(reason);
        })
    </script>

</body>

</html>

在这里插入图片描述

1-7 Promise API - resolve.html

在这里插入图片描述

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Promise API - resolve</title>
</head>

<body>
    <script>
        let p1 = Promise.resolve(521);
        // 如果传入的参数为非Promise类型的对象，则返回的结果为  成功promise对象
        // 如果传入参数为Promise对象，则参数的结果决定了 resolve的结果
        let p2 = Promise.resolve(new Promise((resolve, reject) => {
            // resolve('ok');
            reject('err');
        }))
        console.log(p1);
        console.log(p2);

        p2.catch(reason => {
            console.log(reason);
        })
    </script>

</body>

</html>

在这里插入图片描述

1-8 Promise API - reject.html

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Promise API - reject</title>
</head>

<body>
    <script>
        let p = Promise.reject(521);
        console.log(p);

        let p3 = Promise.reject(new Promise((resolve, reject) => {
                resolve("ok");
            }))
            // 状态是失败，返回的结果是成功
        console.log(p3);
    </script>

</body>

</html>

在这里插入图片描述

1-9 Promise.all方法.html

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Promise API - all</title>
</head>

<body>
    <script>
        let p1 = new Promise((resolve, reject) => {
            resolve('OK');
        })
        let p2 = Promise.reject('EEE');
        let p3 = Promise.resolve('Oh Yeah');

        const result = Promise.all([p1, p2, p3]);
        const reject = Promise.all([p1, p3])

        console.log(result);
        console.log(reject);
    </script>
</body>

</html>

在这里插入图片描述

1-10 Promise.race方法.html

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Promise.race方法</title>
</head>

<body>
    <script>
        let p1 = new Promise((resolve, reject) => {
            setTimeout(() => {
                reject('OK');
            }, 1000)
        })
        let p2 = Promise.reject('EEE');
        let p3 = Promise.resolve('Oh Yeah');
        const result = Promise.race([p1, p2, p3]);
        console.log(result);
    </script>
</body>

</html>

在这里插入图片描述

二、 promise关键问题

2-1 1-状态修改.html

在这里插入图片描述

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Promise 对象状态改变的方式</title>
</head>

<body>
    <script>
        let p = new Promise((resolve, reject) => {
            // 1. 通过调用resolve函数
            // resolve('ok'); // pending  => fulfilled(resolved)
            // 2. reject函数
            // reject("error"); // pending  => rejected
            // 3. 抛出错误
            throw "出问题"
        });
        console.log(p);
    </script>

</body>

</html>

2-2 2-能否执行多个回调.html

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Promise指定多个回调</title>
</head>

<body>
    <script>
        let p = new Promise((resolve, reject) => {
            resolve('OK');
        })

        // 指定回调 -1
        p.then(value => {
                console.log(value);
            })
            // 指定回调 -2
        p.then(value => {
            alert(value);
        })
    </script>
</body>

</html>

在这里插入图片描述

2-3 3-then先执行还是改变状态先执行.html

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Promise指定多个回调</title>
</head>

<body>
    <script>
        let p = new Promise((resolve, reject) => {
            // resolve("ok");
            // 异步任务，先执行的回调
            setTimeout(() => {
                resolve('OK');
            }, 1000)
        })
        p.then(value => {
            console.log(value);
        }, reason => {

        })
    </script>
</body>

</html>

2-4 4-then方法返回结果有什么决定.html

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Promise then方法返回结果的特点</title>
</head>

<body>
    <script>
        let p = new Promise((resolve, reject) => {
            resolve('ok');
        })

        // 执行 then方法
        let result = p.then(value => {
            // console.log(value);
            // throw '出了问题' // 抛出错误
            return 521 // 返回结果是非Promise类型的对象
                // return new Promise((resolve, reject) => {
                //     resolve('success');
                // })
        }, reason => {
            console.warn(reason);
        })
        console.log(result);
    </script>
</body>

</html>

在这里插入图片描述

2-5 5-串联多个操作任务.html

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>如何串联多个操作任务</title>
</head>

<body>
    <script>
        let p = new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve("ok");
                // reject("err");
            }, 1000)
        })
        p.then(value => {
            return new Promise((resolve, reject) => {
                // resolve("success");
                reject("err2")
            })
        }).then(value => {
            console.log(value);
        }, reason => {
            console.log(reason);
        }).then(value => {
            console.log(value);
        })
    </script>

</body>

</html>

在这里插入图片描述

2-6 6-异常穿透x现象.html

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>异常穿透</title>
</head>

<body>
    <script>
        let p = new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve('OK')
                    // reject('Err');
            }, 1000);
        })

        p.then(value => {
            // console.log(111);
            throw '失败了'
        }).then(value => {
            console.log(222);
        }).then(value => {
            console.log(333);
        }).catch(reason => {
            console.warn(reason);
        })
    </script>

</body>

</html>

2-7 7-中断Promise链.html

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>中断Promise链</title>
</head>

<body>
    <script>
        let p = new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve('OK')
                    // reject('Err');
            }, 1000);
        })

        p.then(value => {
            console.log(111);
            // 有且仅有一种方式,中断Promise链
            return new Promise(() => {});
        }).then(value => {
            console.log(222);
        }).then(value => {
            console.log(333);
        }).catch(reason => {
            console.warn(reason);
        })
    </script>

</body>

</html>
牛小小小婷～
关注
  • 3
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Promise源码分析
A20201130的博客
03-27 895
实现原理：说到底，Promise 也还是使用回调函数，只不过是把回调封装在了内部，使用上一直通过 then 方法的链式调用，使得多层的回调嵌套看起来变成了同一层的，书写上以及理解上会更直观和简洁一些。 我这里只是实现了部分的功能，并非和源码一模一样！希望里面不足的地方，小伙伴们多多指正 //我们首先来定义一个MyPromise类，我在这里使用立即执行函数的方式，防止变量全局污染。 const MyPromise = (() => { // 定义三种状态 const PENDING
Promise源码解析
SAHADEV的专栏
05-31 2420
Promise源码解析 纸上得来终觉浅，绝知此事要躬行。之前只是很浅显的知道Promise的用法，也大概猜测到它的内部是如何实现的。但是总是有一种不深究一下就不踏实的感觉。于是从npm上获得早期的Promise源代码，拿过来读一读，做一做笔记。 Promise的源码写的非常的巧妙，凭空阅读会陷入入其中无法自拔。 简单的Promise用法 一个简单的Promise用法如下： const promis...
promise源码详解
qq_33141245的博客
06-22 3138
promise源码详解
Promise源码实现
weixin_43213911的博客
09-05 844
【代码】Promise源码实现。
promise 源码实现
FYSGXFZ的博客
06-16 819
个人以为，这段代码囊括了JS里面最重要的几部分知识点。每一句代码背后都要求读者去理解不同的知识点，是对读者的巨大挑战。
Promise源码解密-Promise A+标准
前端路上有你有我！
01-18 6010
术语 1. Promise promise 是一个拥有 then 方法的 object 或 function ，其行为符合本规范 2. thenable 是一个定义了 then 方法的 object 或 function 3. 值（value） 指任何 JavaScript 的合法值（包括 undefined , thenable 和 promise）； 4. 异常（exception） 通过throw抛出一个值 5. 原因（reason） 一个promise被拒绝的原因 class Promise
Promise 简单源码
通俗易懂
04-11 349
Promise简单源码 目录Promise简单源码Promise方法分析Promise方法Promise源码 Promise方法 一个简单的Promise方法执行过程 const promise = new Promise(function(resolved, rejusted){ setTimeout(function(){ if(true){ r...
Promise原理及其源码
haonan_z的博客
05-17 672
本文不对 Promise 的用法进行说明，不了解的请前往 ES6 Promise教程 接下来，我们来一边分析一边手撸代码 1. promise基本结构 new Promise((resolve, reject) => { setTimeout(() => { resolve('FULFILLED') }, 1000) }) 构造函数Promise必须接受一个函数作为参数，我们称该函数为handle，handle又包含resolve和reject两个参数，它们两都是函数。 .
Promise的使用详解
酒客的博客
12-23 1472
Promise内容详解–知识点整理 异步任务的处理 ​ 在ES6出来之后，有很多关于Promise的讲解、文章，也有很多经典的书籍讲解Promise。虽然等你学会Promise之后，会觉得Promise不过如此，但是在初次接触的时候都会觉得这个东西不好理解； 那么这里我从一个实际的例子来作为切入点： 我们调用一个函数，这个函数中发送网络请求（我们可以用定时器来模拟）； 如果发送网络请求成功了，那么告知调用者发送成功，并且将相关数据返回过去； 如果发送网络请求失败了，那么告知调用者发送失败，并且告知错误信息
用TypeScript手写Promise实现源码
阿嚏乱码的地方
02-23 676
TS源码： class Promise2 { state = 'pending' callbacks= [] resolve(result) { setTimeout(()=>{ if (this.state !=='pending') return this.state = 'fulfilled'...
koa源码中promise的解读
01-20
koa 是一个非常轻量优雅的 node 应用开发框架，趁着双十一值班的空当阅读了下其源代码，其中一些比较有意思的地方整理成文与大家分享一下。 洋葱型中间件机制的实现原理 我们经常把 koa 中间件的执行机制类比于剥...
JS手写Promise源码
12-19
3、自定义Promise功能：手写Promise可以让我们根据自己的需求自定义Promise的功能。我们可以添加一些自己的功能和扩展，以满足特定的应用场景。这使得我们能够更好地理解和掌握Promise，并将其应用到实际的项目中。4...
Promise 学习笔记
01-08
Promise 底层实现 ：Promise实现原理（附源码） （本文学习并参考的一篇博客，推荐直接阅读） 其他推荐：Promise简单实现 （一）Promise 基本结构 Promise 是一种抽象异步处理对象，其核心概念为 “确保一件事做完...
手写Promise源码
10-28
手动实现Promise源码，实现了Promise核心函数/resolve/reject/race/all/finally希望可以帮助到大家，路漫漫其修远兮,吾将上下而求索,
ant design DatePicker日期选择框指定分钟的间隔minuteStep属性
u010234868的专栏
05-17 221
在上面的例子中，DatePicker 将只允许用户以 15 分钟为间隔选择分钟。是 Ant Design 的 TimePicker时间选择框组件的一个属性。设置为 30，则用户可以选择以 30 分钟为间隔的分钟值。如果你想让分钟选项只能以 15 分钟为间隔选择，你可以将。
Vue.js的发展史（一）
2301_79683791的博客
05-15 784
Vue (发音为 /vjuː/，类似view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。来源官方解释-----简介 | Vue.js (vuejs.org)简单来说：Vue是一个属于JS的库，可直接引入一个JS文件就可以使用，与传统JS和JQuery框架不同，Vue的渐进式框架。
【学习笔记】后端（Ⅰ）—— NodeJS（Ⅱ）
Eddie_hyh的博客
05-21 501
NodeJS（Ⅱ）
React函数式组件的父子方法互相调用，父组件调用子组件方法，子组件调用父组件方法
SongZhengxing_的博客
05-18 215
子组件需要使用 forwardRef 函数包裹，然后使用 useImperativeHandle 暴露属性和方法。编写子组件 Child。
前端开发攻略---用Vue实现无限滚动的几种方法
最新发布
nibabaoo的博客
05-22 421
用vue实现无限滚动
Promise 源码全
11-01
由于Promise源码比较复杂，涉及到很多细节，这里无法一一列举。但是，我们可以简单介绍一下Promise的核心实现原理。 Promise的核心实现原理是基于状态机的思想，它有三种状态：pending（等待中）、fulfilled（已成功）和rejected（已失败）。当Promise对象的状态发生改变时，它会自动调用相应的回调函数。 Promise对象的构造函数接受一个函数作为参数，这个函数叫做executor。executor函数有两个参数，分别是resolve和reject。当executor函数执行成功时，它会调用resolve函数，将Promise对象的状态设置为fulfilled；当executor函数执行失败时，它会调用reject函数，将Promise对象的状态设置为rejected。 Promise对象的then方法接受两个参数，分别是onFulfilled和onRejected。当Promise对象的状态为fulfilled时，它会调用onFulfilled函数；当Promise对象的状态为rejected时，它会调用onRejected函数。then方法返回一个新的Promise对象，这个新的Promise对象的状态由onFulfilled和onRejected函数的返回值决定。 除了then方法之外，Promise对象还有catch方法和finally方法。catch方法用来捕获Promise对象的错误，finally方法用来指定Promise对象无论成功还是失败都要执行的操作。 以上是Promise的核心实现原理的简单介绍，如果你想深入了解Promise的源码，可以参考相关的资料和文献。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值