devbox
黑客灵魂
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

ES6-Promise使用与原理分析+手写_es6 promise 写法

作者：黑客灵魂 | 2024-07-24 19:52:30

赞

踩

es6 promise 写法

前言

1、Promise是什么

1.1、理解

  1. 抽象表达：
    1. Promise是一门新的技术(ES6规范)
    2. Promise是JS中进行异步编程的新解决方案

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

  1. 具体表达：
    1. 从语法上来说：Promise是一个构造函数
    2. 从功能上来说：Promise对象用来封装一个异步操作并可以获取其成功/失败的结果值

1.2、promise的基本状态改变

  1. pending变为resolved
  2. pending变为rejected

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

  • 成功的结果数据一般称为value，失败的结果数据一般称为reason

1.3、promise的基本流程

在这里插入图片描述

2、为什么使用Promise

2.1、指定回调函数的方法更加灵活

  1. 旧的：必须再启动异步任务前指定
  2. promise:启动异步任务 => 返回promise对象 => 给promise对象绑定回调函数(甚至可以再异步任务结束后指定/多个)

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

  1. 回调地狱：回调函数嵌套调用，外部回调函数异步执行的结果是嵌套的回调执行的条件
  2. 回调地狱的缺点
    1. 不便于阅读
    2. 不便于一场处理

3、如何使用promise

如下-.-，查看API

API

1、构造函数

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

  1. executor函数：执行器 {resolve, reject} => {}
  2. resolve函数：内部定义成功时我们调用的函数 value => {}
  3. reject函数：内部定义失败时我们调用的函数 reason => {}

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

1.1、代码

<script>
    let pms = new Promise((resolve,reject) => {
        // 成功 promise的value为'aaa' 同步调用
        resolve('aaa')
    })
	console.log(pms)
</script>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

1.2、结果

在这里插入图片描述

2、Promise.prototype.then

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

  1. onResolved函数：成功的回调函数 (value) => {}
  2. onRejected函数：失败的回调函数 (reason) => {}

说明：指定用于得到成功value的成功回调和用于得到失败reason的失败回调。返回一个新的Promise对象

2.1、代码

<script>
    let pms1 = new Promise((resolve,reject) => {
        // 成功 promise的value为'aaa'
        resolve('aaa')
    })

    let pms2 = new Promise((resolve,reject) => {
        // 失败 promise的value为'bbb'
        reject('bbb')
    })

    let pms1Then = pms1.then(resolve => {
        // pms1成功了，会走这个
        console.log("pms1 resolve",resolve)
        return resolve // return的值，作为pms2Then(promise对象)的result值。如果没有return，则默认undefined
    },reject => {
        console.log("pms1 reject",reject)
    })

    let pms2Then = pms2.then(resolve => {
        console.log("pms2 resolve",resolve)
    },reject => {
        // pms2失败了，会走这个
        console.log("pms2 reject",reject)
        return reject // return的值，作为pms2Then(promise对象)的result值
    })

    console.log("pms1Then",pms1Then)
    console.log("pms2Then",pms2Then)

</script>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31

2.2、结果

在这里插入图片描述

3、Promise.prototype.catch

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

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

说明：它是 Promise.prototype.then（undefined， onRejected） 的快捷方式

3.1、代码

<script>
    let pms1 = new Promise((resolve,reject) => {
        // 成功 promise的value为'aaa'
        resolve('aaa')
    })

    let pms2 = new Promise((resolve,reject) => {
        // 失败 promise的value为'bbb'
        reject('bbb')
    })

    let pms1Then = pms1.then(resolve => {
        // pms1成功了，会走这个
        console.log("pms1 resolve",resolve)
        return resolve
    },reject => {
        console.log("pms1 reject",reject)
    })

    let pms2Catch = pms2.catch((reject => {
        console.log("pm2 catch",reject)
        return reject
    }))

    console.log("pms1Then",pms1Then)
    console.log("pms2Catch",pms2Catch)

</script>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28

3.2、结果

在这里插入图片描述

4、Promise.prototype.finally

Promise.prototype.finally：() => {}

  1. 不管状态如何，都会执行的函数

说明：可以避免在 promise 的 then（） 和 catch（） 处理程序中重复代码。

4.1、代码

<script>
    let pms1 = new Promise((resolve,reject) => {
        // 成功 promise的value为'aaa'
        resolve('aaa')
    })


    pms1.then(resolve => {
        console.log(resolve)
        // console.log("pms1回调方法执行完毕")
    },reject => {
        console.log(reject)
        // console.log("pms1回调方法执行完毕")
    })

    pms1.finally(()=>{
        console.log("pms1回调方法执行完毕")
    })

</script>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20

4.2、结果

在这里插入图片描述

5、Promise.resolve

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

  1. value：成功的数据或promise对象
  2. 如果参数是一个基本数据类型，则返回成功的promise对象，promise对象的值为传入的参数
  3. 如果参数是一个promise对象，则返回的promise对象的结果，是根据参数(promise对象)的结果来判断，如果参数promise对象成，则返回的promise对象的结果也是成功，反之失败。值也为参数promise对象返回的值

说明：返回一个成功/失败的promise对象

5.1、基本数据类型

5.1.1、代码
<script>
    let pms = Promise.resolve('aaa')
    console.log(pms)
</script>

  • 1
  • 2
  • 3
  • 4
5.1.2、结果

在这里插入图片描述

5.2、promise

5.2.1、代码
<script>
    let p1 = new Promise((resolve,reject) => {
        resolve('我成功啦')
    })
    let p2 = new Promise((resolve,reject) => {
        reject('我失败了')
    })
    let pms1 = Promise.resolve(p1)
    let pms2 = Promise.resolve(p2)
    console.log(pms1)
    console.log(pms2)
</script>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
5.2.2、结果

在这里插入图片描述

6、Promise.reject

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

  1. reason：失败的原因
  2. 不管参数为基本数据类型还是promise对象，返回的promise对象始终为失败的

说明：返回一个失败的promise对象

6.1、基本数据类型与promise

6.1.1、代码
<script>
    let p2 = new Promise((resolve,reject) => {
        reject('我失败了')
    })
    let pms1 = Promise.reject('我成功啦')
    let pms2 = Promise.reject(p2)
    console.log(pms1)
    console.log(pms2)
</script>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
6.1.2、结果

在这里插入图片描述

7、Promise.all

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

  1. promises：包含n个promise的数组
  2. 返回的新的promise值为所有promise成功的值组成的数组，数组顺序与参数数组中promise的顺序一致

说明：返回一个新的promise，只有所有的promise都成功才成功，只要有一个失败了，就直接失败，返回的结果为失败的promise的结果

7.1、全部成功

7.1.1、代码
<script>
    let p1 = Promise.resolve('aaa')
    let p2 = Promise.resolve('bbb')
    let p3 = Promise.resolve('ccc')
    let pms1 = Promise.all([p1,p2,p3])
    console.log(pms1)
</script>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
7.1.2、结果

在这里插入图片描述

7.2、有一个不成功

7.2.1、代码
<script>
    let p1 = Promise.reject('aaa') // 失败
    let p2 = Promise.resolve('bbb')
    let p3 = Promise.resolve('ccc')
    let pms1 = Promise.all([p1,p2,p3])
    console.log(pms1)
</script>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
7.2.2、结果

在这里插入图片描述

8、Promise.race

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

  1. promises：包含n个promise的数组

说明：返回一个新的promise，第一个完成的promise的结果状态就是最终的结果状态

8.1、代码

<script>
    let p1 = new Promise((resolve,reject) => {
        setTimeout(()=>{
            resolve('aaa')
        })
    })
    let p2 = new Promise((resolve,reject) => {
        resolve('bbb')
    })
    let pms1 = Promise.race([p1,p2]);
    console.log(pms1)
</script>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

8.2、结果

在这里插入图片描述

Promise关键问题

1、如何改变promise的状态？

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

1.1、代码

<script>
    let p1 = new Promise((resolve,reject) => {
        resolve('aaa')
    })

    let p2 = new Promise((resolve,reject) => {
        reject('bbb')
    })

    let p3 = new Promise((resolve,reject) => {
        throw 'ccc';
    })

    console.log("p1",p1) // 成功
    console.log("p2",p2) // 失败
    console.log("p3",p3) // 失败
</script>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17

1.2、结果

在这里插入图片描述

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

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

2.1、代码

<script>
    let p1 = new Promise((resolve,reject) => {
        resolve('aaa')
    })

    p1.then((resolve) => {
        console.log('aaa1：',resolve)
    })

    p1.then((resolve) => {
        console.log('aaa2：',resolve)
    })
</script>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13

2.2、结果

在这里插入图片描述

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

  1. 都有可能，正常情况下实现指定回调再改变状态，但也可以先改变状态再指定回调
  2. 如何先改状态再指定回调？
    1. 再执行器中直接调用resolve()/reject()
    2. 延迟更长时间才调用then()
  3. 什么时候才能得到数据？
    1. 如果先指定的回调，那当状态发生改变时，回调函数就会调用，得到数据
    2. 如果先改变的状态，那当指定回调时，回调函数就会调用，得到数据

3.1、代码

<script>
    let p1 = new Promise((resolve,reject) => {
        // 1.先改变状态
        resolve('aaa')
    })

    p1.then(resolve => {
        // 2.调用回调函数
    })

// -----------------------------------------------------

    let p2 = new Promise((resolve,reject) => {
        // 2.然后改变状态
        setTimeout(() => {
            resolve('aaa')
        },1000)
    })

    // 1.先指定回调
    p2.then(resolve => {
        // 3.状态改变后回调函数调用。
    })

</script>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25

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

  1. 简单表达：由then()指定的回调函数执行的结果决定
  2. 详细表达：
    1. 如果抛出异常，新promise变为rejected,reason为抛出的异常
    2. 如果返回的是非promise的任意值，新promise变为resolved,value为返回的值
    3. 如果返回的是另一个新promise，此promise的结果就会成为新promise的结果

4.1、代码

<script>
    let p1 = new Promise((resolve,reject) => {
        // 1.先改变状态
        resolve('aaa')
    })

    // 非promise的任意值
    let pThen1 = p1.then(value => {
        return 'pThen1'
    })
    console.log("pThen1：",pThen1) // 成功

    // 抛出异常
    let pThen2 = p1.then(value => {
        throw 'pThen2'
    })
    console.log("pThen2：",pThen2) // 失败

    // 返回失败的promise
    let pThen3 = p1.then(value => {
        return new Promise((resolve,reject) => {
            reject('pThen3')
        })
    })
    console.log("pThen3：",pThen3) // 失败
</script>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26

4.2、结果

在这里插入图片描述

5、promise如何串联多个操作任务？

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

5.1、代码

<script>
    let p1 = new Promise((resolve,reject) => {
        // 1.等待1秒
        setTimeout(()=>{
            console.log('aaa')
            resolve(true)
        },1000)
    })
    p1.then(value => {
        // 2.执行回调
        return new Promise((resolve,reject) => {
            // 3.等待1秒
            setTimeout(()=>{
                console.log('bbb')
                resolve('ccc')
            },1000)
        })
    }).then(value => {
        // 4.成功的promise。执行回调
        console.log(value) // ccc
    })
</script>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22

5.2、结果

在这里插入图片描述

6、promise异常穿透？

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

6.1、代码

<script>
    let p1 = new Promise((resolve,reject) => {
        setTimeout(()=>{
            console.log('aaa')
            // 链子地方任意一处失败，只需要在链子的最后面写一个catch即可获取到
            reject(false)
        },1000)
    })
    p1.then(value => {
        return new Promise((resolve,reject) => {
            console.log('bbb')
            resolve('ccc')
        })
    }).then(value => {
        console.log(value) // ccc
    }).catch(reason => {
        // 上面的链子中，不管哪个地方失败，都会走catch方法
        console.error(reason)
    })
</script>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20

6.2、结果

在这里插入图片描述

7、中断promise链？

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

7.1、代码

<script>
    let p1 = new Promise((resolve,reject) => {
        setTimeout(()=>{
            console.log('aaa')
            resolve(true)
        },1000)
    })
    p1.then(value => {
        // 想在这里执行完后，不走下面回调
        console.log('bbb')
        return new Promise((resolve,reject) => {
            // 这个promise为pending状态
        })
    }).then(value => {
        console.log('ccc')
    }).catch(reason => {
        console.error(reason)
    })
</script>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19

7.2、结果

在这里插入图片描述

手写Promise

1、ES5 Function写法

1.1、初始化

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入手写Promise -->
    <script src="./test1.js"></script>
</head>
<body>
<script>
    let p = new Promise((resolve,reject) => {
        resolve("OK")
    })
    p.then(value => {
        console.log(value)
    },reason => {
        console.log(reason)
    })
</script>
</body>
</html>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
promise
function Promise(executor) {

    function resolve(data){

    }
    function reject(data){

    }
    executor(resolve,reject);
}

Promise.prototype.then = function(onResolve,onReject){

}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14

2、封装resolve、reject

promise
function Promise(executor) {
    // 初始状态为 pendding
	this.PromiseState = 'pendding';
    this.PromiseResult = null;
    
    let that = this;
    function resolve(data){
        // 首先改变状态 PromiseState属性
        that.PromiseState = 'fulfilled'
        // 然后给结果赋值 PromiseResult属性
        that.PromiseResult = data;
    }
    function reject(data){
        // 首先改变状态 PromiseState属性
        that.PromiseState = 'rejected'
        // 然后给结果赋值 PromiseResult属性
        that.PromiseResult = data;
    }
    executor(resolve,reject);
}

Promise.prototype.then = function(onResolve,onReject){

}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
结果

在这里插入图片描述

3、封装throw后状态结果

抛出异常后，Promise会变为失败状态，失败后的值，就是throw的内容。

只需要把 executor try catch住即可

html里js
<script>
    let p = new Promise((resolve,reject) => {
        // reject("OK")
        throw "error"
    })
    p.then(value => {
        console.log(value)
    },reason => {
        console.log(reason)
    })
    console.log(p)
</script>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
promise
function Promise(executor) {
	this.PromiseState = 'pendding';
    this.PromiseResult = null;
    
    let that = this;
    function resolve(data){
        // 首先改变状态 PromiseState属性
        that.PromiseState = 'fulfilled';
        // 然后给结果赋值 PromiseResult属性
        that.PromiseResult = data;
    }
    function reject(data){
        // 首先改变状态 PromiseState属性
        that.PromiseState = 'rejected';
        // 然后给结果赋值 PromiseResult属性
        that.PromiseResult = data;
    }
    // 抛出异常
    try {
        executor(resolve,reject);
    }catch (e) {
        // that.PromiseState = 'rejected';
        // that.PromiseResult = e;
        reject(e)
    }
}

Promise.prototype.then = function(onResolve,onReject){

}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
结果

在这里插入图片描述

4、promise状态只能修改一次

想要状态修改一次，我们只需要在修改状态前进行判断即可

html里js
<script>
    let p = new Promise((resolve,reject) => {
        resolve("ok") // 只走这一次
        reject("error")
    })
    p.then(value => {
        console.log(value)
    },reason => {
        console.log(reason)
    })
    console.log(p)
</script>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
promise
function Promise(executor) {
    this.PromiseState = 'pendding';
    this.PromiseResult = null;
    let that = this;
    function resolve(data){
        if (that.PromiseState === 'pendding'){
            // 判断状态是否改变
            // 首先改变状态 PromiseState属性
            that.PromiseState = 'fulfilled';
            // 然后给结果赋值 PromiseResult属性
            that.PromiseResult = data;
        }
        
    }
    function reject(data){
        if (that.PromiseState === 'pendding') {
            // 首先改变状态 PromiseState属性
            that.PromiseState = 'rejected';
            // 然后给结果赋值 PromiseResult属性
            that.PromiseResult = data;
        }
    }
    // 抛出异常
    try {
        executor(resolve,reject);
    }catch (e) {
        reject(e)
    }
}

Promise.prototype.then = function(onResolve,onReject){

}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
结果

在这里插入图片描述

5、then方法执行回调

执行回调，判断promise状态，执行相应的回调函数

promise
function Promise(executor) {
    this.PromiseState = 'pendding';
    this.PromiseResult = null;
    let that = this;
    function resolve(data){
        if (that.PromiseState === 'pendding'){
            // 判断状态是否改变
            // 首先改变状态 PromiseState属性
            that.PromiseState = 'fulfilled';
            // 然后给结果赋值 PromiseResult属性
            that.PromiseResult = data;
        }

    }
    function reject(data){
        if (that.PromiseState === 'pendding') {
            // 首先改变状态 PromiseState属性
            that.PromiseState = 'rejected';
            // 然后给结果赋值 PromiseResult属性
            that.PromiseResult = data;
        }
    }
    // 抛出异常
    try {
        executor(resolve,reject);
    }catch (e) {
        reject(e)
    }
}

Promise.prototype.then = function(onResolve,onReject){
    // 由于是p(promise)调用then方法，所以我们可以使用this
    if(this.PromiseState === 'fulfilled'){
        onResolve(this.PromiseResult)
    }else if(this.PromiseState === 'rejected'){
        onReject(this.PromiseResult)
    }
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
结果

在这里插入图片描述

6、异步任务回调执行

1.then回调函数异步

此时我们把引入的js文件注释掉，可以发现，then方法是异步任务，先打印的P，然后再执行then方法里的函数。我们这个是先执行then方法里的函数，然后才打印的p，在then方法里调用回调函数外面包一层setTimeout即可

2.executor函数异步

当executor函数为异步函数时，then回调函数要等executor执行完毕后，再执行。所以我们要在executor执行完毕后再调用then方法

html里js
<script>
    let p = new Promise((resolve,reject) => {
        setTimeout(() => {
            resolve("ok")
        },1000)
    })
    p.then(value => {
        console.log(value)
    },reason => {
        console.log(reason)
    })
    console.log("p",p)
</script>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
promise
function Promise(executor) {
    this.PromiseState = 'pendding';
    this.PromiseResult = null;
    this.callBack = {};

    let that = this;
    function resolve(data){
        if (that.PromiseState === 'pendding'){
            // 判断状态是否改变
            // 首先改变状态 PromiseState属性
            that.PromiseState = 'fulfilled';
            // 然后给结果赋值 PromiseResult属性
            that.PromiseResult = data;

            // 执行完毕后，调用then方法
            if(that.callBack.res){
                that.callBack.res(data)
            }
        }

    }
    function reject(data){
        if (that.PromiseState === 'pendding') {
            // 首先改变状态 PromiseState属性
            that.PromiseState = 'rejected';
            // 然后给结果赋值 PromiseResult属性
            that.PromiseResult = data;

            // 执行完毕后，调用then方法
            if(that.callBack.rej){
                that.callBack.rej(data)
            }
        }
    }
    // 抛出异常
    try {
        executor(resolve,reject);
    }catch (e) {
        reject(e)
    }
}

Promise.prototype.then = function(onResolve,onReject){
    setTimeout(() => {
        // 由于是p(promise)调用then方法，所以我们可以使用this
        if(this.PromiseState === 'fulfilled'){
            onResolve(this.PromiseResult);
        }else if(this.PromiseState === 'rejected'){
            onReject(this.PromiseResult);
        }else if(this.PromiseState === 'pendding'){
            // 需要先把方法保存起来，才能在上面调用
            this.callBack.res = onResolve;
            this.callBack.rej = onReject;
        }
    })
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
结果

在这里插入图片描述

7、指定多个回调函数

当我们按照上面的代码写的时候，这时候当我们执行两个then方法，这时候只会走最后一个方法，因为最后一个方法在then方法里，把上面的方法替换掉了，所以只会走最后一个，这时候我们要把callBack变为数组，遍历以此执行

html里js
<script>
    let p = new Promise((resolve,reject) => {
        setTimeout(() => {
            resolve("ok")
        },1000)
    })
    p.then(value => {
        console.log('111')
    },reason => {
        console.log(reason)
    })

    p.then(value => {
        console.log('222')
    },reason => {
        console.log(reason)
    })
    console.log("p",p)
</script>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
promise
function Promise(executor) {
    this.PromiseState = 'pendding';
    this.PromiseResult = null;
    this.callBack = [];

    let that = this;
    function resolve(data){
        if (that.PromiseState === 'pendding'){
            // 判断状态是否改变
            // 首先改变状态 PromiseState属性
            that.PromiseState = 'fulfilled';
            // 然后给结果赋值 PromiseResult属性
            that.PromiseResult = data;

            // 执行完毕后，调用then方法
            that.callBack.forEach(item => {
                item.res(data);
            })
        }

    }
    function reject(data){
        if (that.PromiseState === 'pendding') {
            // 首先改变状态 PromiseState属性
            that.PromiseState = 'rejected';
            // 然后给结果赋值 PromiseResult属性
            that.PromiseResult = data;

            // 执行完毕后，调用then方法
            that.callBack.forEach(item => {
                item.rej(data);
            })
        }
    }
    // 抛出异常
    try {
        executor(resolve,reject);
    }catch (e) {
        reject(e)
    }
}

Promise.prototype.then = function(onResolve,onReject){
    setTimeout(() => {
        // 由于是p(promise)调用then方法，所以我们可以使用this
        if(this.PromiseState === 'fulfilled'){
            onResolve(this.PromiseResult);
        }else if(this.PromiseState === 'rejected'){
            onReject(this.PromiseResult);
        }else if(this.PromiseState === 'pendding'){
            // 需要先把方法保存起来，才能在上面调用
            this.callBack.push({
                res:onResolve,
                rej:onReject
            })
        }
    })
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
结果

在这里插入图片描述

8、同步修改状态then方法的返回结果

then方法要返回一个promise对象，

  • 如果返回值为promise外其他类型，则为成功的promise，值为返回的值

  • 如果返回值为promise类型，则根据这个promise的返回结果来改变返回值的返回结果

html里js
<script>
    let p = new Promise((resolve,reject) => {
        // setTimeout(() => {
            resolve("ok")
        // },1000)
    })
    let then1 = p.then(value => {
        console.log('111')
        // 返回的是undefined
    },reason => {
        console.log(reason)
    })

    let then2 = p.then(value => {
        return new Promise((resolve,reject) => {
            resolve('OOKK')
        })
    },reason => {
        console.log(reason)
    })
    console.log("then1",then1)
    console.log("then2",then2)
</script>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
promise then方法
Promise.prototype.then = function(onResolve,onReject){
	return new Promise((resolve,reject) => {
        setTimeout(() => {
            // 由于是p(promise)调用then方法，所以我们可以使用this
            if(this.PromiseState === 'fulfilled'){
                const resout = onResolve(this.PromiseResult);
                if (resout instanceof Promise){
                    resout.then(value => {
                        resolve(value);
                    },reason => {
                        reject(reason);
                    })
                }else {
                    resolve(resout);
                }
            }else if(this.PromiseState === 'rejected'){
                const resout = onReject(this.PromiseResult);
                if (resout instanceof Promise){
                    resout.then(value => {
                        resolve(value);
                    },reason => {
                        reject(reason);
                    })
                }else {
                    resolve(resout);
                }
            }else if(this.PromiseState === 'pendding'){
                // 需要先把方法保存起来，才能在上面调用
                this.callBack.push({
                    res:onResolve,
                    rej:onReject
                })
            }
        })
    })
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
结果

在这里插入图片描述

9、异步修改状态then方法的返回结果

由于executor执行完毕后只会执行回调，并不会执行回调中promise中的resolve和reject方法，导致then方法返回的promise始终为pendding状态

并且我们要判断then里面throw抛出异常后promise的状态

html里js
<script>
    let p = new Promise((resolve,reject) => {
        setTimeout(() => {
            resolve("ok")
        },1000)
    })
    let then1 = p.then(value => {
        console.log(value)
        // 返回的是undefined
    },reason => {
        console.log(reason)
    })

    let then2 = p.then(value => {
        return 'OOKK'
    },reason => {
        console.log(reason)
    })

    let then3 = p.then(value => {
        throw 'error'
    },reason => {
        console.log(reason)
    })

    console.log(then1)
    console.log(then2)
    console.log(then3)
</script>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
promise then方法
Promise.prototype.then = function(onResolve,onReject){
	return new Promise((resolve,reject) => {
        setTimeout(() => {
            // 由于是p(promise)调用then方法，所以我们可以使用this
            if(this.PromiseState === 'fulfilled'){
                try {
                    const result = onResolve(this.PromiseResult);
                    if (result instanceof Promise){
                        result.then(value => {
                            resolve(value);
                        },reason => {
                            reject(reason);
                        })
                    }else {
                        resolve(result);
                    }
                }catch (e) {
                    reject(e);
                }

            }else if(this.PromiseState === 'rejected'){
                try {
                    const result = onReject(this.PromiseResult);
                    if (result instanceof Promise){
                        result.then(value => {
                            resolve(value);
                        },reason => {
                            reject(reason);
                        })
                    }else {
                        resolve(result);
                    }
                }catch (e) {
                    reject(e)
                }

            }else if(this.PromiseState === 'pendding'){
                // 需要先把方法保存起来，才能在上面调用
                this.callBack.push({
                    res: () => {
                        try {
                            // 获取then回调的返回值
                            let result = onResolve(this.PromiseResult)
                            if (result instanceof Promise){
                                result.then(value => {
                                    resolve(value);
                                },reason => {
                                    reject(reason);
                                })
                            }else {
                                resolve(result);
                            }
                        }catch (e) {
                            reject(e)
                        }

                    },
                    rej: () => {
                        try {
                            let result = onReject(this.PromiseResult)
                            if (result instanceof Promise){
                                result.then(value => {
                                    resolve(value);
                                },reason => {
                                    reject(reason);
                                })
                            }else {
                                resolve(result);
                            }
                        }catch (e) {
                            reject(e);
                        }

                    },
                })
            }
        })
    })
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
结果

在这里插入图片描述

10、then方法优化和完善

then方法里很多代码是重复代码，我们需要单独提取出来

promise
Promise.prototype.then = function(onResolve,onReject){
    return new Promise((resolve,reject) => {
        setTimeout(() => {
            // 封装函数
            const handleThen = (type) => {
                try {
                    const result = type(this.PromiseResult);
                    if (result instanceof Promise){
                        result.then(value => {
                            resolve(value);
                        },reason => {
                            reject(reason);
                        })
                    }else {
                        resolve(result);
                    }
                }catch (e) {
                    reject(e);
                }
            }
            // 由于是p(promise)调用then方法，所以我们可以使用this
            if(this.PromiseState === 'fulfilled'){
                handleThen(onResolve);
            }else if(this.PromiseState === 'rejected'){
                handleThen(onReject);
            }else if(this.PromiseState === 'pendding'){
                // 需要先把方法保存起来，才能在上面调用
                this.callBack.push({
                    res: () => {
                        handleThen(onResolve);
                    },
                    rej: () => {
                        handleThen(onReject);
                    },
                })
            }
        })
    })
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
结果

在这里插入图片描述

11、封装catch方法

html里js

<script>
    let p = new Promise((resolve,reject) => {
        setTimeout(() => {
            reject("error")
        },1000)
    })
    p.catch(e => {
        console.log(e)
    })

    console.log(p)
</script>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

promise catch方法

Promise.prototype.catch = function (onReject){
    return this.then(undefined,onReject);
}

  • 1
  • 2
  • 3

11、异常穿透与值传递

  1. 如果promise途中失败了，在then里面只写成功的回调方法，不写失败的，那么控制台就会报错，找不到onReject方法，我们要判断如果没有方法，就默认加一个
  2. 当我第一个then什么回调都没有写的时候，值会传递到第二个then中，并且顺利执行
html里js
<script>
    let p = new Promise((resolve,reject) => {
        setTimeout(() => {
            resolve("error")
        },1000)
    })
    p.then().then(value => {
        console.log(value + '1')
    }).then(value => {
        console.log(value + '2')
    }).catch(reason => {
        console.log(reason + '3')
    })

</script>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
promise then方法
Promise.prototype.then = function(onResolve,onReject){
    return new Promise((resolve,reject) => {
        // 处理失败回调没有的情况
        if (typeof onReject !== "function"){
            // 往上抛，直到抛到catch
            onReject = reason => {
                throw reason
            };
        }
        // 处理成功回调没有的情况
        if(typeof onResolve !== "function"){
            onResolve = value => {
                return value
            }
        }
        setTimeout(() => {
            // 封装函数
            const handleThen = (type) => {
                try {
                    const result = type(this.PromiseResult);
                    if (result instanceof Promise){
                        result.then(value => {
                            resolve(value);
                        },reason => {
                            reject(reason);
                        })
                    }else {
                        resolve(result);
                    }
                }catch (e) {
                    reject(e);
                }
            }
            // 由于是p(promise)调用then方法，所以我们可以使用this
            if(this.PromiseState === 'fulfilled'){
                handleThen(onResolve);
            }else if(this.PromiseState === 'rejected'){
                handleThen(onReject);
            }else if(this.PromiseState === 'pendding'){
                // 需要先把方法保存起来，才能在上面调用
                this.callBack.push({
                    res: () => {
                        handleThen(onResolve);
                    },
                    rej: () => {
                        handleThen(onReject);
                    },
                })
            }
        })
    })
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
结果

在这里插入图片描述

12、resolve静态方法封装

html里js
<script>
    let p1 = Promise.resolve('111')
    let p2 = Promise.resolve(new Promise((resolve,reject) => {resolve('OK')}))
    let p3 = Promise.resolve(new Promise((resolve,reject) => {reject('ERROR')}))
    let p4 = Promise.resolve(new Promise((resolve,reject) => {throw 'error'}))

    console.log("p1",p1)
    console.log("p2",p2)
    console.log("p3",p3)
    console.log("p4",p4)
</script>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
promise resolve静态方法
Promise.resolve = function (data){
    return new Promise((onResolve,onReject) => {
        if (data instanceof Promise){
            data.then(resolve => {
                onResolve(resolve)
            },reject => {
                onReject(reject)
            })
        }else {
            onResolve(data)
        }
    })
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
结果

在这里插入图片描述

13、reject静态方法封装

html里js
<script>
    let p1 = Promise.reject('111')
    let p2 = Promise.reject(new Promise((resolve,reject) => {resolve('OK')}))
    let p3 = Promise.reject(new Promise((resolve,reject) => {reject('ERROR')}))
    let p4 = Promise.reject(new Promise((resolve,reject) => {throw 'error'}))

    console.log("p1",p1)
    console.log("p2",p2)
    console.log("p3",p3)
    console.log("p4",p4)
</script>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
promise reject静态方法
Promise.reject = function (data){
    return new Promise((resolve,reject) => {
        reject(data)
    })
}

  • 1
  • 2
  • 3
  • 4
  • 5
结果

在这里插入图片描述

14、all静态方法封装

html里js
<script>
    let p1 = Promise.resolve('111')
    let p2 = new Promise((resolve,reject) => {
        resolve('OK2')
    })
    let p3 = new Promise((resolve,reject) => {
        // reject('Error3')
        resolve('OK3')
    })
    let all = Promise.all([p1,p2,p3,'aaa']);
    console.log(all)

</script>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
promise all静态方法
Promise.all = function (datas){
    return new Promise((onResolve,onReject) => {
        let resouts = []
        let count = 0;
        for (let i = 0; i < datas.length; i++) {
            const data = datas[i];
            debugger
            if(data instanceof Promise){
                data.then(resolve => {
                    resouts[i] = resolve;
                    count++;
                    if(count === datas.length){
                        onResolve(resouts)
                    }
                },reject => {
                    onReject(reject)
                })
            }else {
                resouts[i] = data
                count++;
                if(count === datas.length){
                    onResolve(resouts)
                }
            }

        }
    })
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
结果
全部成功

在这里插入图片描述

一个失败

在这里插入图片描述

15、race静态方法封装

html里js
<script>
    let p1 = new Promise((resolve,reject) => {
        setTimeout(() => {
            resolve('OK1')
        })
    })
    let p2 = new Promise((resolve,reject) => {
        resolve('OK2')
    })
    let all = Promise.race([p1,p2,'aaa']);
    console.log(all)

</script>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
promise race静态方法
Promise.race = function (datas){
    return new Promise((onResolve,onReject) => {
        for (let i = 0; i < datas.length; i++) {
            let data = datas[i];
            if(data instanceof Promise){
                data.then(value => {
                    onResolve(value)
                },reason => {
                    onReject(reason)
                })
            }else {
                // 弥补then方法的异步时间
                setTimeout(() => {
                    onResolve(data);
                })
            }
        }
    })
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
结果

在这里插入图片描述

2、ES6 Class写法

注意：静态方法前面要添加static关键字!!!

class Promise {
    constructor(executor) {
        this.PromiseState = 'pendding';
        this.PromiseResult = null;
        this.callBack = [];
        let that = this;
        function resolve(data){
            if (that.PromiseState === 'pendding'){
                // 判断状态是否改变
                // 首先改变状态 PromiseState属性
                that.PromiseState = 'fulfilled';
                // 然后给结果赋值 PromiseResult属性
                that.PromiseResult = data;

                // 执行完毕后，调用then方法
                that.callBack.forEach(item => {
                    item.res(data);
                })
            }

        }
        function reject(data){
            if (that.PromiseState === 'pendding') {
                // 首先改变状态 PromiseState属性
                that.PromiseState = 'rejected';
                // 然后给结果赋值 PromiseResult属性
                that.PromiseResult = data;

                // 执行完毕后，调用then方法
                that.callBack.forEach(item => {
                    item.rej(data);
                })
            }
        }
        // 抛出异常
        try {
            executor(resolve,reject);
        }catch (e) {
            reject(e)
        }
    }

    then(onResolve,onReject) {
        return new Promise((resolve, reject) => {
            // 处理失败回调没有的情况
            if (typeof onReject !== "function") {
                // 往上抛，直到抛到catch
                onReject = reason => {
                    throw reason
                };
            }
            // 处理成功回调没有的情况
            if (typeof onResolve !== "function") {
                onResolve = value => {
                    return value
                }
            }
            setTimeout(() => {
                // 封装函数
                const handleThen = (type) => {
                    try {
                        const result = type(this.PromiseResult);
                        if (result instanceof Promise) {
                            result.then(value => {
                                resolve(value);
                            }, reason => {
                                reject(reason);
                            })
                        } else {
                            resolve(result);
                        }
                    } catch (e) {
                        reject(e);
                    }
                }
                // 由于是p(promise)调用then方法，所以我们可以使用this
                if (this.PromiseState === 'fulfilled') {
                    handleThen(onResolve);
                } else if (this.PromiseState === 'rejected') {
                    handleThen(onReject);
                } else if (this.PromiseState === 'pendding') {
                    // 需要先把方法保存起来，才能在上面调用
                    this.callBack.push({
                        res: () => {
                            handleThen(onResolve);
                        },
                        rej: () => {
                            handleThen(onReject);
                        },
                    })
                }
            })
        })
    }

    catch(onReject){
        return this.then(undefined,onReject);
    }

    static resolve(data){
        return new Promise((onResolve,onReject) => {
            if (data instanceof Promise){
                data.then(resolve => {
                    onResolve(resolve)
                },reject => {
                    onReject(reject)
                })
            }else {
                onResolve(data)
            }
        })
    }

    static reject(data){
        return new Promise((resolve,reject) => {
            reject(data)
        })
    }

    static all(datas){
        return new Promise((onResolve,onReject) => {
            let resouts = []
            let count = 0;
            for (let i = 0; i < datas.length; i++) {
                const data = datas[i];
                debugger
                if(data instanceof Promise){
                    data.then(resolve => {
                        resouts[i] = resolve;
                        count++;
                        if(count === datas.length){
                            onResolve(resouts)
                        }
                    },reject => {
                        onReject(reject)
                    })
                }else {
                    resouts[i] = data
                    count++;
                    if(count === datas.length){
                        onResolve(resouts)
                    }
                }

            }
        })
    }

    static race(datas){
        return new Promise((onResolve,onReject) => {
            for (let i = 0; i < datas.length; i++) {
                let data = datas[i];
                if(data instanceof Promise){
                    data.then(value => {
                        onResolve(value)
                    },reason => {
                        onReject(reason)
                    })
                }else {
                    // 弥补then方法的异步时间
                    setTimeout(() => {
                        onResolve(data);
                    })
                }
            }
        })
    }
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111
  • 112
  • 113
  • 114
  • 115
  • 116
  • 117
  • 118
  • 119
  • 120
  • 121
  • 122
  • 123
  • 124
  • 125
  • 126
  • 127
  • 128
  • 129
  • 130
  • 131
  • 132
  • 133
  • 134
  • 135
  • 136
  • 137
  • 138
  • 139
  • 140
  • 141
  • 142
  • 143
  • 144
  • 145
  • 146
  • 147
  • 148
  • 149
  • 150
  • 151
  • 152
  • 153
  • 154
  • 155
  • 156
  • 157
  • 158
  • 159
  • 160
  • 161
  • 162
  • 163
  • 164
  • 165
  • 166
  • 167
  • 168

async与await

async

  1. 函数的返回值为promise对象

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

    <script>
    async function test1(){
        return 'aaa'
    }

    async function test2(){
        return new Promise((resolve,reject) => {
            resolve("我成功啦")
        })
    }

    console.log("test1",test1())
    console.log("test2",test2())
</script>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14

    在这里插入图片描述

await

  1. await右侧的表达式一般为promise对象，但也可以是其它的值

  2. 如果表达式是promise对象，await返回的结果时promise成功的值

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

    <script>
    async function test1(){
        let a = await 'aaa';
        console.log("a",a);
        let b = await Promise.resolve('bbb')
        console.log("b",b)
    }

    test1()
</script>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10

    在这里插入图片描述

注意

  1. await必须卸载async函数中，但async函数中可以没有await

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

    <script>
    /*function test1(){ 报错
        await 'aaa';
    }*/

    async function test1(){
        let a = '';
        try {
            // 失败
            p = new Promise((resolve,reject) => {
                reject('我失败了')
            })
            // 抛出异常
            a = await p;
        }catch (e){
            a = '我真的失败了'
        }
        console.log(a)
    }

    test1()
</script>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22

    在这里插入图片描述

OK，Promise课程到此结束，欢迎下期再见~Bye

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/黑客灵魂/article/detail/876497
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号