Promise（二）对象状态、结果值属性介绍、工作流程、API以及几个关键问题

星星xin

已于 2023-01-05 16:23:56 修改

阅读量233

点赞数

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

于 2022-11-21 17:33:03 首次发布

本文链接：https://blog.csdn.net/qq_45764317/article/details/127968933

版权

javascript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

四、Promise对象状态、结果值属性介绍

1、实例对象中的一个属性【promiseState】

pending 未决定的
resolved / fullfiled 成功

3）rejected 失败

*状态改变只能由pending->resolved 或者pending->rejected

2、Promise 对象的值

实例对象中的另一个属性【PromiseResult】

保存着异步任务【成功/失败】的结果

resolve
reject

五、Promise的基本流程

六、如何使用Promise？

1、API

Promise构造函数：promise（excutor）{}

executor函数：执行器（resolve，reject）=>{}
resolve函数：内部定义成功时调用函数 value=>{}
reject函数：内部定义失败时调用函数reason=>{}

ps:executor会在Promise内部立即同步调用，异步操作在执行器中执行

2） Promise.prototype.then方法：(onResolved,onRejected)=>{}

onResolved函数：成功的回调函数 value=>{}
onRejected函数：失败的回调函数 reason=>{}

ps:指定用于得到成功value的成功回调函数和用以得到失败reason的失败回调返回一个新的promise对象

3）Promise.prototype.catch 方法：(onRejected)=>{}

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

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

value:成功的数据或promise对象

ps:返回一个成功/失败的promise对象

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

reason：失败的原因

ps:返回一个失败的promise对象

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

promises:包含n个promise的数组

ps:返回的一个新的promise，只有所有的promise都成功才成功，只要有一个失败了就直接失败

<script>
    let p1 = new Promise((resolve, reject) => {
        resolve('ok');
    });
    let p2 = Promise.resolve('Success');
    // let p2 = Promise.reject('Error');
    let p3 = Promise.resolve('yes');
    const  result = Promise.all([p1,p2,p3]);
    console.log(result);//fullfiled   rejected
</script>

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

promises:包含n个promise的数组

ps:说明返回一个人新的promise,第一个完成的promise的结果状态就是最终的结果状态

<script>
    let p1 = new Promise((resolve, reject) => {
        setTimeout(()=>{
            resolve('ok');
        },1000)
    });
    let p2 = Promise.resolve('Success');
    // let p2 = Promise.reject('Error');
    let p3 = Promise.resolve('yes');
    const  result = Promise.race([p1,p2,p3]);
    console.log(result);//p2第一个完成
</script>

2、promise的几个关键问题

1）如何修改对象的状态？ resolve(),reject(),throw

<script>
    let p = new Promise((resolve, reject) => {
        //1、resolved 函数
        // resolve('ok');//pending => fulfilled（resolved）
        //reject 函数
        // rejected('error');//pending => rejected
        // 3.抛出错误
        throw '出问题了'
    });
    console.log(p);
</script>

一个promise指定多个成功/失败回调函数，都会调用吗？

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

<script>
    let p = new Promise((resolve, reject) => {
        resolve('ok');//promise的状态从pending->resolved，执行相应的回调函数
    });
    //指定回调 -1
    p.then(value=>{
        console.log(value);
    });
    //指定回调 -2
    p.then(value => {
        alert('value')
    })
</script>

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

都有可能，正常情况下时先指定回调再改变状态，但是也可以先改变状态再指定回调

如何先改变状态再指定回调？

1.在执行器中直接调用resolve/reject()

2.延迟更长时间才调用then()
什么时候才能得到数据？

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

2.如果先改变状态，那当指定回调时，回调函数就会调用，得到数据

4）then方法的返回结果由什么决定？

	由then方法指定的回调函数的结果决定

5）串联多个操作任务

- promise的then返回一个新的promise，可以看出then的链式调用
- 通过then的链式调用串联多个同步/异步任务

<script>
    let p = new Promise((resolve, reject) => {
        setTimeout(()=>{
            resolve('ok');
        },1000);
    });
    p.then(value =>{
        return new Promise((resolve, reject) => {
            resolve('success');
        });
    }).then(value => {
        console.log(value);//success
    }).then(value => {
        console.log(value);//undefined
    })
</script>

异常穿透

由最后的catch方法实现错误处理

 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);
    })