es6基础0x023:Promise

followWinter

0x000 概述

Promise是一个异步编程的解决方案,他经常和ajax一起出现,导致很多人以为Promise是一种新的网络请求技术,其实不然。Promise是一种思考方式、编程方式。

0x000 栗子

先写一个栗子

setTimeout(()=>{
    console.log('here')
},3000)

很简单,3s之后将会打印出here,现在换成Promise

new Promise((resolve, reject)=>{
    setTimeout(()=>{
        resolve()
    }, 3000)
}).then(()=>{
    console.log('here')
})

执行结果也是一样,3s之后将会输出here,还可以这么写

let proxy=new Promise((resolve, reject)=>{
    setTimeout(()=>{
        resolve()
    }, 3000)
})

setTimeout(()=>{
    proxy.then(()=>{
        console.log('here')
    })
}, 10000)

13s后才输出here

0x002 初始化

  • 语法

    new Promise(executor)
    • 参数:

      • executor:处理器函数,函数的完整签名是(resolve, reject)=>{}
    • 返回值:一个Promise实例
  • 栗子

    let promise=new Promise((resolve, reject)=>{
        setTimeout(()=>{
            resolve()
        }, 3000)
    })
    console.log(promise) // Promise {<pending>}
  • 说明:
    使用new Promise实例化一个Promise之后,将它输出出来,可以看到他有一个pending,这是说明这个promise的状态,称为PromiseStatuspromise一共有3种状态,一个promise必定处于下面三个状态之一:

    • pending:初始状态
    • fulfilled:操作成功
    • rejected:操作失败

0x003 then

  • 语法:

    promise.then(onFulfilled, onRejected)
    • onFulfilled:操作成功的回调
    • onRejected:操作失败的回调
  • 栗子1:

    let promise=new Promise((resolve, reject)=>{
        setTimeout(()=>{
            resolve()
        }, 3000)
    })
    console.log(promise) // Promise {<pending>}
    promise.then(()=>{
        console.log(promise) // Promise {<resolved>: undefined}
    })
  • 说明1:
    当调用resolve之后,then函数执行了,同时promisePromiseStatus变成了resolvedonFulfilled同时接受一个变量,称之为PromiseValue

    let promise=new Promise((resolve, reject)=>{
        setTimeout(()=>{
            resolve(1)
        }, 3000)
    })
    promise.then((value)=>{
        console.log(value) // 1
    })
  • 栗子2:

    let promise=new Promise((resolve, reject)=>{
        setTimeout(()=>{
            reject()
        }, 3000)
    })
    console.log(promise) // Promise {<pending>}
    promise.then(()=>{},()=>{
        console.log(promise) // Promise {<rejected>: undefined}
    })

    当调用reject之后,then执行了,此时promisePromiseStatus变成了rejected,同时,onRejected回调接受一个reason,作为操作失败的原因说明:

    let promise=new Promise((resolve, reject)=>{
        setTimeout(()=>{
            reject('nothing')
        }, 3000)
    })
    promise.then(()=>{},(reason)=>{
        console.log(reason) // nothing
    })

0x004 catch

  • 语法:

    promise.catch(onRejected)
    • onRejected:回调
  • 栗子:

    let promise=new Promise((resolve, reject)=>{
        setTimeout(()=>{
            resolve()
        }, 3000)
    }).then(()=>{
        throw 'error'
    }).catch((e)=>{
        console.log(`i catch you: ${e}`) // i catch you error 
    })
  • 注意1:在异中的错误不会执行catch

    let promise=new Promise((resolve, reject)=>{
        setTimeout(()=>{
            throw 'error'
        }, 3000)
    }).catch((e)=>{
        console.log(`i catch you: ${e}`) // Uncaught error 
    })
  • 注意2:resolve之后会被忽略

     let promise=new Promise((resolve, reject)=>{
        resolve()
        throw 'error'
    }).catch((e)=>{
        console.log(`i catch you: ${e}`)  // 不会输出
    }) 
    

0x005 finally

  • 语法:

    p.finally(onFinally)
    • onFainally:回调
  • 栗子:

    let promise=new Promise((resolve, reject)=>{
        setTimeout(()=>{
            resolve()
        }, 3000)
    }).then(()=>{
        console.log('resolve')
        throw 'error'
    }).catch((e)=>{
        console.log(`i catch you: ${e}`)
    }).finally(()=>{
        console.log('finally')
    })
    // resolve
    // i catch you error
    // finally
阅读 438

漫漫填坑路,十里长安响码声。
哎,好像不能申请多个专栏呢,原本这个专栏只放前端文章,现在看来不行了!就都放吧!

暂时没有

1.5k 声望
54 粉丝
0 条评论

暂时没有

1.5k 声望
54 粉丝
宣传栏