promise me,一定要学会手写一个Promise(五)

最新推荐文章于 2024-05-23 16:08:37 发布
最新推荐文章于 2024-05-23 16:08:37 发布
阅读量475 收藏
点赞数
分类专栏： javascript promise 文章标签： javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hello_yajing/article/details/123502132
版权

一、指定回调和修改状态的执行顺序

<!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>
        /*
            改变状态和指定回调的执行顺序，谁先谁后?
            --都有可能，正常情况是先指定回调函数再改变状态，但是也可以先改变状态再指定回调
            如何先改变状态再指定回调？
                1. 在执行器中直接调用resolve()/reject()
                2. 延长更长时间才调用then()
            什么时候才得到数据？
                1. 如果先指定回调，当状态改变时，回调函数就会被调用，得到数据
                2. 如果先改变状态，那当指定回调时，回调函数就会被调用，得到数据
        */

        // 1. 先改变状态，后指定回调
        let promise1 = new Promise((resolve, reject) => {           
             resolve("1-resolve-ok");
             console.log("1-resolve-ok");           
        });
        promise1.then((resolve) => {
            console.log('2-then-resolve');
        });

        // 2. 先指定回调，后改变状态（注意是指定回调而不是执行回调）
        let promise2 = new Promise((resolve, reject) => { 
            setTimeout(()=>{
                resolve("1-resolve-ok");
                console.log("1-resolve-ok");
            },1000);

        });
        promise2.then((resolve) => {
            console.log('2-then-resolve');
        });
    </script>
</body>

</html>

二、then方法的返回值

<!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>then方法的返回结果</title>
</head>

<body>
    <script>
        /*
            then的返回结果，由then指定的回调函数执行的结果决定的
            详细来说：
                1. 如果抛出异常，新promise变为reject,reason为抛出的异常
                2. 如果返回的是非promise的任意值，，新promise变为resolve,value为返回的值
                3. 如果返回的是另一个新的promise，此promise的结果，就是新promise的结果
                4. 默认状态'fullfilled',默认值undefined
        */
        let promise = new Promise((resolve, reject) => {
            resolve('ok')
        });
        let result = promise.then(value => {
            console.log(value);
            /*
                1. 抛出异常
                throw 'error';//promise，reject，'error';
                result为：
                Promise
                    [[Prototype]]: Promise
                    [[PromiseState]]: "rejected"
                    [[PromiseResult]]: "error"
            */
           // 
           /*
                2. 返回非promise的值
                return 123;
                result为：
                Promise {<pending>}
                    [[Prototype]]: Promise
                    [[PromiseState]]: "fulfilled"
                    [[PromiseResult]]: 123
           */

          return new Promise((resolve,reject)=>{reject('error')});
          /*
            1. 返回Promise对象
            result为：
            Promise {<pending>}
                [[Prototype]]: Promise
                [[PromiseState]]: "rejected"
                [[PromiseResult]]: "error"
          */
        }, reason => {
            console.log(reason);
        })
        console.log(result);// promise对象

    </script>
</body>

</html>

三、Promise串联多个操作任务

<!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>
        /*
            promise的then方法返回一个promise，可以看成then的链式调用
            通过then的链式调用串联多个同步/异步任务
        */
        let promise = new Promise((resolve, reject) => {
            //resolve('ok');//同步
            setTimeout(() => {//异步
                resolve('1-ok');
            }, 1000);
        });
        promise.then(value => {
            return new Promise((resolve, reject) => {
                resolve('2-ok');
            })
        }).then(value => {
            console.log('3-ok', value);//2-ok
        }).then(value => {
            console.log('4-ok', value);//undefined
        });
        console.log(promise);
        /*
        Promise {<pending>}
            [[Prototype]]: Promise
            [[PromiseState]]: "fulfilled"
            [[PromiseResult]]: "1-ok"
        */
    </script>
</body>

</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>
        /*
            promise异常穿透
            1. 当使用promise的then链式调用时，可以在最后指定失败的回调
            2. 前面任何操作出了异常，都会传到最后失败的回调中处理

            中断promise链
            1. 当使用promise的then链式调用时，在中间中断，不再调用后面的回调函数
            2. 办法：在回调函数中，返回一个pedding状态的promise对象

        */
        let promise = new Promise((resolve, reject) => {
            // setTimeout(() => {
                // reject('error');
            // }, 1000);
            throw 'error';
        });
        let result = promise.then(value => {
            console.log(111);
        }, reason => {
            console.log(reason);
            return 456;
        })//.then(value => {
        //     console.log(222);
        // }).then(value => {
        //     console.log(333);
        // })
        .catch(reason => {
            console.log(reason);
            return 123;
        }); // 按顺序执行，并最终进入到catch，不用每个then方法都写error的回调

        console.log(result);

        let promise1 = new Promise((resolve, reject) => {
            setTimeout(() => {
                reject('error')
            }, 1000);
        });
        promise1.then(value => {
            console.log(111);
            return new Promise(() => { })// 返回pedding状态的promise对象，之后的then方法就不会执行了
        }, reason => {
            console.log(reason);
            throw reason;
            return new Promise(() => { })
        }).then(value => {
            console.log(222);
        }).then(value => {
            console.log(333);
        }).catch(reason => {
            console.log(reason);
        });

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

五、async函数

<!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>async函数</title>
</head>

<body>
    <script>
        /*
            1. async函数的返回值为一个promise对象
            2. 对象的值由函数的返回值由async函数的返回值决定
            3. async函数相当于promise的then方法
        */

        async function main() {
            // 1. 返回非promise的值
            // return 123;
            /*
           res:
               Promise
                   [[Prototype]]: Promise
                   [[PromiseState]]: "fulfilled"
                   [[PromiseResult]]: 123
           */

            // 2. 返回promise值
            return new Promise((resolve, reject) => {
                // resolve('ok');
                /*
                    Promise {<pending>}
                        [[Prototype]]: Promise
                        [[PromiseState]]: "fulfilled"
                        [[PromiseResult]]: "ok"
                */

                reject('error');
                /*
                    Promise {<pending>}
                        [[Prototype]]: Promise
                        [[PromiseState]]: "rejected"
                        [[PromiseResult]]: "error"

                */
               
                // 3. 抛出异常
                // throw 'oh no';
                /*
                        Promise {<pending>}
                            [[Prototype]]: Promise
                            [[PromiseState]]: "rejected"
                            [[PromiseResult]]: 'oh no'
    
                    */
            })


        }
        let res = main();
        console.log(res)
        /*
        main函数没有返回值：
        res:
            Promise
                [[Prototype]]: Promise
                [[PromiseState]]: "fulfilled"
                [[PromiseResult]]: undefined
        */
    </script>
</body>

</html>

六、await表达式

<!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>await表达式</title>
</head>

<body>
    <script>
        /*
            1. await右侧的表达式一般为promise对象，但也可以为其他值
            2. 如果是promise对象，则await返回的是promise成功的值
            3. 如果表达式的是其他值，直接将此值作为await的返回值
            注意：
                1. await必须写在async函数中，但是async函数中可以没有await
                2. 如果await的promise失败了，就会抛出异常，需要通过try...catch捕获处理
        */
        async function main() {
            let p = new Promise((resolve, reject) => {
                // resolve('ok');
                reject('error');
            });

            // 1. 非promise
            let res1 = await 123;
            console.log(res1);//123

            // 2. 为promise -成功
            // let res = await p;
            // console.log(res);//ok

            // 3. 为promise -失败
            try {
                let res2 = await p;
            } catch (e) {
                console.log(e);//error
            }
        }

        main();
    </script>
</body>

</html>

七、async和await的实践-读取文件

// node filename.js

const fs = require('fs');
const util = require('util');
const mineReadFile = util.promisify(fs.readFile)

// 读取文件
// fs.readFile('./resource/readme.txt', (err1, data1) => {
//     if (err1) throw err1;
//     fs.readFile('./resource/txt.txt', (err2, dada2) => {
//         if (err2) throw err2;
//         console.log(data1 + dada2);
//     })
// });

async function main() {
    try {
        let data1 = await mineReadFile('./resource/readme.xt');
        let data2 = await mineReadFile('./resource/txt.txt');

        console.log(data1 + data2);
    } catch (e) {
        console.log(e.code);
    }
}
main();

八、async和await的实践-ajax请求

<!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>async与await</title>
</head>

<body>
    <button id="btn">点击发送</button>
    <script>
        function sendAjax(url, type) {
            return new Promise((resolve, reject) => {
                const xhr = new XMLHttpRequest();
                xhr.open(type, url);
                xhr.send();
                xhr.onreadystatechange = function () {
                    if (xhr.readyState === 4) {
                        if (xhr.status >= 200 && xhr.status < 300) {
                            resolve(xhr.response);
                        } else {
                            reject(xhr.status);
                        }
                    }
                }
            });
        }
        // sendAjax('http://localhost:2000/server', 'get').then((
        //     data) => { console.log(data) },
        //     (err) => { console.log(err) }
        // );
        const btn = document.getElementById('btn');
        btn.addEventListener('click', async function () {
            // 发送
            let res = await sendAjax('http://localhost:2000/server', 'get');
            console.log(res);
        })
    </script>
</body>

</html>

hello_yajing
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS手写一个自定义Promise操作示例
11-21
本文实例讲述了JS手写一个自定义Promise操作。分享给大家供大家参考，具体如下： 经常在面试题中会看到，让你实现一个Promsie,或者问你实现Promise的原理，所以今天就尝试利用class类的形式来实现一个Promise 为了不...
promise me,一定要学会手写一个Promise(四)
hello_yajing的博客
03-15 370
一、Promise API 1. resolve方法 <!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-sca.
promise me,一定要学会手写一个Promise(一)
hello_yajing的博客
03-14 1216
从b站看了尚硅谷的Promise课程，讲的非常好。所以总结以下加深记忆~~~
promise me,一定要学会手写一个Promise(六)
hello_yajing的博客
03-15 452
一、手写Promise方法 实现Promise的构造器方法 function Promise(excutor) { // 添加属性 this.PromiseState = 'pending'; this.PromiseResult = null; this.callbacks = [];// 为了多个then链式调用,保存then方法中传入的回调函数 //保存实例对象的this的值 const self = this; function re
promise me,一定要学会手写一个Promise(二)
hello_yajing的博客
03-14 1115
这一节我们一起来体验一下Promise的基本使用~~
如何从零开始利用js手写一个Promise库详解
10-18
ES2015 推出了JS 的 Promise ，而在没有原生支持的时候，我们也可以使用诸如 Promises/A+ 的库的帮助，在我们的代码里实现Promise 的支持，下面这篇文章主要给大家介绍了如何从零开始利用js手写一个Promise库的相关...
Promise_js手写promise_js手写Promise_手写Promise_JS手写Promise_
09-30
原生js手写Promise
ant design DatePicker日期选择框指定分钟的间隔minuteStep属性
u010234868的专栏
05-17 237
在上面的例子中，DatePicker 将只允许用户以 15 分钟为间隔选择分钟。是 Ant Design 的 TimePicker时间选择框组件的一个属性。设置为 30，则用户可以选择以 30 分钟为间隔的分钟值。如果你想让分钟选项只能以 15 分钟为间隔选择，你可以将。
js知识点汇总之let const 和 var的区别
最新发布
fyw1789的博客
05-23 1302
声明的变量会先在作用域中被创建出来，但因此时还未进行词法绑定，所以是不能被访问的，如果访问就会抛出错误。因此，在这运行流程进入作用域创建变量，到变量可以被访问之间的这一段时间，就称之为暂时死区。其实上面不存在变量提升的例子中，其实也是暂时性死区，因为它有暂时性死区的概念，所以它压根就不存在变量提升了。实际上保证的，并不是变量的值不得改动，而是变量指向的那个内存地址所保存的数据不得改动。中的作用域有：全局作用域、函数作用域，命令声明变量之前，该变量都是不可用的。，导致绑定这个块级作用域，
springboot+vue2+elementui实现时间段查询
2301_76604664的博客
05-20 361
将前端传来的时间数组，赋值给对应的属性；
React函数式组件的父子方法互相调用，父组件调用子组件方法，子组件调用父组件方法
SongZhengxing_的博客
05-18 243
子组件需要使用 forwardRef 函数包裹，然后使用 useImperativeHandle 暴露属性和方法。编写子组件 Child。
TS中的InstanceType函数和Typeof 操作符
05-23 110
【vue中的instanceType用法】父组件用ref获取子组件时，通过 instanceType获取子组件的类型。此外，typeof 操作符除了可以获取对象的结构类型之外，它也可以用来获取函数对象的类型。尽管ES6引入了更清晰的类语法，但从类型检查的角度看，类仍然被视为函数。函数：该函数返回（构造） 由某个构造函数构造出来的实例类型组成的类型。操作符除了可以获取对象的结构类型之外，它也可以用来获取函数对象的类型。获取由某个构造函数构造出来的实例类型组成的类型。操作符可以用来获取一个变量或对象的类型。
前端开发攻略---用Vue实现无限滚动的几种方法
nibabaoo的博客
05-22 549
用vue实现无限滚动
15 VUE学习：插槽slot
sixpp的博客
05-23 1603
如果我们将这个概念拓展一下，可以想象的是，一些组件可能只包括了逻辑而不需要自己渲染内容，视图输出通过作用域插槽全权交给了消费者组件。Vue 组件的插槽机制是受[原生 Web Component `` 元素]的启发而诞生，同时还做了一些功能拓展，这些拓展的功能我们后面会学习到。现在组件可以用在不同的地方渲染各异的内容，但同时还保证都具有相同的样式。插槽内容可以访问到父组件的数据作用域，因为插槽内容本身是在父组件模板中定义的。在上面的[渲染作用域]中我们讨论到，插槽的内容无法访问到子组件的状态。
虚拟列表 vue-virtual-scroller 的使用
小秀的博客
05-22 314
【代码】虚拟列表 vue-virtual-scroller 的使用。
【MySQL精通之路】AdminAPI-使用
Anakki的博客
05-19 711
本文介绍MySQL SHELL提供的MySQL AdminAPI，使您能够，使用它们创建和，并集成。
Vue3的setup系列篇之defineEmits和defineProps使用方式
weixin_44072254的博客
05-21 230
defineEmits：触发事件（函数，等价于 $emit)defineProps：父组件传过来的值进行类型验证。
笔记：前端知识梳理
weixin_46691179的博客
05-17 227
让JavaScript能够在目标机器上能够正常运行的一种实现方式，浏览器不同，JavaScript引擎的实现也不同，如：谷歌的v8、火狐的spidermonkey、IE的chakra、Edge的chakracore。：在v8引擎的基础上又新增了很多js库，换句话说：Node.js内置了自身实现的js变量和函数，功能类似C/C++的标准库。：脚本语言的标准，不同版本的标准称为ESx，如：ES5、ES6。：对ES标准的一种实现，ES标准的其他实现还有JScript。：Node.js的包（库）管理工具。
手写一个promise
03-20
很高兴为您提供一个手写的 Promise 实现，代码如下： class Promise { constructor(executor) { this.state = 'pending'; this.value = undefined; this.reason = undefined; this.onResolvedCallbacks = []; this.onRejectedCallbacks = []; const resolve = (value) => { if (this.state === 'pending') { this.state = 'fulfilled'; this.value = value; this.onResolvedCallbacks.forEach((fn) => fn()); } }; const reject = (reason) => { if (this.state === 'pending') { this.state = 'rejected'; this.reason = reason; this.onRejectedCallbacks.forEach((fn) => fn()); } }; try { executor(resolve, reject); } catch (error) { reject(error); } } then(onFulfilled, onRejected) { onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : (value) => value; onRejected = typeof onRejected === 'function' ? onRejected : (reason) => { throw reason }; const promise2 = new Promise((resolve, reject) => { if (this.state === 'fulfilled') { setTimeout(() => { try { const x = onFulfilled(this.value); Promise.resolvePromise(promise2, x, resolve, reject); } catch (error) { reject(error); } }, 0); } if (this.state === 'rejected') { setTimeout(() => { try { const x = onRejected(this.reason); Promise.resolvePromise(promise2, x, resolve, reject); } catch (error) { reject(error); } }, 0); } if (this.state === 'pending') { this.onResolvedCallbacks.push(() => { setTimeout(() => { try { const x = onFulfilled(this.value); Promise.resolvePromise(promise2, x, resolve, reject); } catch (error) { reject(error); } }, 0); }); this.onRejectedCallbacks.push(() => { setTimeout(() => { try { const x = onRejected(this.reason); Promise.resolvePromise(promise2, x, resolve, reject); } catch (error) { reject(error); } }, 0); }); } }); return promise2; } static resolvePromise(promise2, x, resolve, reject) { if (promise2 === x) { return reject(new TypeError('Chaining cycle detected for promise')); } let called = false; if (x instanceof Promise) { x.then((value) => { Promise.resolvePromise(promise2, value, resolve, reject); }, reject); } else if (x !== null && (typeof x === 'object' || typeof x === 'function')) { try { const then = x.then; if (typeof then === 'function') { then.call(x, (value) => { if (called) return; called = true; Promise.resolvePromise(promise2, value, resolve, reject); }, (reason) => { if (called) return; called = true; reject(reason); }); } else { resolve(x); } } catch (error) { if (called) return; called = true; reject(error); } } else { resolve(x); } } }

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值