Promise详解

Promise是什么

理解

1.抽象表达：

promise是一门新的技术（ES规范）

Promise是JS中进行异步编程的新解决方案

注：旧方案是单纯的使用回调函数

2.具体表达：

从语法上来说：Promise是一个构造函数

从功能上来说：Promise对象用来封装一个异步操作并可以获取其成功/失败的结果

promise的状态改变

Promise变为resolved

Promise变为rejected

且一个Promise对象只能改变一次

无论是成功（value）还是失败（reason），都会有一个结果数据

promise基本流程

为什么要用Promise

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

旧的：必须在启动异步任务前指定

promise：启动异步任务 => 返回promise对象 => 给promise对象绑定回调函数（深只可以在异步任务结束洪湖指定多个）

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

1.什么是回调地狱？

回调函数嵌套函数，外部函数异步执行的结果是嵌套的回调执行的条件

 2.回调地狱的缺点？

不便于阅读

不便于异常处理

3.解决方案？

promise链式调用

4.终极解决方案

async/await

如何使用Promise

使用1：基本编码流程

 

运行结果：

 

使用2：promise封装基于定时器的异步

API 

.then方法 ： （onResolved, onRejected）=> {}

onResolved函数：成功的回调函数 （value）=> {}

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

.catch方法：（onRejected）=> {}

onRejected函数： 失败的函数回调（reason）=>{} ------只能接收失败的数据

 

.resolve方法：（value）=> {}

value: 成功的数据或promise对象

如果传入的参数时非promise对象 则返回的结果为成功的promise对象

 

如果传入的参数是promise对象，则 参数的结果决定了 resolve 的结果

 

 

  

.reject方法：（reason） => {}

reason: 失败的原因 （不管传入什么都会返回一个失败的promise）

 

 

.all方法：（promise） => {}

promise: 包含n个promise的数组  （返回一个新的promise，只有所有的promise都成功才成功，只要有一个失败了就直接失败）

 

 

 

 

 

.race 方法:  (promise)  => {}
promise: 包含 n 个 promise 的数组 （返回一个新的 promise, 第一个完成的 promise 的结果状态就是最终的结果状态）

 

 

 

promise关键问题

如何改变promise的状态

 

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

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

 

 

promise如何串联多个操作任务

then()的链式调用

 

promise 异常传透?

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

 

 

 

中断 promise 链?

(1) 当使用 promise 的 then 链式调用时, 在中间中断, 不再调用后面的回调函数
(2) 办法: 在回调函数中返回一个 pendding 状态的 promise 对象

 

 

async与await

asayc函数

函数的返回值为promise对象

promise对象的结果由async函数执行的返回值决定

await表达式

awiat右侧的表达式一般为promise对象 但也可以是其他的值

如果表达式是promise对象 await返回的是promise成功的值

如果表达式是其它值 直接将此值作为await的返回值

注意：

await必须写在async函数中 但async函数中可以没有await

如果await的promise失败了 就会抛出异常 需要通过try...catch捕获处理

<script>
        function fn1() {
            return Promise.resolve(13)
        }

        function fn2(){
            return 2
        }

        function fn3() {
            // return Promise.reject(3)   
            return fn3.test()      //程序运行会抛出异常
        }

        function fn4(){   
            return fn3.test()     //程序运行会抛出异常
        }


        async function fn(){
            // await右侧是一个成功的promise
            const result = await fn1()  // 13

            // await右侧是一个非promose的数据
            // const result = await fn2()    // 2

            // await右侧是一个失败promose的数据
            // const result = await fn3()    // error 3

            // await右侧抛出异常
            // const result = await fn4()

            console.log('result:',result);   
            return result+10
        }
       async function test() {
        try {
            const result2 = await fn ()
            console.log('result',result2);  //23
        } 
        catch (error) {
            // console.log('error', error);
        }
        const result3 = await fn4()
        console.log('result4',result3);
       }


       test()



        
    </script>