## 媒介

本日来分享下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
    });
}