promise学习笔记

117 阅读4分钟

1、promise有三种状态,等待(pending)、成功(fulfilled)、拒绝(rejected)。一开始的promise是等待状态的,当调用了相关的回调函数后来决定该promise的最终状态。promise的状态发生改变后是不可逆的。

 new Promise((res,rej) => {
      res('成功');
      rej('失败');//这个不生效,因为这个promise已经是成功状态的了    
}).then(res => {
      console.log("成功状态 => " + res);
    },rej  => {
      console.log('失败状态 => ' + rej);
    })

2、在promise中.then()方法可以接受两个参数,第一个是处理成功状态的回调函数,第二个是处理拒绝状态的回调函数。promise中.then()方法返回的也是一个promise,.then()方法如果没有指定返回状态,则默认返回成功状态。如下例所示,即使第一个promise是调用的是rej(拒绝状态),但在p1.then中,因为不管是处理成功状态的回调函数,还是处理拒绝状态的回调函数都没有指定返回状态,所以默认返回成功状态。即p2.then中的成功状态输出。

    const p1 = new Promise((res,rej) => {
        res('resolve');//不管是res还是rej  p2.then都会输出成功
    });
    const p2 = p1.then(res => {
       //默认返回成功状态
    },rej => {
       //默认返回成功状态
    });
    p2.then(res => {
        console.log('成功'); //会输出成功,默认返回
    },rej => {
        console.log('失败');
    })

3、在promise中用catch可以更方便的捕获到promise发生的错误。在promise的then()方法中要捕获到promise的错误,可以在then方法中指定回调函数来捕获错误,但是如果一个promise内有多个promise的调用则造成代码结构不清晰。在promise的最后调用catch方法捕获的promise内所有发生的错误,可以让代码结构更清晰。

//用一般的方式捕获promise中的错误
  new Promise((res,rej) => {
        res();
    }).then(res => {
        return new Promise((res,rej) => {
            rej('promise2发生错误')
        })
    },rej => {
        console.log(rej);
    }).then(res => {},rej => {
        console.log(rej);
})
//用catch方式捕获promise中的错误
  new Promise((res,rej) => {
        // rej('promise1发生错误')
         res();
    }).then(res => {
        return new Promise((res,rej) => {
            rej('promise2发生错误')
        })
    }).then(res => {}).catch(e => {
        console.log(e); //会输出promise2发生错误
})

4、在promise中.finally是一定会执行的方法,不管这个promise是失败状态还是成功状态,.finally中的回调函数一定会被执行,.finally返回的也是一个promise,默认返回成功状态。可以通过.then方法捕获.finally返回的promise。

 new Promise((res,rej) => {
        // rej('promise1发生错误')
         res();
    }).then(res => {})
     .catch(e => {
        console.log(e);
    }).finally(() => {
        console.log('永远执行'); //不管前面发生了什么,此句代码一定输出
    })

5、Promise.resolve()也是一个promise,这个promise是成功状态的promise。如下例子。

    Promise.resolve('成功').then(res => {console.log(res);})
    //下面的例子与上面的例子等价
    new Promise((resolve,reject) => {
        resolve('成功');
    }).then(resovle => {
        console.log(resovle);
    })

6、Promise.reject(),返回的是一个拒绝状态的promise

    Promise.reject('失败').catch(e => console.log(e));
    //下面的例子与上面的例子等价
    new Promise((resolve,reject) => {
        reject('失败');
    }).then(null,reject => {
        console.log(reject);
    })

7、Promise.all()方法可以批量执行promise,Promise.all()方法返回的也是一个promise。Promise.all()方法要传入一个数组,这个数组包含的是要执行的promise,当数组包含的所有promise都是成功状态的话,则Promise.all()方法返回的也是成功状态。当数组中包含的promise中有一个以上的为拒绝状态,则Promise.all()方法返回的是拒绝状态。

 const promise1 = new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve("成功状态1");
        // reject('失败状态1'); //如果此代码执行则Promise.all()会是拒绝状态
      }, 1000);
    });
    const promise2 = new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve("成功状态2");
      }, 1000);
    });
    Promise.all([promise1, promise2]).then((resolve) => {
        console.log(resolve); //输出['成功状态1','成功状态2']
      }).catch((e) => {
        console.log(e); //如果promise1或promise2有一个是拒绝状态,则此句代码输出
      });

8、Promise.race()方法可以获取最先返回状态的promise,Promise.race()方法返回的也是一个promise。Promise.race()方法要传入一个数组,这个数组包含的是要执行的promise,当数组中的promise最先返回的promise是成功状态的,则Promise.rece()方法返回的就是此promise的成功状态。当数组中的promise最先返回的promise是拒绝状态的,则Promise.rece()方法返回的就是此promise的拒绝状态。

 const promise1 = new Promise((resolve,reject) => {
        setTimeout(() => {
            resolve('promise1--成功状态');
        },1000)
    })
    const promise2 = new Promise((resolve,reject) => {
        setTimeout(() => {
            resolve('promise2--成功状态');
            // reject('promise2--拒绝状态'); //如果此代码执行,Promise.race()是拒绝状态的
        },200)
    })
    Promise.race([promise1,promise2]).then(resolve => {
        console.log(resolve);//输出promise1---成功状态
    }).catch(e => {
        console.log(e) //如果最先返回的promise是拒绝状态的,则此语句会输出
    })