一篇搞定 Promise

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

上面代码分析如下

链式调用之传参

相关推荐