Promise 详解

HelloWorldZ

发布于 2024-03-20 18:40:09

860

发布于 2024-03-20 18:40:09

文章被收录于专栏：前端开发前端开发

前言

Promise是JS中的一个内置类

基础写法

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Promise基础语法</title>
</head>

<body>
    <script>
        let ran = Math.random()
        let promiseExamp = new Promise((resolve, reject) => {
            setTimeout(() => {
                ran < 0.5 ? reject(ran) : resolve(ran)
            }, 1000)
        })
        promiseExamp.then((result) => {
            console.log('成功：' + result)
        }, (error) => {
            console.log('失败：' + error)
        })
    </script>
</body>

</html>

Promise的executor函数和状态

Promise的状态

pending 初始状态（NEwPROMISE后的状态）
fulfilled 操作成功完成（在executor函数中把resolve执行，就是告知promise当前异步操作的结果是成功的）
rejected 操作失败（在executor函数中把reject执行，就是告知promise当前异步操作的结果是失败的）

executor函数

let pro = new Promise([executor])
- new Promise 的时候就会把执行函数[executor]执行，[executor]是Promise类的一个回调函数，Promise内部会把它执行。
- Promise不仅将它执行，还给他传递两个参数（两个参数也是函数类型）
  - resolve函数：如果它执行，就代表Promise处理的异步事情是成功的，将Promise的状态由 padding --改为--> fulfilled
  - reject函数：如果它执行，就代表Promise处理的异步事情是失败的，将Promise的状态由 padding --改为--> rejected
  - [executor]函数中所放的就是当前要处理的异步操作事情（同步也是可以的，但一般存放的是异步任务），任务成功，执行resolve,任务失败执行reject

Promise中的then和catch和finally方法

重点不是要知道异步任务是成功还是失败，而是要确定失败之后做什么，成功之后做什么

Promise.prototype 上
- then 设置成功或者失败后执行的方法（成功或者失败都可以设置，也可以只设置一个）当执行到异步操作时，主线程不会等待异步执行完成，而是先基于then方法将我们要在成功或者失败的时要执行的东西扔到事件池中，暂时是不执行的，而是等待状态更改后的通知安排。
- promiseExamp.then([success],[error])
- promiseExamp.then([success])
- promiseExamp.then(null,[error])
- catch: 设置失败后执行的方法
- finally: 设置不论成功还是失败都会执行的方法（一般很少用）

then 链

执行then/catch/finally返回的结果是一个全新的Promise实例，所以可以链式写下去，下一个then中哪个方式会被执行，由上一个then中某个方法的执行结果来决定

    <script>
        let pro1 = new Promise((resolve, reject) => {
            setTimeout(() => {
                let ran = Math.random()
                ran < 0.5 ? reject(ran) : resolve(ran)
            }, 1000)
        })
        let pro2 = pro1.then(result => {
            console.log('pro1:success');
        }, error => {
            console.log('pro1:error');
        })
        let pro3 = pro2.then(result => {
            console.log('pro2:success');
        }, error => {
            console.log('pro2:error');
        })
    </script>

---控制台的打印情况---
第一种：ran小于0.5时
pro1:error
pro2:success
第二种：ran大于0.5时
pro1:success
pro2:success

一个then中某个方法的的返回值会返回给下一个then的某个方法中

    <script>
        new Promise((resolve, reject) => {
            resolve(100) //=> 将第一个Promise实例的Value值改为100
        }).then(result => {
            console.log(result);
            return result * 10 //=> then中return的结果相当于把当前这个新的promise实例中的value值改为返回值
        }, error => {
            console.log(error);
        }).then(A => {
            console.log(A);
        }, B => {
            console.log(B);
        }).then(C => {
            console.log(C)
        },D => {
            console.log(D)
        })
    </script>

---控制台---
100
1000
undefined

以上便是PROMISE里的分量机制，每一次then后，都会是一个新的PROMISE实例，该实例只受上一个PROMISE实例影响（上一个实例的状态和value值来决定）

我们再来看PROMISE的玩法

如果如果当前PROMISE实例状态确定后，都会找到对应的THEN中找方法，如果THEN中没有对应的这个方法，则会向下顺延

new Promise(resolve,reject) => {
   reject(-100)
}.then(A => {
   console.log(A)
   return A * 10
}).catch(B => {
   console.log(B)
   return B * 10
})

---控制台---
-100

new Promise(resolve,reject) => {
   resolve(100)
}.then(A => {
   console.log(HELLO)  
   return A * 10
}).catch(B => {
   console.log(B) 
}).then(C => {
    console.log('日闽好帅')
})

---控制台---
ReferenceError: HELLO is not defined
日闽好帅

通过这个PROMISE实例身上的.catch方法，它能够带来什么好处呢？

我们通过上面的两个示例，可以看到.catch所能够监视到的范围变大了，如果第一个PROMISE实例它的状态修改为失败，而第二个PROMISE实例中并没有设置第二个接受失败的回调，因此顺延到第三个.catch创建的PROMISE实例对象来执行；如果第一个PROMISE实例它的状态修改为成功，但是第二个PROMISE实例的成功回调中处理失败，将状态改为了rejected，那么就以该报错原因作为VALUE值，.catch即是可以接受其报错原因，也是可以进行失败后的一些操作的，如果这样写，就可以监听到两个了，是不是很不错的选择。

我们来看一道题目，它的打印结果是什么？

new Promise((resolve,reject) => {
   resolve();
}).then().catch(x => {
   console.log(1)
}).then(x => {
   console.log(2)  // => ok
}).then(x => {
   console.log(3) // => ok
}).catch(x => {
   console.log(4)
}).then(x => {
   console.log('AAA') // => ok
   console.log(AAA) // => 报错
}).catch().then(null, x => {
   console.log(5) // => ok
})