Promise的知识点

柔光的暖阳◎ 2022-10-08 14:20 144阅读 0赞

# Promise三种状态 #

首先, 当我们开发中有异步操作时, 就可以给异步操作包装一个Promise 异步操作之后会有三种状态 我们一起来看一下这三种状态:

pending：等待状态，比如正在进行网络请求，或者定时器没有到时间。

fulfill：满足状态，当我们主动回调了resolve时，就处于该状态，并且会回调.then()

reject：拒绝状态，当我们主动回调了reject时，就处于该状态，并且会回调.catch()

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTEyMDA1NjI_size_16_color_FFFFFF_t_70][]

除了用then和catch,还可以在then()中传两个参数，分别为**成功**的回调和**失败**的回调

失败的回调error可以省略

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTEyMDA1NjI_size_16_color_FFFFFF_t_70 1][]

# Promise链式调用 #

// 链式调用一
    new Promise((resolve, reject) => {
        setTimeout(function () {
            resolve('Hello')
        }, 1000)
    }).then(res => {
        return new Promise((resolve, reject) => {
            resolve(res + 111)
        })
    }).then(res => {
        return new Promise((resolve, reject) => {
            resolve(res + 222)
        })
    }).then(res => {
        console.log(res);
    })
    
    
    // 链式调用二，简写
    new Promise((resolve, reject) => {
        setTimeout(function () {
            resolve('Hello')
        }, 1000)
    }).then(res => {
        return Promise.resolve(res + 111)
    }).then(res => {
        return  Promise.resolve(res + 222)
    }).then(res => {
        return  Promise.reject(res + 333)
        //  throw 'error message'  //throw和reject都可以抛出错误
    }).then(res => {
        return  Promise.resolve(res + 444)
    }).catch(err=>{
        return  Promise.resolve(err + 5555)
    }).then(res=>{
        console.log(res);
    })
    
    
    // 链式调用三，简写
    new Promise((resolve, reject) => {
        setTimeout(function () {
            resolve('Hello')
        }, 1000)
    }).then(res => {
        return res + 111
    }).then(res => {
        return  res + 222  //相当于return  Promise.resolve(res + 222)
    }).then(res => {
        return  Promise.reject(res + 333)
        // throw 'error message'
    }).then(res => {
        return res + 444
    }).catch(err=>{
        return  err + 5555
    }).then(res=>{
        console.log(res);
    })

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTEyMDA1NjI_size_16_color_FFFFFF_t_70]: /images/20221005/5bfbdab29b8e418eab1c27409f4f9789.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTEyMDA1NjI_size_16_color_FFFFFF_t_70 1]: /images/20221005/c065b2b919294b3f833084a413d97d59.png