promise

## 前言

今天来分享下promise的用法,es6伟大发明之一,当初我学习的时候也是蛮头大的,不知道为啥,整个脑子就是,我在哪,我要干啥的懵圈,后面认真学习之后,觉得真是十分好用,下面就来一起学习下吧。

为什么会有promise

首先为什么会有promise的存在,其实很多人都知道的,其中最大的问题就是在处理多个有依赖关系的异步操作时,会出现回调地狱( callback hell ),如下:

$.ajax({
      url: '....',
      success: function (data) {
            $.ajax({
                  url: '....',
                  success: function (data) {
              }
          });
      }
 });

promise提供了一个优雅的方式,来解决这个问题,同时提供了很多的错误捕获机制。

如何使用promise

我们先不讲promise的理论语法,这样会一开始就降低学习的欲望,直接来看使用案例,然后去理解。

首先看基本使用
new Promise(function (resolve, reject) {
         // 假设此处是异步请求某个数据
               $.ajax({
                  url: '......',
                   success: function (res) {
                       if (res.code === 200) {
                            resolve(res.data);
                        } else {
                           reject('获取data失败');
                      }
                   }
               })
})
.then(function A(data) {
        // 成功,下一步
      console.log( data);
 }, function B(error) {
        // 失败,做相应处理
       console.log(error)
 });
console:
sucess
error

解析:

梳理流程:
  • 首先我们在promise函数里,执行我们的异步操作得到data
  • 如果成功的话,通过resolve函数数据传递出来,如果失败。通过reject把错误信息传递出来
  • 然后在.then里可以接受传递出来的数据,.then()里面接受两个函数,第一个函数接收resolve传递出来的值,也就是正确情况下的处理,第二个函数接收reject传递的信息,也就是错误的情况下的处理。
Promise是一个对象,它的内部其实有三种状态。
  • 初始状态( pending )。
  • 已完成( fulfilled ): Promise 的异步操作已结束成功。
  • 已拒绝( rejected ): Promise 的异步操作未成功结束。

resolve 方法可以使 Promise 对象的状态改变成成功,同时传递一个参数用于后续成功后的操作。
reject 方法则是将 Promise 对象的状态改变为失败,同时将错误的信息传递到后续错误处理的操作。

then(onFulfilled, onRejected)

---(onFulfilled, onRejected)

链式then

当然,我们既然解决回调地狱,一个异步,看不出来啥优势,现在看多个异步请求, 为了代码简约,我们用setTimeout来代替ajax请求 作为异步操作,如下:

new Promise((resolve, reject) => {
     setTimeout( () => {
          if (...){
            resolve([1, 2, 3])
        } else {
            reject('error');
        }
   }, 2000);
})
 .then( data => {
        console.log(value);  // 打印出[1, 2, 3]
        return new Promise( (resolve, reject)=> {   // 新的异步请求,需要promise对象
            let data2 = 1 + data;
            setTimeout( () => {
              if (...) {
                   resolve(data2);
              } else {
                  reject('error2')
              }
              
            }, 2000);
       });
  }, error => {
      cosnole.log(error)
  })
.then( data2 => {
      console.log(data2 );
 }, error => {
      cosnole.log(error)
  });
解析:

-这个例子中,第一个异步操作得到数据[1, 2, 3],传递到第一个then中,我们在第一个then中运用拿到的数据,进行第二次异步操作,并把结果传递出去。在第二个then中拿到数据,并且捕获error。
可以看到本来嵌套的两个异步操作,现在清晰多了,而且链式接无数个then

在这里有两个地方需要注意
  • then里面的可捕获错误的函数,可以捕获到上面的所有then的错误,所以只在最后一个then里,写错误捕获函数就可以。
  • 每次异步操作时候需要返回一个新的promise,因为只有用promise对象才会等异步操作执行完,才去执行下面的then,才能拿到异步执行后的数据,所以第二个then里的异步请求,也需要声明Promise对象。如果then里面返回常量,可以直接返回。如下:
new Promise((resolve, reject) => {
     setTimeout( () => {
          if (...){
            resolve([1, 2, 3])
        } else {
            reject('error');
        }
   }, 2000);
})
 .then( value => {
        return '222';    // 如果是直接返回常量,可直接return
    })
 .then( value2 => {
     console.log(value2 ); // 打印出222
 })

下面忽略error情况,看两个例子,大家可以自己思考下打印结果

new Promise(resolve => {
    setTimeout( () => {
        resolve('value1');
    }, 2000);
})
 .then( value1 => {
        console.log(value1);
        (function () {
            return new Promise(resolve => {
                setTimeout(() => {
                    console.log('Mr.Laurence');
                    resolve('Merry Xmas');
                }, 2000);
            });
        }());
        return false;
    })
 .then( value => {
     console.log(value + ' world');
 });

value1
false world
Mr.Laurence
new Promise( resolve => {
    console.log('Step 1');
    setTimeout(() => {
        resolve(100);
    }, 1000);
})
.then( value => {
     return new Promise(resolve => {
         console.log('Step 1-1');
         setTimeout(() => {
            resolve(110);
         }, 1000);
    })
    .then( value => {
           console.log('Step 1-2');
           return value;
    })
   .then( value => {
         console.log('Step 1-3');
         return value;
    });
})
.then(value => {
      console.log(value);
      console.log('Step 2');
});

console:
Step 1
Step 1-1
Step 1-2
Step 1-3
110
Step 2

catch

catch 方法是 then(onFulfilled, onRejected) 方法当中 onRejected 函数的一个简单的写法,也就是说可以写成 then(fn).catch(fn),相当于 then(fn).then(null, fn)。使用 catch 的写法比一般的写法更加清晰明确。我们在捕获错误的时候,直接在最后写catch函数即可。

let promise = new Promise(function(resolve, reject) {
    throw new Error("Explosion!");
});
promise.catch(function(error) {
      console.log(error.message); // "Explosion!"
});

上面代码等于与下面的代码

let promise = new Promise(function(resolve, reject) {
    throw new Error("Explosion!");
});
promise.catch(function(error) {
      console.log(error.message); // "Explosion!"
});
异步代码错误抛出要用reject
new Promise( resolve => {
    setTimeout( () => {
        throw new Error('bye');
    }, 2000);
})
.then( value => {
 })
.catch( error => {
      console.log( 'catch', error);
 });
控制台会直接报错 Uncaught Error: bye

解析:因为异步情况下,catch已经执行完了,错误才抛出,所以无法捕获,所以要用reject,如下:

new Promise( (resolve, reject) => {
    setTimeout( () => {
        reject('bye');
    }, 2000);
})
.then( value => {
        console.log( value + ' world');
 })
.catch( error => {
      console.log( 'catch', error);
 });

catch bye
利用reject可以抓捕到promise里throw的错
catch 可以捕获then里丢出来的错,且按顺序只抓捕第一个没有被捕获的错误
new Promise( resolve => {
    setTimeout( () => {
        resolve();
    }, 2000);
})
.then( value => {
    throw new Error('bye');
 })
.then( value => {
   throw new Error('bye2');
 })
.catch( error => {
  console.log( 'catch', error);
 });

console: Error: bye
new Promise( resolve => {
    setTimeout( () => {
        resolve();
    }, 2000);
})
.then( value => {
    throw new Error('bye');
 })
.catch( error => {
  console.log( 'catch', error);
 })
.then( value => {
   throw new Error('bye2');
 })
.catch( error => {
  console.log( 'catch', error);
 });

console: Error: bye
console: Error: bye2
catch 抓捕到的是第一个没有被捕获的错误
错误被捕获后,下面代码可以继续执行
new Promise(resolve => {
    setTimeout(() => {
        resolve();
    }, 1000);
})
    .then( () => {
        throw new Error('test1 error');
    })
    .catch( err => {
        console.log('I catch:', err);   // 此处捕获了 'test1 error',当错误被捕获后,下面代码可以继续执行
    })
    .then( () => {
        console.log(' here');
    })
    .then( () => {
        console.log('and here');
         throw new Error('test2 error');
    })
    .catch( err => {
        console.log('No, I catch:', err);  // 此处捕获了 'test2 error'
    });

I catch: Error: test2 error
here
and here
 I catch: Error: test2 error
错误在捕获之前的代码不会执行
new Promise(resolve => {
    setTimeout(() => {
        resolve();
    }, 1000);
})
    .then( () => {
        throw new Error('test1 error');
    })
    .catch( err => {
       console.log('I catch:', err);   // 此处捕获了 'test1 error',不影响下面的代码执行
       throw new Error('another error'); // 在catch里面丢出错误,会直接跳到下一个能被捕获的地方。
    })
    .then( () => {
        console.log('and here');
         throw new Error('test2 error');
    })
    .catch( err => {
        console.log('No, I catch:', err);  // 此处捕获了 'test2 error'
    });

I catch: Error: test2 error
I catch: Error: another error
new Promise(resolve => {
    setTimeout(() => {
        resolve();
    }, 1000);
})
    .then( () => {
        console.log('start');
        throw new Error('test1 error');
    })
    .then( () => {
        console.log('arrive here');
    })
    .then( () => {
        console.log('... and here');
         throw new Error('test2 error');  
    })
    .catch( err => {
        console.log('No, I catch:', err);   // 捕获到了第一个
    });

No, I catch: Error: test1 error
    at Promise.then (<anonymous>:8:1

Promise.all

Promise.all([1, 2, 3])
      .then( all => {
          console.log('1:', all);
      })
[1, 2, 3]
Promise.all([function () {console.log('ooxx');}, 'xxoo', false])
      .then( all => {
         console.log( all);
      });
 [ƒ, "xxoo", false]
let p1 = new Promise( resolve => {
            setTimeout(() => {
                resolve('I\'m P1');
            }, 1500);
});
let p2 = new Promise( (resolve, reject) => {
            setTimeout(() => {
                resolve('I\'m P2');
            }, 1000);
 });
let p3 = new Promise( (resolve, reject) => {
            setTimeout(() => {
                resolve('I\'m P3');
            }, 3000);
 });

 Promise.all([p1, p2, p3]).then( all => {
       console.log('all', all);
}).catch( err => {
        console.log('Catch:', err);
});

all (3) ["I'm P1", "I'm P2", "I'm P3"]
案例:删除所有数据后,做一些事情、、、、
db.allDocs({include_docs: true}).then(function (result) {
  return Promise.all(result.rows.map(function (row) {
    return db.remove(row.doc);
  }));
}).then(function (arrayOfResults) {
  // All docs have really been removed() now!
});

Promise.resolve

Promise.resolve()
    .then( () => {
        console.log('Step 1');
    })

其他

Promise.resolve('foo').then(Promise.resolve('bar')).then(function (result) {
  console.log(result);
});
VM95:2 foo
如果你向 then() 传递的并非是一个函数(比如 promise)
它实际上会将其解释为 then(null),这就会导致前一个 promise 的结果会穿透下面

How do I gain access to resultA here?

function getExample() {
    return promiseA(…).then(function(resultA) {
        // Some processing
        return promiseB(…);
    }).then(function(resultB) {
        // More processing
        return // How do I gain access to resultA here?
    });
}

解决 Break the chain

function getExample() {
    var a = promiseA(…);
    var b = a.then(function(resultA) {
        // some processing
        return promiseB(…);
    });
    return Promise.all([a, b]).then(function([resultA, resultB]) {
        // more processing
        return // something using both resultA and resultB
    });
}

相关推荐