JS-ES6-Promise详解

ES6-Promise

1. 什么是Promise

   是一种js异步编程的解决方案，主要解决回调地狱问题，最早由社区提出并实现，ES6将其写入了标准语言，并提供了Promise这个对象。

2. Promise的三种状态

   1. 持续 pending
   2. 成功 resolved
   3. 失败 rejected

   =>对象的状态不受外界干扰，就像一种承诺，只有异步操作的结果来影响这三种状态。

3. 用法

   1. Promise 是 ES6 内置的构造函数

      =>var p = new Promise( function( resolve, reject ){ }) Promise构造函数接受一个函数作为参数 这两个参数是javascript内置的两 个函数，直接可以使用

      • resolve函数 就是将异步操作成功执行时的结果作为参数传递出去
      • reject函数 就是将异步失败的结果作为参数传递出去

   2. 生成Promise实例的结果有一个方法分别是 then( ) 他可以接受两个参数 分别是指定的resolve和reject状态

      • p.then( function(value) { //success}, function( error) { //error })
      • 第一个参数是一个回调函数 表示异步操作执行成功之后 要进行的操作
      • 第二个参数也是一个回调函数 表示异步执行失败之后的 要进行的操作
      • 其中两个回调函数接受的参数都是Promise对象对应resolve和reject函数传出的值

      let p = new Promise(function(resolve, reject) {
                  // resolve('执行成功');
                  reject('我执行失败了');
              })
              p.then(function(value){
                  console.log(value);
              },function( value ){
                  console.log(value);//我执行失败了
              })
      
      

      • then方法要等待Promise构造函数执行之后才会执行

      let p = new Promise(function(resolve, reject) {
                  setTimeout(function() {
                      resolve('我执行成功了');
                  },1000)
              })
              p.then(function(value){
                  console.log('resolve');
                  console.log(value);
              },function( value ){
                  console.log(value);
              })
              console.log('-------');  
              //-------
              //resolve
              //我执行成功了
      

   3. 还可以使用catch方法代替 then方法中的第二个参数 这个结果跟上述方法结果一样没什么区别

      let p = new Promise(function(resolve, reject) {
                  // resolve('执行成功');
                  reject('我执行失败了');
              })
              p.then(function(value){
                  console.log(value);
              }).catch(function(error){
                  console.log(error);
              }) 
      

   4. all( [p1,p2,p3 ] )方法 用于将多个Promise实例包装成一个新的Promise实例 all方法会接受一个数组作为参数 数组中的值都是Promise实例

      • 执行机制

        1. p1, p2, p3 的状态都是resolve时，p的状态都会变成resolve 并将p1, p2, p3 的返回值作为一个数组返回给p的回调函数
        2. 只要有一个状态时reject时，该实例就会把当前是reject的那个值返回给p的回调函数

        const p1 = new Promise((resolve, reject) => {
              setTimeout(() => {
                resolve('结果 1')
              }, Math.random() * 5 * 1000)
            })
        
            const p2 = new Promise((resolve, reject) => {
              setTimeout(() => {
                resolve('结果 2')
                // reject('结果 2 失败')
              }, Math.random() * 5 * 1000)
            })
        
            const p3 = new Promise((resolve, reject) => {
              setTimeout(() => {
                resolve('结果 3')
              }, Math.random() * 5 * 1000)
            })
        
            // 使用 all() 把他们合成一个
            Promise
              .all([ p1, p2, p3 ])
              .then(res => {
                console.log(res)//["结果 1", "结果 2", "结果 3"]
              })
              .catch(err => {
                console.log(err)//返回异步执行失败的那一个
              })