一篇搞定 Promise

2021-09-23 21:29:52 阅读：141 来源： 互联网

标签：搞定 resolve console 一篇 const promise Promise log

promise ：译为 “承诺" ，是ES6提出的一个新语法，用来优化异步代码的写法

1. Promise 构造器

        // 构造器 
        // 1.必须给一个参数
        // 2.参数必须是一个函数,这个函数必须传两个形参(resolve,reject),这两个形参也是一个函数
        // 3.函数体内部一般执行异步代码,根据情况调用resolve()或者reject()

        const promise = new Promise((resolve,reject)=>{

        })
        console.log(promise);  //promise 对象

2. promise 的三种状态和值

一个Promise对象有三种状态 : pending , resolved , rejected

pending : 初始态 , (可以理解成只口头作出承诺,还没开始实现)

resolved : 成功态, (可以理解成承诺的给实现了) 调用resolve() 状态从pending => resolved

rejected : 失败态 , (可以理解成承诺没有按时兑现) , 会抛出一个错误出来调用reject() 状态从pending => rejected

Promise 的值 : 就是调用resolve 传的值

3 . Promise(承诺)兑现

假设在七夕你要求婚你的女盆友,你曾给了她一个承诺(new Promise((resolve,reject)=>{})),要拿着十克拉的钻戒向她求婚,你的承诺实现了你女盆友就答应了你的求婚,你求婚成功了(resolve()),你就带这你女盆友就走人(then(res=>{})),失败了,你就原地拉着你妈哭泣(catch(err=>{}),但无论你成功还是失败,你妈妈都爱你[finally(()=>{})]

//promise 的经典格式

//给出承诺
const promise = new Promise((resolve,reject)=>{
        //这里执行异步代码
        resolve()

})
console.log(promise);  //promise 对象

//兑现承诺
promise.then(res => {
    // 执行时机 : 承诺的状态从 pending -> resolved 时执行
    // res 是当时承诺的值 (即resolve调用时传的值)
}).catch(err => {

    //执行时机 : 承诺态 从 pending -> rejected时执行
    //err 是当时承诺的值 (即reject调用时传的值)
}).finally(()=>{
    
    //无论成功还是失败都会执行的函数
})

4 . 使用 promise 改造异步代码

基本套路:

第一步 : 建立模板 . 固定的套路 : 写一个空函数 ,在函数体中创建一个Promise对象 ,并返回这个promise 对象

第二步 : 将异步代码写进构造器中,根据实际情况决定是否调用resolve,reject
第三步 : 通过 函数名().then().catch()调用函数

面试题： 是让sleep的功能与setTimeout一样:就是等2000毫秒之后再执行后续操作

<script>

    function sleep(time) {
        //这里写异步代码
        const p = new Promise((resolve,reject)=>{
            setTimeout(()=>{
                resolve()
            },time)
        })

        return p

    }

    sleep(2000).then(()=>{
        console.log('do.........');
    })
    console.log(2);
</script>

5 . then 的使用

then 作用为Promise对象添加状态改变时的回调函数

then 的格式：then接收两个参数，每个参数都是一个函数，第二个参数是可选的

//第一个参数 是 resolved 状态的回调函数 ,当promise对象的状态从pending->resolved,函数1执行
//第二个参数 是 rejected 状态的回调函数 ,当promise对象的状态从pending->rejected,函数2执行
promise.then(函数1,[函数2])

6. then的执行逻辑

7. then的返回值(难点)

then()方法的返回值也是一个promise对象,所以它支持链式写法
特别注意:

then返回的promise对象是一个全新的promise对象,与调用then方法的并不是同一个对象

 // 下面的代码 p1 和 p2 都是一个promise对象,但不是同一个,换句话说then()会封装一个全新的promise对象
    const p1 = new Promise(()=>{})
    const p2 = p1.then(res=>{},err=>{})
    console.log(p1);
    console.log(p2);
    console.log(p1===p2);

// then 返回值 状态 练习题1
    // const p1 = new Promise(()=>{})
    // const p2 = p1.then((res)=>{},err=>{})
    // console.dir(p1) //pending
    // console.dir(p2) //pending

    // 例题2
    // const p1 = new Promise((resolve,reject)=>{resolve()})
    // const p2 = p1.then((res)=>{
    //     return 1
    // },err=>{})
    // console.dir(p1) //状态resolved  值是undefined
    // console.dir(p2) //状态resolved  值是1

    // 例题3
    const p1 = new Promise((resolve,reject)=>{resolve()})
    const p2 = p1.then((res)=>{
        const temp = new Promise((resolve,reject)=>{
            resolve({a:1,b:2})
        })
        return temp
    },err=>{})
    
    console.dir(p2) //状态由里面的promise对象定 - resolved  值是{a:1,b:2}

8 . catch()的格式和用法

单独使用没有什么意义,一般与then一块使用

catch的返回值也是一个promise对象

9 . promise 的链式调用

<script>
//案例1

    function do1() {
        console.log('任务1');
    }
    function do2() {
        console.log('任务2');
    }
    function do3() {
        console.log('任务3');
    }
    function do4() {
        console.log('任务4');
    }
    const p = new Promise((resolve,reject)=>{
        resolve()
    })
    p.then(do1).then(do2).then(do3).then(do4)
    // 任务1  任务2 任务3 任务4
</script>

上面代码分析

function do1() {
        console.log('任务1');
    }
    function do2() {
        console.log('任务2');
    }
    function do3() {
        console.log('任务3');
    }
    function do4() {
        console.log('任务4');
    }
    const p = new Promise((resolve,reject)=>{
        resolve()
    })
    p.then(do1).then(do2).catch(do3).then(do4) 
// 任务1 任务2 任务5

上面代码分析如下

链式调用之传参

标签：搞定,resolve,console,一篇,const,promise,Promise,log
来源： https://blog.csdn.net/m0_59659506/article/details/120422621

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

一篇搞定 Promise