Promise学习

最新推荐文章于 2024-07-20 23:55:03 发布
最新推荐文章于 2024-07-20 23:55:03 发布
阅读量126 收藏 1
点赞数
文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/vigorZ/article/details/120206749
版权

Promise

一、Promise是什么

	1.Promise是js中进行异步编程的新解决方案，从语法上来说Promise是一个构造函数；从功能上说Promise对象用来封装一个异步操作并可以获取其成功/失败的返回值
	2.Promise的状态改变只有两种：pending变为resolved，pending变为rejected 且一个promise对象只改变一次，无论变为成功还是失败，都会有一个结果数据，成功的结果数据一般称为value，失败的结果数据一般称为reason

二、Promise的API

	1.Promise构造函数：Promise(excutor){}
		（1）excutor函数：执行器 (resolve, reject) => {}
		（2）resolve函数：内部定义成功时调用的函数 value => {}
		（3）reject函数：内部定义失败时调用的函数 reason -> {}
		excutor会在Promise内部立即同步调用，异步操作在执行器中执行
	2.Promise.prototype.then方法：(onResolved, onRejected) => {}
		（1）onResolved函数：成功的回调函数 (value) => {}
		（2）onRejected函数：失败的回调函数 (reason) => {}
		指定用于得到成功value的成功回调和用于得到失败reason的失败回调，返回一个新的Promise对象
	3.Promise.prototype.catch方法：(onRejected) => {}
		（1）onRejected函数：失败的回调函数 (reason) => {}
		then()的语法糖，相当于：then(undefined, onRejected)
	4.Promise.resolve方法：(value) => {}
		（1）value：成功的数据或者 Promise 对象
		说明：返回一个成功/失败的 Promise对象
	5.Promise.reject方法：(reason) => {}
		（1）reason：失败的原因
		返回一个失败的 Promise对象
	6.Promise.all方法：(promises) => {}
		（1）promises：包含n个promise的数组
		返回一个新的promise，只有所有的promise都成功才成功，只要有一个失败了就直接失败
	7.Promise.race方法：(promises) => {}
		（1）promises：包含n个promise的数组
		返回一个新的promise，第一个完成的promise的结果状态就是最终的结果状态

三、Promise的几个关键问题

	1.如何改变Promise的状态
		（1）resolve(value)：如果当前是pending就会变成resolved
		（2）reject（reason）：如果当前是pending就会变成rejected
		（3）抛出异常：如果当前是pending就会变成rejected
	2.一个promise指定多个成功/失败回调函数，当promise改变为对应状态时都会调用
	3.改变Promise状态和指定回调函数谁先谁后？
		（1）都有可能，正常情况下是先指定回调再改变状态，但也可以先改变状态再指定回调
		（2）如何先改状态再指定回调？
			a.在执行器中直接调用resolve()/reject()
			b.延长更长时间才调用then()
		（3）什么时候才能得到数据？
			a.如果先指定回调，当状态发生改变时，回调函数就会调用，得到数据
			b.如果先改变状态，当指定回调时，回调函数就会调用，得到数据
	4.promise.then()返回的新promise的结果状态由什么决定？
		（1）简单表达：由then()指定的回调函数执行的结果决定
		（2）详细：
			a.如果抛出异常，新promise变为rejected，reason为抛出的异常
			b.如果返回的是非promise的任意值，新promise变为resolved，value为返回的值
			c..如果返回的是另一个新Promise，此promise的结果就会成为新promise的结果
	5.promise如何串联多个操作任务？
		（1）promise的then()返回一个新的promise，可以写成then()的链式调用
		（2）通过then的链式调用串联多个同步异步任务
	6.promise异常穿透
		（1）当时用promise的then链式调用时，可以再最后指定失败的回调
		（2）前面任何操作出现了异常，都会传到最后失败的回调中处理
	7.中断promise链
		（1）当使用promise的then链式调用时，在中间中断，不再调用后面的回调函数
		（2）在回调函数中返回一个pending状态的promise函数

四、async与await

	1.async函数
		函数的返回值为promise对象，promise对象的结果由async函数执行的返回值决定
	2.await表达式
		await右侧的表达式一般为promise对象，但也可以是其他值，如果表达式是promise对象，await返回的是promise成功的值；如果表达式是其他值，直接将此值作为await的返回值
	3.await必须写在async函数中，但async函数中可以没有await，如果await中的Promise失败了，会抛出异常，需要用try...catch捕获处理

//声明构造函数
function Promise(executor){
    //添加属性
    this.PromiseState = 'pending';
    this.PromiseResult = null;
    //声明属性
    this.callbacks = [];
    //保存实例对象的 this 的值
    const self = this;// self _this that
    //resolve 函数
    function resolve(data){
        //判断状态
        if(self.PromiseState !== 'pending') return;
        //1. 修改对象的状态 (promiseState)
        self.PromiseState = 'fulfilled';// resolved
        //2. 设置对象结果值 (promiseResult)
        self.PromiseResult = data;
        //调用成功的回调函数
        setTimeout(() => {
            self.callbacks.forEach(item => {
                item.onResolved(data);
            });
        });
    }
    //reject 函数
    function reject(data){
        //判断状态
        if(self.PromiseState !== 'pending') return;
        //1. 修改对象的状态 (promiseState)
        self.PromiseState = 'rejected';// 
        //2. 设置对象结果值 (promiseResult)
        self.PromiseResult = data;
        //执行失败的回调
        setTimeout(() => {
            self.callbacks.forEach(item => {
                item.onRejected(data);
            });
        });
    }
    try{
        //同步调用『执行器函数』
        executor(resolve, reject);
    }catch(e){
        //修改 promise 对象状态为『失败』
        reject(e);
    }
}

//添加 then 方法
Promise.prototype.then = function(onResolved, onRejected){
    const self = this;
    //判断回调函数参数
    if(typeof onRejected !== 'function'){
        onRejected = reason => {
            throw reason;
        }
    }
    if(typeof onResolved !== 'function'){
        onResolved = value => value;
        //value => { return value};
    }
    return new Promise((resolve, reject) => {
        //封装函数
        function callback(type){
            try{
                //获取回调函数的执行结果
                let result = type(self.PromiseResult);
                //判断
                if(result instanceof Promise){
                    //如果是 Promise 类型的对象
                    result.then(v => {
                        resolve(v);
                    }, r=>{
                        reject(r);
                    })
                }else{
                    //结果的对象状态为『成功』
                    resolve(result);
                }
            }catch(e){
                reject(e);
            }
        }
        //调用回调函数  PromiseState
        if(this.PromiseState === 'fulfilled'){
            setTimeout(() => {
                callback(onResolved);
            });
        }
        if(this.PromiseState === 'rejected'){
            setTimeout(() => {
                callback(onRejected);
            });
        }
        //判断 pending 状态
        if(this.PromiseState === 'pending'){
            //保存回调函数
            this.callbacks.push({
                onResolved: function(){
                    callback(onResolved);
                },
                onRejected: function(){
                    callback(onRejected);
                }
            });
        }
    })
}

//添加 catch 方法
Promise.prototype.catch = function(onRejected){
    return this.then(undefined, onRejected);
}

//添加 resolve 方法
Promise.resolve = function(value){
    //返回promise对象
    return new Promise((resolve, reject) => {
        if(value instanceof Promise){
            value.then(v=>{
                resolve(v);
            }, r=>{
                reject(r);
            })
        }else{
            //状态设置为成功
            resolve(value);
        }
    });
}

//添加 reject 方法
Promise.reject = function(reason){
    return new Promise((resolve, reject)=>{
        reject(reason);
    });
}

//添加 all 方法
Promise.all = function(promises){
    //返回结果为promise对象
    return new Promise((resolve, reject) => {
        //声明变量
        let count = 0;
        let arr = [];
        //遍历
        for(let i=0;i<promises.length;i++){
            //
            promises[i].then(v => {
                //得知对象的状态是成功
                //每个promise对象 都成功
                count++;
                //将当前promise对象成功的结果 存入到数组中
                arr[i] = v;
                //判断
                if(count === promises.length){
                    //修改状态
                    resolve(arr);
                }
            }, r => {
                reject(r);
            });
        }
    });
}

//添加 race 方法
Promise.race = function(promises){
    return new Promise((resolve, reject) => {
        for(let i=0;i<promises.length;i++){
            promises[i].then(v => {
                //修改返回对象的状态为 『成功』
                resolve(v);
            },r=>{
                //修改返回对象的状态为 『失败』
                reject(r);
            })
        }
    });
}

类式写法

class Promise{
    //构造方法
    constructor(executor){
        //添加属性
        this.PromiseState = 'pending';
        this.PromiseResult = null;
        //声明属性
        this.callbacks = [];
        //保存实例对象的 this 的值
        const self = this;// self _this that
        //resolve 函数
        function resolve(data){
            //判断状态
            if(self.PromiseState !== 'pending') return;
            //1. 修改对象的状态 (promiseState)
            self.PromiseState = 'fulfilled';// resolved
            //2. 设置对象结果值 (promiseResult)
            self.PromiseResult = data;
            //调用成功的回调函数
            setTimeout(() => {
                self.callbacks.forEach(item => {
                    item.onResolved(data);
                });
            });
        }
        //reject 函数
        function reject(data){
            //判断状态
            if(self.PromiseState !== 'pending') return;
            //1. 修改对象的状态 (promiseState)
            self.PromiseState = 'rejected';// 
            //2. 设置对象结果值 (promiseResult)
            self.PromiseResult = data;
            //执行失败的回调
            setTimeout(() => {
                self.callbacks.forEach(item => {
                    item.onRejected(data);
                });
            });
        }
        try{
            //同步调用『执行器函数』
            executor(resolve, reject);
        }catch(e){
            //修改 promise 对象状态为『失败』
            reject(e);
        }
    }

    //then 方法封装
    then(onResolved,onRejected){
        const self = this;
        //判断回调函数参数
        if(typeof onRejected !== 'function'){
            onRejected = reason => {
                throw reason;
            }
        }
        if(typeof onResolved !== 'function'){
            onResolved = value => value;
            //value => { return value};
        }
        return new Promise((resolve, reject) => {
            //封装函数
            function callback(type){
                try{
                    //获取回调函数的执行结果
                    let result = type(self.PromiseResult);
                    //判断
                    if(result instanceof Promise){
                        //如果是 Promise 类型的对象
                        result.then(v => {
                            resolve(v);
                        }, r=>{
                            reject(r);
                        })
                    }else{
                        //结果的对象状态为『成功』
                        resolve(result);
                    }
                }catch(e){
                    reject(e);
                }
            }
            //调用回调函数  PromiseState
            if(this.PromiseState === 'fulfilled'){
                setTimeout(() => {
                    callback(onResolved);
                });
            }
            if(this.PromiseState === 'rejected'){
                setTimeout(() => {
                    callback(onRejected);
                });
            }
            //判断 pending 状态
            if(this.PromiseState === 'pending'){
                //保存回调函数
                this.callbacks.push({
                    onResolved: function(){
                        callback(onResolved);
                    },
                    onRejected: function(){
                        callback(onRejected);
                    }
                });
            }
        })
    }

    //catch 方法
    catch(onRejected){
        return this.then(undefined, onRejected);
    }

    //添加 resolve 方法
    static resolve(value){
        //返回promise对象
        return new Promise((resolve, reject) => {
            if(value instanceof Promise){
                value.then(v=>{
                    resolve(v);
                }, r=>{
                    reject(r);
                })
            }else{
                //状态设置为成功
                resolve(value);
            }
        });
    }

    //添加 reject 方法
    static reject(reason){
        return new Promise((resolve, reject)=>{
            reject(reason);
        });
    }

    //添加 all 方法
    static all(promises){
        //返回结果为promise对象
        return new Promise((resolve, reject) => {
            //声明变量
            let count = 0;
            let arr = [];
            //遍历
            for(let i=0;i<promises.length;i++){
                //
                promises[i].then(v => {
                    //得知对象的状态是成功
                    //每个promise对象 都成功
                    count++;
                    //将当前promise对象成功的结果 存入到数组中
                    arr[i] = v;
                    //判断
                    if(count === promises.length){
                        //修改状态
                        resolve(arr);
                    }
                }, r => {
                    reject(r);
                });
            }
        });
    }

    //添加 race 方法
    static race (promises){
        return new Promise((resolve, reject) => {
            for(let i=0;i<promises.length;i++){
                promises[i].then(v => {
                    //修改返回对象的状态为 『成功』
                    resolve(v);
                },r=>{
                    //修改返回对象的状态为 『失败』
                    reject(r);
                })
            }
        });
    }
}
vigorZ
关注
学习Promise,这些知识点就够了
前端三疯的博客
07-28 306
用法 promise对象是通过new Promise(arg) 而来，对于传递的arg参数是由要求的，arg是处理器函数，这个处理器函数有接受两个函数作为参数–resolve和reject,通过调用resolve函数将promise的状态变为fulfilled,通过调用reject函数将状态变为rejected。 let promise = new Promise((resolve, reject)=>{ resolve(10); // reject(new Error("promsie erro
【JS】promise学习
weixin_43349627的博客
12-01 168
Promise 介绍与基本使用，自定义promise
Promise 详解（原理篇）
最新发布
不知道并不可怕，可怕的是自己不知道 “自己不知道”。
07-20 1686
Promise 是一种异步编程的解决方案。在异步操作中，callback 会导致回调地狱的问题，Promise 解决了这个问题。一个 Promise对象有以下三种状态:pending：初始状态，既不是成功，也不是失败状态。：意味着操作成功完成。rejected：意味着操作失败。当 new Promise() 被实例化后，即表示 Promise 进入 pending 初始化状态，准备就绪，等待运行。
Promise 学习笔记
01-08
Promise 底层实现 ：Promise实现原理（附源码） （本文学习并参考的一篇博客，推荐直接阅读） 其他推荐：Promise简单实现 （一）Promise 基本结构 Promise 是一种抽象异步处理对象，其核心概念为 “确保一件事做完...
javascript异步编程代码书写规范Promise学习笔记
10-24
通过学习Promise，开发者能够更好地管理JavaScript中的异步流程，提高代码质量。在现代JavaScript中，Promise已经成为ES6标准的一部分，而不再仅仅依赖于jQuery或其他库。了解并掌握Promise，对于任何JavaScript...
Promise学习笔记 7.11
qq_36450483的博客
07-11 379
Promise学习笔记
Promise的相关介绍
Serena_tz的博客
04-27 217
二种类型的回调函数 同步回调 理解: 立即执行, 完全执行完了才结束, 不会放入回调队列中 例子: 数组遍历相关的回调函数 / Promise 的 excutor 函数 异步回调 理解: 不会立即执行, 会放入回调队列中将来执行 例子: 定时器回调 / ajax 回调 / Promise 的成功|失败的回调 JS的error处理 错误的类型 Error: 所有错误的父类型 ReferenceError: 引用的变量不存在 TypeError: 数据类型不正确的错误 RangeError: 数据值不
Promise入门学习
十九万里的博客
06-22 229
1、promise概述 Promise是ES6中原生的一个方法 代表着未来要发生的某件事情，在javascript中来说就是异步操作，所以在js中promise就是异步操作常见的一种方法， 异步操作常见方法： 1、callback回调函数 2、事件监听 3、promise 4、发布/订阅模式 5、async/await 6、generator链式调用 这里我们主要学习Promise Promise主要的优点在于能把异步操作通过同步操作的流程表示出来，避免了异步的嵌套回调。产生回调地狱。 2、promis
【Promise学习】Promise的理解
qiaoyangla的博客
04-28 544
1、Promise 是什么? 抽象表达: （1） Promise 是一门新的技术(ES6 规范) （2）Promise 是 JS 中进行异步编程的新解决方案 备注：旧方案是单纯使用回调函数 具体表达: （1）从语法上来说: Promise 是一个构造函数 （2）从功能上来说: Promise 对象用来封装一个异步操作并可以获取其成功/ 失败的结果值 异步编程：fs文件操作，数据库操作，ajax，定时器等 2、为什么要用 Promise? 指定回调函数的方式更加灵活 1. 旧的: 必.
promise学习
小小少年
11-17 396
定义： promise代表一个异步操作的执行返回状态，这个执行返回状态在promise对象创建时未必已知。它允许你为异步操作的成功或失败指定处理方法。 表现： Promise是一种封装未来值的易于复用的异步任务管理机制。 术语： 1. promise: 指一个拥有符合规范的 then方法的对象； 2. thenable: 指一个定义了 then方法的对象； 3. 决议（res...
Promise 学习
技术小屋
03-17 262
Promise 前言 之前写 JavaScript 异步处理时，一般都会用回调函数（callback）方式来处理异步的结果，例如： function f (callback) { setTimeout(() =&gt; { // setTimeout 模拟耗时任务 const result = 'f'; callback(result) }, 1...
js中Promise学习
01-26
JS中的Promise是一种用于处理异步操作的对象。它可以将异步操作封装成一个Promise实例，并通过链式调用的方式处理异步操作的结果。下面是关于Promise的两个例子： 1. 异常穿透： ```javascript let p = new Promise...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值