ES6中的Promise

947 阅读2分钟

1. Promise

  • ES6中对于异步编程提供的一种解决方案,解决的回调地狱的问题
  • Promise对象实例的两个参数,resolve和reject
    • resolve函数: 异步操作成功时的调用,并将异步操作的结果,作为参数传递出去
    • reject函数: 异步操作失败时的调用,并将异步操作报出的错误,作为参数传递出去
  • promise对象实例的方法,then和catch
    • .then方法: 成功时的回调函数,此方法返回的是一个新的promise实例,可以采用链式写法,.then方法后面可以继续调用.then方法
    • .catch方法: 错误时的回调函数

2. Promise链式调用

  • 因为每次调用后都会返回一个Promise对象
  • Promise.then()和.catch()每次返回不同的新对象,所有并不全等,但链式调用.then()会继承上一级的Promise对象

3. Promise.all()

  • Promise.all可以接受一个元素为Promise对象的数组作为参数,当这个数组里面所有的Promise对象都变为resolve时,该方法才会返回,返回的结果是一个数组
var p1 = new Promise(function(resolve){
    setTimeout(function(){
        resolve(1);
    },3000);
});
var p2 = new Promise(function(resolve){
    setTimeout(function(){
        resolve(2);
    },1000);
});
Promise.all([p1, p2]).then(function(value){
    console.log(value); // [1,2]
});
  • 在Promise.all方法中会按照数组的原先顺序将结果返回,不会按照时间顺序
  • 此方法的好处:在请求数据的过程中,偶尔会遇到发送多个请求并根据请求顺序获取和使用数据的场景,使用Promise.all可以解决这个问题

4. Promise.race()

  • 可以理解为赛跑的意思,意思就是说Promise.race([p1, p2, p3])里面哪个结果获得的快,就返回那个结果,不管结果本身是成功状态还是失败状态
    let p1 = new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('success')
        },1000)
    })
    
    let p2 = new Promise((resolve, reject) => {
        setTimeout(() => {
            reject('failed')
        }, 500)
    })
    
    Promise.race([p1, p2]).then((result) => {
        console.log(result)
    }).catch((error) => {
    console.log(error)  //  'failed'
    })