ES6--Promise详述（包含方法及状态改变）

最新推荐文章于 2024-05-30 10:35:32 发布

祺简

最新推荐文章于 2024-05-30 10:35:32 发布

阅读量3.6k

点赞数 2

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

本文链接：https://blog.csdn.net/weixin_45406850/article/details/122041770

版权

JavaScript 同时被 2 个专栏收录

15 篇文章 0 订阅

订阅专栏

ES6

1 篇文章 0 订阅

订阅专栏

本文目录

什么是Promise

Promise是一门新的技术(ES6规范)，是JS中进行异步编程的新解决方案。
从语法上来说：Promise是一个构造函数
从功能上来说：Promise对象用来封装一个异步操作并可以获取其成功/失败的结果值

1.Promise结构

class Promise{
    constructor(exector){
        function resolve(){
            
        }
        function reject(){
            
        }
        exector(resolve,reject)    
    }
    then(){
        
    }
}

2.Promise的三种状态以及状态之间的改变

pending、fulfilled(resolve)、rejected(未决定、履行、拒绝)，同一时间只能存在一种状态，且状态一旦改变就不能再变。

初始化：pending
当成功时：pending变为resolved
当失败时：pending变为rejected

说明：只有这两种，且一个promise对象只能改变一次，无论变为成功还是失败，都会有一个结果数据，成功的结果数据一般称为value，失败的结果数据一般称为reason

3.promise对象的属性

promise中有两个属性

PromiseState：表示promise对象的状态属性
PromiseResult：表示promise对象的结果属性即对象的值
保存着异步任务【成功/失败】的结果
可以使用resolve，reject改变这个属性中的内容

4.promise优缺点

优点：
1.Promise 分离了异步数据获取和业务逻辑，有利于代码复用。
2.可以采用链式写法
3.一旦 Promise 的值确定为fulfilled 或者 rejected 后，不可改变。

缺点：
代码冗余，语义不清。

为什么使用promise

1.指定回调函数的方式更加灵活

promise：启动异步任务–>返回promise对象–>给promise对象绑定回调函数(甚至可以在异步任务结束后指定多个)

2.支持链式调用，可以解决回调地狱问题

2.1什么是回调地狱？
回调函数嵌套调用，外部回调函数异步执行的结果是嵌套的回调执行的条件。
在发送多个异步请求时，每个请求之间相互都有关联，会出现第一个请求成功后再做下一个请求的情况。这时候往往会需要用嵌套来解决，但是这种方式会形成“回调地狱”。处理的异步请求越多，那么回调嵌套就越深。

2.2回调地狱的缺点
层次太深，不便于阅读。不便于异常处理

2.3解决方案
promise链式调用

2.4终极解决方案
async/await

3.解决异步

js是单线程执行代码，导致js的很多操作都是异步执行（ajax）的，以下是解决异步的几种方式：
1.回调函数(定时器)。
2.事件监听。
3.发布/订阅。
4.Promise对象。(将执行代码和处理结果分开)
5.Generator。
6.ES7的async/await。

怎么使用promise

1.Promise构造函数：Promise(executor){}

1.1executor函数：执行器可以使用箭头函数(resolve，reject)=>{}，或者使用匿名函数都可以

1.2resolve函数：内部定义的函数成功时调用的函数value=>{}

1.3reject函数：内部定义的函数失败时调用的函数reason=>{}

注意：executor会在promise内部立即同步调用，异步操作在执行器中执行

2.Promise.prototype.then方法用来指定回调函数：(onResolved,onRejected)=>{}

2.1onResolved函数：成功的回调函数(value)=>{}

2.2onRejected函数：失败的回调函数(reason)=>{}

注意：指定用于得到成功value的成功回调和用于得到失败reason的失败回调
返回一个新的promise对象

3.Promise.prototype.catch方法只能用来指定失败的回调函数：(onRejected)=>{}

onRejected函数：失败的回调函数(reason)=>{}
说明：then()的语法糖，相当于：then(undefined,onRejected)

链式写法中可以捕获前面then中发送的异常,这种写法的好处在于先执行promise操作，然后根据返回的结果（成功或失败）来调用onFulfilled（或者onRrejected）函数。

4.Promise.resolve方法:(value)=>{}

resolve方法属于Promise函数的方法，并不属于Promise的实例的方法，作用是可以接收一个参数，返回成功/失败的Promise对象，即快速的得到一个Promise对象

value: 成功的数据或 promise 对象
说明：返回一个成功/失败的promise对象

5.Promise.reject方法：(reason)=>{}

和Promise.resolved()方法类似，可以快速返回一个失败状态的Promise对象
reason：失败的原因
说明：返回一个失败的promise对象

6.Promise.all方法：(promise)=>{}

Promise.all()方法属于Promise函数，不属于Promise实例的方法，接收的参数是多个promise对象组成的数组，返回的是一个新的promise对象，返回一个新的 promise, 只有所有的 promise 都成功才成功, 只要有一个失败了就直接失败 ，返回的promise对象的结果， 如果成功，则是所有成功的promise的结果组成的数组，如果失败，新的Promise对象的结果值是数组中第一个失败的Promise对象的结果值
promises: 包含 n 个 promise 的数组

<script>
        let p1 = new Promise((resolve, reject) => {
            resolve('OK');
        })
        // let p2 = Promise.resolve('Success');
        let p2 = Promise.reject('Error');
        let p3 = Promise.resolve('Oh Yeah');
        
        //all这个方法 如果参数中的返回值都为成功 那么返回的是成功的值所组成的数组
        //          如果参数中有一个为失败 那么返回的是 失败的那个值
        const result = Promise.all([p1, p2, p3]);

        console.log(result);
    </script>

7.Promise.race方法：(promises)=>{}

promises:包含n个promise的数组
说明：返回一个新的promise，第一个完成的promise的结果状态就是最终的结果状态

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

        //race返回值由第一个promise改变状态的结果决定的 如果有定时器 也是按照状态改变的顺序 而不一定是执行顺序
        // 改变为成功 那么race就是成功 改变为失败 那么race就是失败 
        const result = Promise.race([p1, p2, p3]);

        console.log(result);
    </script>

promise的几个关键问题

1.如何改变promise的状态？

1.resolve(value): 如果当前是 pending 就会变为 resolved
2.reject(reason): 如果当前是 pending 就会变为 rejected
3.抛出异常: 如果当前是 pending 就会变为 rejected

2.一个promise使用then()方法指定多个成功/失败回调函数, 都会调用吗?

当promise改变为对应状态时都会调用

<script>
        let p=new Promise((resolve,reject)=>{
           // 1. 改变对象的状态           
           resolve('AAAAA');
        });
        // 调用then指定多个回调函数
        p.then(value=>{
            console.log(value);
        });
        p.then(value=>{
            console.log(value);
        });
        //此时 由于对象的状态发生改变，多个回调函数都会执行
    </script>
	案例2：
	<script>
        let p=new Promise((resolve,reject)=>{
           //对象状态没有改变
        });
        // 调用then指定多个回调函数
        p.then(value=>{
            console.log(value);
        });
        p.then(value=>{
            console.log(value);
        });
        //此时 由于对象的状态没有发生改变，多个回调函数都不会执行
    </script>

3.改变promise状态和指定回调函数谁先谁后？

（即是改变状态的代码先执行还是指定的回调函数then先执行，注意不是then函数中处理结果的代码先执行）

都有可能, 正常情况下是先指定回调再改变状态, 但也可以先改状态再指定回调
如何先改状态再指定回调?
- 在执行器中直接调用 resolve()/reject()
- 延迟更长时间才调用 then()

<script>
        // 问题 ：resolve() 和then()谁先执行 谁后执行  两种情况都有可能出现
        // 有可能是先改变状态，在使用then指定回调，也有可能是先使用then指定回调，在改变状态
        //1. 当 执行器的任务是同步任务，即执行器中直接调用resolve()或者reject()来改变状态的时候 
        let p=new Promise((resolve,reject)=>{
           // 1. 改变对象的状态           
           resolve('AAAAA');
        });
       
        p.then(value=>{
            console.log(value);
        },reason=>{

        });
       
    </script>
案例2：
	  <script>
        // 2. 此种情况较多 ，当执行器函数中的任务是一个异步任务的时候 先执行then指定回调函数，在改变状态 
        // 即改变状态需要一些时间，此时 先执行then指定回调函数，在改变状态
        let p=new Promise((resolve,reject)=>{
            setTimeout(() => {
                resolve('ok');
            }, 1000);
        });
       
        p.then(value=>{
            console.log(value);
        },reason=>{

        });
       
    </script>

4.什么时候才能得到数据？

如果先指定的回调, 那当状态发生改变时, 回调函数就会调用, 得到数据
如果先改变的状态, 那当指定回调时, 回调函数就会调用, 得到数据

5.promise.then()返回的新promise的结果状态由什么决定？

简单表达：由then()指定的回调函数执行的结果决定

<script>
        //promise.then()返回的新 promise 的结果状态由 then()指定的回调函数执行的结果决定
        let p=new Promise((resolve,reject)=>{
            resolve('ok');
        });
       
        let result=p.then(value=>{
            console.log(value);
        },reason=>{

        });
        console.log(result);//此时 result对象的状态是有then指定的回调函数的结果决定 此时为成功状态
       
    </script>

详细表达
1.如果抛出异常, 新 promise 变为 rejected, reason 为抛出的异常
2.如果返回的是非 promise 的任意值, 新 promise 变为 resolved, value 为返回的值
3.如果返回的是另一个新 promise, 此 promise 的结果就会成为新 promise 的结果

<script>
        //promise.then()返回的新 promise 的结果状态由 then()指定的回调函数执行的结果决定
        let p=new Promise((resolve,reject)=>{
            resolve('ok');
        });
       
        let result=p.then(value=>{
            // 详细说明 
            //1. 当指定的回调函数 抛出了异常 此时result的状态为失败状态 结果为抛出的异常的信息
            // throw '出现问题。。。。。'
            // 2. 如果指定的回调函数 返回的是一个非promise的值 result为成功状态，结果为返回的值
            //return 'aaa';
            // 3. 如果指定的回调函数，返回的是一个promise对象，则返回的promise对象的状态就是result的状态
            return new Promise((resolve,reject)=>{
                resolve('bbb');
            });
        },reason=>{

        });
        console.log(result);
    </script>

6.promise如何串联多个操作任务？

1.promise 的 then()返回一个新的 promise, 可以开成 then()的链式调用
2.通过 then 的链式调用串连多个同步/异步任务

<script>
        //promise.then()返回的新 promise 的结果状态由 then()指定的回调函数执行的结果决定
        let p=new Promise((resolve,reject)=>{
          setTimeout(() => {
              resolve('aaaa');
          }, 1000);
        });
       p.then(value=>{
            return new Promise((resolve,reject)=>{
                resolve('bbb');
            });
        }).then(value=>{
            console.log(value);//此时打印 bbb
        }).then(value=>{
            console.log(value);//此时打印 undefined
        });
    </script>

7.promise异常穿透？

1.当使用 promise 的 then 链式调用时, 可以在最后指定失败的回调
2.前面任何操作出了异常, 都会传到最后失败的回调中处理

 <script>
        //promise.then()返回的新 promise 的结果状态由 then()指定的回调函数执行的结果决定
        let p=new Promise((resolve,reject)=>{
          setTimeout(() => {
            //   resolve('aaaa');
            reject('error');
          }, 1000);
        });
       
       p.then(value=>{
           console.log('1111');
        }).then(value=>{
            console.log('2222');
        }).then(value=>{
            console.log('3333');
        }).catch(reason=>{
            //上述任何一个出现错误 都可以进行异常穿透，在catch中处理
            console.log(reason);
        });
    </script>

8.中断promise链？

<script>
        //promise.then()返回的新 promise 的结果状态由 then()指定的回调函数执行的结果决定
        let p=new Promise((resolve,reject)=>{
          setTimeout(() => {
            resolve('aaaa');
            // reject('error');
          }, 1000);
        });
       
       p.then(value=>{
          console.log('1111');
         //此时如果 想终端 then调用链 ，有且只有 一种方式 返回一个pending状态的promise对象
         //因为 此时的promise对象的状态没有改变 下面的then方法都不在执行
         return new Promise(()=>{});
        }).then(value=>{
            console.log('2222');
        }).then(value=>{
            console.log('3333');
        }).catch(reason=>{
            //上述任何一个出现错误 都可以进行异常穿透，在catch中处理
            console.log(reason);
        });
    </script>

祺简

关注

2
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
ES6--Promise详述（包含方法及状态改变）

本文目录什么是Promise1.Promise结构2.Promise的三种状态以及状态之间的改变3.promise对象的属性4.promise优缺点为什么使用promise1.指定回调函数的方式更加灵活2.支持链式调用，可以解决回调地狱问题3.解决异步怎么使用promise1.Promise构造函数：Promise(executor){}2.Promise.prototype.then方法用来指定回调函数：(onResolved,onRejected)=>{}3.Promise.prototype.c
复制链接

扫一扫